Vue CLI

Vue CLI 环境要求： 需要 Node.js 8.9+ (推荐 8.11.0+)

全局安装 Vue-CLI

安装成功后，在命令行可以使用 vue 命令，比如查看当前安装的版本：

如果执行上面后，命令行提示 'vue' 不是内部或外部命令

解决方法：配置环境变量

运行 vue create 命令来创建一个新项目

会提示选择默认（ default ）还是手动（ Manually ）,默认的配置非常适合快速创建一个新项目的原型， 而手动设置则提供了更多的选项。 这里选择 default ，等待一会（如有提示等待，一直回车执行下去就行）

进入： cd vue-cli-demo1

运行： npm run serve

访问：http://localhost:8080/

  

创建自定义项目

1. 在 D:\WebProject\webStudy 目录下打开命令行窗口，输入以下命令进行新建项目， 项目名是 vue-cli-demo

2. 

3. 

 

 

选择 Manually select features 手动选择自定义配置进行创建项目

1. 如下图，根据项目需求, 选择哪些配置选项 注意：按 空格键 是选中或取消， a 键是全选 ,i 键是反选

2. 

3.  

选择对应配置选项:

 

选择后按回车键, 会提示: 是否使用 history 模式的路由, 按回车即可

 

选择CSS预处理器

 

选择ESLint + Prettier

 

选择语法检查方式，这里我选择: 保存就检测

 

会提示: 把babel,postcss,eslint这些配置放哪，我选择: 放在独立文件中, 然后回来即可

 

 

会提示: 是否将当前项目设置的配置保存为预配置, 方便后面创建项目时, 继续使用这套配置? 按回车保存即可, 下次创建项目时,就会多有一个选项(vue-cli-demo2)

 

如果要删除 preset（预配置），在 C:\Users\你的用户名 目录下的 .vuerc 文件中删除

确定后，等待下载依赖模块

 

运行

 

CLI服务命令

参考 ：https://cli.vuejs.org/zh/guide/cli-service.html CLI 服务 ( @vue/cli-service ) 是一个开发环境依赖。针对绝大部分应用优化过的内部的 webpack 配置； 在一个 Vue CLI 项目中， @vue/cli-service 模块安装了一个名为 vue-cli-service 的命令。 在 package.json 中的 scripts 指定 vue-cli-service 相关命令。

 

启动一个开发环境服务器(基于 webpack-dev-server)

修改组件代码后，会自动热模块替换

build 会项目根目录下自动创建一个 dist/ 目录，打包后的文件都在其中

打包后的 js 会自动生成后缀为 .js 和 .map 的文件 ​ js文件: 是经过压缩加密的，如果运行时报错，输出的错误信息无法准确定位到哪里的代码报错。 ​ map文件：文件比较大， 代码未加密，可以准确的输出是哪一行哪一列有错。

lint 使用 Eslint 进行检查并修复代码的规范 比如: 将 main.js 中的格式多加个空格 ，执行 npm run lint 后它会自动的去除多余空格 。

执行命令方式：

自定义配置

在项目根目录下创建 vue.config.js 文件。 vue.config.js 基本常用配置（其他的具体看文档: https://cli.vuejs.org/zh/config/#vue-config-js）

 

 

1.