简介
接触 Vue 已经有一段时间了，之前做项目都是套用自己之前配置好的项目模板，最近突发奇想想要再重新配置一下项目，然而。。。
zengqingdeMacBook-Pro:Vue zengqing$ vue init webpack hello-world
Command vue init requires a global addon to be installed.
Please run npm install -g @vue/cli-init and try again.
zengqingdeMacBook-Pro:Vue zengqing$
复制代码之前的 vue init 创建命令不能用了有木有，然后想到之前更新了一波脚手架，然后赶紧翻看一下 Vue Cli 官方文档 然后发现画风已经是变成这个样子的了
原来已经升级到了 3.xx 版本的了，那么我们就来学习一下 Vue Cli 3 的新东西吧。
新特性
整理收集了一些 Vue Cli 3 的新特性，总结如下：
- 使用命令的变化
- 项目结构变化
- 项目配置选项的变化
- 支持更多新功能
以上纯属个人观点，仅供参考。
使用命令的变化
该方面主要体现在创建项目上面，就像刚开始说的那样 vue init webpack hello-world 已经替换为 vue create hello-world。
官方文档上说
Vue CLI 2是被Vue CLI 3覆盖的。如果你仍然需要使用旧版本的vue init功能还是可以实现的，只需要使用以下命令：
npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `[email protected]` 相同
vue init webpack my-project
复制代码具体创建项目命令的介绍会放在下一篇文章再聊，此处仅做介绍
项目结构变化
先上 2.x 版本项目结构
.
├── README.md
├── build
│ ├── build-preview.js
│ ├── build.js
│ ├── check-versions.js
│ ├── logo.png
│ ├── utils.js
│ ├── vue-loader.conf.js
│ ├── webpack.base.conf.js
│ ├── webpack.dev.conf.js
│ ├── webpack.prev.conf.js
│ └── webpack.prod.conf.js
├── config
│ ├── dev.env.js
│ ├── index.js
│ ├── preview.env.js
│ └── prod.env.js
├── index.html
├── package-lock.json
├── package.json
├── src
│ ├── App.vue
│ ├── assets
│ ├── components
│ ├── main.js
│ ├── router
│ ├── style
│ └── utils
└── static
└── background.mp3
复制代码下面是新版本脚手架生成的项目结构
.
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
│ ├── favicon.ico
│ └── index.html
└── src
├── App.vue
├── assets
├── components
├── main.js
├── router.js
└── views
复制代码可以看出新版本的脚手架工具生成的项目是极其的简洁了。
- 移除了配置文件目录，
config和build文件夹。 - 移除了
static文件夹，新增public文件夹，并且index.html移动到public中。 在src文件夹中新增了views文件夹，用于分类 视图组件 和 公共组件。
项目配置选项的变化
想必大家都知道在 2.0 版本的时候，要修改项目配置可以在 build 和 config 目录下进行修改，然而在 3.0 中这两个文件夹都已经移除了，那么新版本的配置应该在哪里设置呢？其实也很简单，只需要在项目根目录下新建一个 vue.config.js 文件然后在里面写项目所需配置就可以了。
具体配置方法会在后续文章中给出
支持更多新功能
在新版本的脚手架中创建项目的时候可以看到新增了对 TypeScript 与 PWA 的支持
更多文章可查看 我的博客