简介

接触 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` 的运行效果将会跟 `vue-cli@2.x` 相同
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 的支持

更多文章可查看 我的博客