Vue-cli3.x 使用教程

1,620 阅读5分钟

官方文档

安装与使用

安装脚手架

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'的运行效果与‘vue-cli@2.x’相同
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.jsdevServer 配置服务器端口等信息

用法: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 buildvue-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_ENVBASE_URL

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

模式与环境变量混合使用

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

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

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

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

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