Vue7-Vue CLI

单文件组件（SFC）

1. 全称：single-file components
2. 文件后缀（扩展）名为 .vue
3. 解决的问题：

• 全局定义组件可能会出现命名冲突
• 字符串的 template 没有语法高亮
• 对 CSS 的支持不友好
• 没有明显的构建过程
  单文件组件语法：

<template>
  模板语法
</template>

<script>
  // 定义并导出组件的选项对象模块
</script>

<style lang="scss" scoped>
  /* 样式 */
  div {
      
        }
</style>

• template：视图结构
• script：交互逻辑
• style：样式
• lang：使用 css 预处理器，如：scss、less
• scoped：表示所书写的样式仅支持在当前组件中使用，其它组件不受影响

Vue Loader

Vue Loader 是一个 webpack 的 loader，它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件

Vue CLI

1. 基于 Vue.js 进行快速开发的完整系统
2. 脚手架：快速搭建项目结构
3. 安装$ npm install -g @vue/cli

OR

1. 安装：$ yarn global add @vue/cli
2. 安装完毕后，可以在 cmd 命令行中输入：$ vue --version如果能够查看到版本信息，则说明安装成功，否则安装失败或环境变量配置有问题
3. 创建项目

• GUI - 图形化用户界面$ vue ui
• 命令行执行创建命令：$ vue create project-name

4. 命令行显示创建项目的向导

• 选择手动选择项目新特性项：
  ? Please pick a preset:
  Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  > Manually select features
• 选择新特性：
  ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and
  <enter> to proceed)
  () Babel
  ( ) TypeScript
  ( ) Progressive Web App (PWA) Support
  ( ) Router
  ( ) Vuex
  >() CSS Pre-processors
  (*) Linter / Formatter
  ( ) Unit Testing
  ( ) E2E Testing
• 选择 vue 版本：
  ? Choose a version of Vue.js that you want to start the project with
  3.x
  > 2.x
• 选择 CSS 预处理器：
  ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
  Sass/SCSS (with dart-sass)
  > Less
  Stylus
• 选择 linter 规范：
  ? Pick a linter / formatter config:
  ESLint with error prevention only
  ESLint + Airbnb config
  > ESLint + Standard config
  ESLint + Prettier
• 选择保存时验证并格式化：
  ? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to pr
  oceed)
  >(*) Lint on save
  ( ) Lint and fix on commit
• 选择配置文件存放位置：
  ? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
  > In dedicated config files
  In package.json
• 是否将上述选择特性保存为预设项：
  ? Save this as a preset for future projects? (y/N)
  如果是 yes，则还需要输入预设项名称

安装项目依赖

1. 项目创建成功后，进入项目目录，运行任务：
   $ cd project-name
   $ npm run serve # 或 yarn serve
2. 项目说明

• public 目录中放置的是应用的 html 文件（通常只有一个 index.html）
• src 目录中放置我们自己项目中所书写的源代码
• src 下 main.js 是应用的入口 JS 文件
• .eslintrc.js 是 ESLint 的配置文件
• babel.config.js 是 Babel 的配置文件
• package.json 是项目配置文件
• vue.config.js 是 Vue CLI 的配置文件（在 VueCLI4.x 中这个文件需要自己手动创建）
• npm scripts

{
    
    
  "scripts": {
    
    
    "start": "npm run serve",
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
}
/*
*  start：自定义开始启动
*  serve: 开发任务，会自动启动开发服务器（webpack-dev-server）
*  build：生产任务，构建生产环境下的资源
*  lint：验证并格式化代码
*/

安装 VSCode 插件（规范验证）

1. ESLint ES规则验证
2. Vetur Vue书写格式验证
3. 注意：

• 在VSCode中只能有一个Vue项目，否则会报错
• 也可以在.json文件中修改 requireConfigFile: false