Vue-cli3.x 使用教程

官方文档

安装与使用

安装脚手架

npm install -g @vue/cli
# OR
yarn global add @vue/cli
复制代码

创建项目

命令行安装

# 直接创建，项目名称不能有大写字母
vue create my-project 
复制代码

选择配置方式(默认(一)、自定义(二))，默认方式会直接创建项目，自定义会执行下一步选择对应配置

配置方法还可能是自定义的预设配置

选择扩展插件，其中几乎Babel是必须的，其他的按需添加

使用space空格键,选中选项

确认是否使用class-style component syntax(Class风格装饰器)，history 路由，支持JSX写法，ESLint标准、何时执行检测等

选择eslint、Babel、PostCSS的配置方式

如eslint：选择是在.eslint.js 还是package.json的eslintConfig中配置eslint规范

使用旧版方法安装

3.x 保留了2.x的安装方式，可以使用cli-init以2.x的方式安装项目

# 使用旧版（2.X）创建
npm install -g @vue/cli-init
# 'vue init'的运行效果与‘[email protected]’相同
vue init webpack projectname 
复制代码

图形界面创建

vue ui # 启动图形化界面
复制代码

创建项目名称、管理工具等

选择是默认、自定义设置、从远程仓库拉取第一、第三种选择后直接创建项目，第二种执行下一步，且功能与配置页的信息与之前命令行安装的相同

项目运行

项目目录结构

项目运行（`vue-cli-service`命令）

CLI3.x项目默认安装了@vue/cli-service插件，它安装了一个名为 vue-cli-service 的命令，可以运行、编译cli3.x项目

{
  "scripts": { // 默认命令
    "serve": "vue-cli-service serve", // 启动项目
    "build": "vue-cli-service build" // 编译项目
  }
}
npm run serve
yarn serve
npx vue-cli-service serve
复制代码

`vue-cli-service serve`运行项目

该命令会启动一个基于webpack-dev-server的附带模块热重载的开发服务器在vue.config.js的 devServer 配置服务器端口等信息

用法：vue-cli-service serve [options] [entry]
options选项：
--open    在服务器启动时打开浏览器
--copy    在服务器启动时将 URL 复制到剪切版
--mode    指定环境模式 (默认值：development)
--host    指定 host (默认值：0.0.0.0)
--port    指定 port (默认值：8080)
--https   使用 https (默认值：false)

emtry入口：
  [entry] 将被指定为唯一入口，而非额外的追加入口
  不可覆盖覆盖 config.pages 中的 entry
复制代码

`vue-cli-service build`编译项目

该命令会在 outputDir 目录产生一个可用于生产环境的项目包。包的压缩方式有webpack的配置决定

用法：vue-cli-service build [options] [entry|pattern]
选项：
--mode        指定环境模式 (默认值：production)
--dest        指定输出目录 (默认值：dist)
--modern      使用现代模式构建应用，为现代浏览器交付原生支持的 ES2015 代码，并生成一个兼容老浏览器的包用来自动回退。
--target      app | lib | wc | wc-async(默认值：app)允许你将项目中的任何组件以一个库或 Web Components 组件的方式进行构建。更多细节请查阅构建目标。
--name        库或 Web Components 模式下的名字 (默认值：package.json 中的 "name" 字段或入口文件名)
--no-clean    在构建项目之前不清除目标目录
--report      会根据构建统计生成报告,生成 report.html 以帮助分析包内容模块的大小
--report-json 会根据构建统计生成报告生成 report.json 以帮助分析包内容模块的大小
--watch       监听文件变化
复制代码

`vue-cli-service inspect`

用来审查Vue CLI项目的webpack config

用法：vue-cli-service inspect [options] [...paths]
选项：
  --mode    指定环境模式 (默认值：development)
复制代码

查看命令帮助信息

npx vue-cli-service help [command]
复制代码

环境变量设置[参数配置]

模式

cli3新增模式概念，每个模式在项目中都有对应的配置文件，项目启动时，对应的文件就会加载，与环境变量不同，一个模式可以包括多个环境变量

Vue CLI 项目默认有三个模式：
- development 模式用于 vue-cli-service serve
- production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
- test 模式用于 vue-cli-service test:unit
模式需要在启动项目时使用--mode指定

NODE_ENV=development npm run serve --mode mymode # 模式包含多个环境变量
复制代码

每个模式有多个环境变量，cli3.x为模式与环境变量指定了一个.env配置文件

.env # 所有环境
.env.mode # mode模式加载的配置文件[优先级高于.env]
.env.mode.development # mode模式下，development环境所加载的配置文件[优先级最高]
复制代码

.env文件详细信息
- 这些文件是用来代替config目录的
- 以VUE_APP_开头的变量可以再代码中通过process.env访问，其他的变量不可访问
- process.env始终含有两个特殊变量NODE_ENV和BASE_URL

3.x版本的config目录虽然删除，但是如果不习惯.env的方式，可以不设置任何模式，只指定NODE_ENV，按2.x的config方法配置参数

模式与环境变量混合使用

[cli3.6]webpack的build代码压缩默认不开启，需要设置环境变量为production才会开启

如果需要在线上测试环境启用代码压缩，可以使用模式(mode)管理代码中的环境

在每个mode的.env文件中设置特殊变量标识代码环境，以便在代码中判断当前环境

每个mode设置local和production两种环境，local本地运行开发，production用来build代码线上运行

production环境启用了很多编译相关的优化，同时这些优化会导致开发时代码运行变慢，验证影响开发效率，所以需要在开发时设置不同的环境