vue-cli 更新对比（vue-cli2.0升级3.0）

vue-cli 更新对比

Vue-cli 是Vue 官方提供的脚手架工具，他的github 地址是：

vue-cli github

vue-cli 3.0发布了，相对比于2.0，更新挺大的。本文简单介绍了下初采坑的一些区别

vue-cli 2.0以上

下载安装

npm install vue-cli -g

• 1

查看版本

vue -V

// 2.9.3 说明是2.9.3版本（在写此篇文章时，npm 上是2.9.3最新版本，3.0测试版安装方式不同，请往下看）

• 1
• 2

接下来介绍一些2.0以上中的命令

vue help

//或者

vue --help

// 查看vue 帮助

vue list //查看vue 模板列表

vue init <template-name> <project-name> 初始化 vue 项目

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

下面是以webpack模板创建项目完成后的目录结构：

然后在创建的项目根目录下

npm install

npm run dev

• 1
• 2
• 3

vue-cli 3.0

写此篇文章时 vue-cli 3.0 测试版刚发布，所以安装方式有所不同

下载安装

npm install -g vue@cli

• 1

查看版本

vue -V

//或者

vue --version

// 3.0.0-beta.1 说明测试版本安装成功

• 1
• 2
• 3
• 4

3.0 中的命令

vue --help // 查看帮助，删除了 vue help

// 还删除了vue list

• 1
• 2
• 3

创建新项目

vue create <your project>

//注意：现在已经不是选择模版了，而是presets （预设）首先是问你是否使用默认的preset 还是手动配置功能

• 1
• 2

注意

创建项目的方式改变，创建完成的项目也就不一样；但是，并不是说2.0 的 vue init 方式取消了；如果还想使用；则需要安装 @vue/cli-init；执行 npm install @vue/cli-init；

新版本创建项目的项目目录：

安装完成之后进到项目根目录，启动项目：

npm run serve

• 1

注意 启动方式改变了，并且也不需要 npm install 了

还有就是发现目录结构简单多了，原因在于package.json：

"scripts": {

"serve": "vue-cli-service serve --open",

"build": "vue-cli-service build",

"lint": "vue-cli-service lint"

}

• 1
• 2
• 3
• 4
• 5

vue 学习 react-scripts 搞了一个vue-cli-service 啊

上面三个命令分别是启动开发服务，打包，和格式化代码

之前的config目录哪里去了？build 的目录哪里去了？webpack 的配置呢

可能这就是vue-cli3.0号称的0配置吧

那么我们怎么配置呢？

要请出我们的vue.config.js（模仿于angular-cli脚手架创建项目的配置）

具体如何配置请移驾官方文档查看！