Vue框架基础7-Vue CLI（脚手架的使用）

介绍

基于 Vue.js 进行快速开发的完整系统。
作用 快速搭建项目结构

安装

两种安装方式：

• $ npm install -g @vue/cli

• $ yarn global add @vue/cli
  安装完毕后，可以在 cmd 命令行中输入检测安装成功没有：

• $ vue --version
  如果能够查看到版本信息，则说明安装成功，否则安装失败或环境变量配置有问题。
  

创建项目

GUI - 图形化用户界面

• $ vue ui

命令行

1.执行创建命令：

• $ vue create project-name

显示创建项目的向导
2.选择手动选择项目新特性项：

选择新特性：

4.选择 vue 版本：

5.选择 CSS 预处理器：

6.选择 linter 规范：

7.选择保存时验证并格式化：

8.选择配置文件存放位置：

9.是否将上述选择特性保存为预设项：

10.安装项目依赖
11.项目创建成功后，进入项目目录，运行任务：

项目说明

• 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

• serve: 开发任务，会自动启动开发服务器（webpack-dev-server）
• build：生产任务，构建生产环境下的资源
• lint：验证并格式化代码

自动格式化代码

1.打开 Visual Studio Code ，点击设置选项里面的设置选项。

2.点击图标

3.点击后在点击的文件中加入如下指令：

"editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },

4.完成后当有格式问题报错的时候，可以按住 ctrl + s 来进行自动格式化。

自定义代码格式

1.点击项目文件中的如下文件

2.文件的这个位置可以自定义规则

安装 VSCode 插件

ESLint
ESLint 是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。

Vetur
Vetur 用于警告未正确设置项目。

关闭 eslint 代码检测工具

在 vue.config.js 文件中加入以下代码即可关掉代码检测工具

module.exports = ({
  lintOnSave: false
})