vue-cli 3.0安装和使用

版权声明：一个来自外太空的游客 https://blog.csdn.net/qxfjyk/article/details/84027564

Vue CLI介绍

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：

通过 @vue/cli 搭建交互式的项目脚手架。
通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。
一个运行时依赖 (@vue/cli-service)，该依赖：
可升级；
基于 webpack 构建，并带有合理的默认配置；
可以通过项目内的配置文件进行配置；
可以通过插件进行扩展。
一个丰富的官方插件集合，集成了前端生态中最好的工具。
Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject

默认你已经安装了nodejs

一.安装vue-cli 3.0

1.安装：

npm install -g @vue/cli

二.创建项目

2.创建vue-myAapp项目：

vue create vue-app

3.项目配置：

默认配置
手动配置：babel ts 预编译 等等… 【选择这个】
以下是我选择的配置（可以直接按数字键1,2,3,4进行选择）

Babel：将ES6编译成ES5
TypeScript：JS超集，主要是类型检查
Router和Vuex，路由和状态管理
Linter/ Formatter：代码检查工具
CSS Pre-processors：css预编译 (稍后会对这里进行配置)
Unit Testing：单元测试，开发过程中前端对代码进行自运行测试

Use class-style component syntax? (Y/n) y

是否使用Class风格装饰器？
即原本是：home = new Vue()创建vue实例
使用装饰器后：

class home extends Vue{}

Use Babel alongside TypeScript for auto-detected polyfills? (Y/n) y

使用Babel与TypeScript一起用于自动检测的填充? yes

Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) y

路由使用历史模式? 这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面

使用什么css预编译器？ 我选择的 stylus

tslint: typescript格式验证工具
eslint w...: 只进行报错提醒； 【选这个】
eslint + A...: 不严谨模式；
eslint + S...: 正常模式；
eslint + P...: 严格模式

代码检查方式：我选择保存时检查

多环境配置

因为公司有 开发环境 ，测试环境，联调环境，线上环境 。减少人为配置，一次配置对原则。所以在2.0.x 增加了“package.json “tt”: “node build/tt-build.js”” 类型的配置，配置不了不少文件。 在 vue-cli 3.0.x 里面支持 “.env” 文件配置 ,我这里增加

“.env.development” ， “.env.production”和“.env.test”

配置 。

1. 基本对应和默认

development is used by vue-cli-service serve
production is used by vue-cli-service build
test is used by vue-cli-service test

2.指定配置启动
增加其他配置，需要下面指定配置 。

"dev-build": "vue-cli-service build --mode development",

3.”.env “配置文件编写
配置文件内容格式如下 ，

VUE_APP_*

例如：”.env.production” 内容如下

VUE_APP_MOCK_URL = 'https://xxx.xxx.xxx/restapi/'

4. 调整用环境配置

console.log(process.env.VUE_APP_MOCK_URL);
process.env.NODE_ENV // 特定
BASE_URL // vue.config.js 配置

阅读更多