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: './''
网友评论