Vue脚手架使用介绍

前言

博主在更新此文档时，Vue脚手架已经更新到v4.0.5点击查看最新版本。可以说vue团队的工作劲头还是很足，出活儿~~
此文将介绍Vue脚手架3个大版本的使用方式，分别有两种不同的方式：

• 第一种：2.x
• 第二种：3.x和4.x

一. vue-cli 2.x使用

1. vue-cli安装

$ npm install vue-cli@2 -g
$ vue --version

2. 创建项目

$ vue init <template-name> <project-name>

init表示我要用vue-cli来初始化项目, template-name表示模板名称，project-name标识项目名称，这个你可以根据自己的项目来起名字。

// Example
$ vue init webpack my-project
$ cd my-project
$ npm run dev

vue-cli官方为我们提供了6种模板，

当前可用的模板包括：

1. webpack-一个全面的webpack+vue-loader的模板，功能包括热加载，`linting,检测和CSS```扩展。
2. webpack-simple-一个简单webpack+vue-loader的模板，不包含其他功能，让你快速的搭建vue的开发环境。
3. browserify-一个全面的Browserify+vueify 的模板，功能包括热加载，linting,单元检测。
4. browserify-simple-一个简单Browserify+vueify的模板，不包含其他功能，让你快速的搭建vue的开发环境。
5. pwa- 基于webpack模板，vue cli的pwa模板
6. simple-一个最简单的单页应用模板。

二. @vue/cli (3/4).x使用

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

1. @vue/cli安装

$ npm install -g @vue/cli
# OR
$ yarn global add @vue/cli
$ vue --version

2. 创建项目

$ vue create hello-world
$ cd hello-world
$ npm run serve

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