vue-cli4环境搭建

vue/cli 官网地址

https://cli.vuejs.org/zh/guide/

安装和vue-cli3.0的是一模一样的，对比了一下3.0的脚手架，除了目录发生变化一些，其他的都一样

旧版本

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli(1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

node 版本

Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。

安装

可以使用下列任一命令安装这个新的包：

npm install -g @vue/cli

yarn global add @vue/cli

你还可以用这个命令来检查版本是否正确：

vue --version

运行以下命令来创建一个新项目：

vue create test

如果在 Windows 上 使用 Git Bash，交互提示符并不工作。必须通过 window的cmd进入项目 启动这个命令。不过，如果仍想使用 vue create test，则可以通过在 ~/.bashrc 文件中添加以下行来为命令添加别名。 alias vue='winpty vue.cmd'需要重新启动 Git Bash 终端会话以使更新后的 bashrc 文件生效。

default 是 使用默认配置

Manually select features 是 自定义配置

(使用上下箭头选择默认设置还是手动选择功能)

(按空格键选择你需要的功能，选完后按回车)

选择配置（自定义配置）初始化

里面有各种选择 css预编译 语法检测工具，

我选择的各种初始化数据

router是否使用history模式，history需要服务器支持

关于Babel, PostCSS, ESLint, etc.这些配置文件你是想放在package.json里面还是单独放在外面

编辑器一般默认会在项目根目录下寻找配置文件，

把babel,postcss,eslint这些配置文件放哪，随便选，键入N不记录，如果键入Y需要输入保存名字

是否保存为未来项目的预配置吗 我选择保存了 名称为routerVuex 下次可以直接用

回车就开始下载各种模板了

成功之后 会有启动服务的相应提示命令

项目创建好后

npm run serve // 运行项目

然后在浏览器输入http://localhost:8080,就可以看到运行的界面了

vue-cli4 新增

安装

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli

项目创建

关于项目创建，除了命令创建4.x还增加了图形化界面创建以及管理vue项目

在创建新项目时还可以混合选用多种集成

命令创建

创建时候的各种命令 都在上面创建的时候写出来了

图形化界面

图形化操作非常方便

执行npm命令

vue ui访问 http://localhost:8000你就可以创建，管理，导入项目

新功能

node_modules

public

src

.browserslistrc

.eslintrc.js

.gitignore

babel.config.js

package.json

postcss.config.js

README.md

以上是项目根目录，4.x对比2.x文件结构明显精简了不少，多了一个public文件夹用于存放静态文件少了config、build等一系列的配置文件，这些配置文件都被放在了node_modules@vue文件下

browserslist

根目录中多了一个.browserslist文件，可以指定项目的目标浏览器的范围

用于转译的 JavaScript 特性和添加CSS 浏览器前缀，可以减少兼容代码提高代码质量

如果想少一个文件，你也可以在package.json中添加browserslist字段，参数是一个数组

Vue CLI 项目有三个模式： development 模式用于启动，production 模式用于打包和e2e测试，test 模式用于unit测试

CLI 插件安装

插件添加vue add@vue/eslint

向被安装的插件传递生成器选项(这样做会跳过命令提示)vueadd@vue/eslint--config airbnb--lintOn save

配置修改

在根目录新建一个vue.config.js，在里面修改相应的配置

环境参数配置

 .env.development 存放测试环境参数

.env.production 存放线上环境参数

参数名称要以VUE_APP_BASE开始

打包后路径问题

在vue.config.js文件中加入'baseUrl: './''