Vue-cli使用——快速搭建一个Vue的可运行环境

Vue-cli安装

简介

Vue-Cli即为Vue的脚手架，安装完成后，可以通过命令来快速的生成一个可运行的Vue开发环境，能够省略繁琐的webpack配置和各种插件的安装等，方便快速搭建一个可执行的环境，便于简单项目的初始搭建和学习Vue。

注意：这里所使用的脚手架版本较新，所需的Node.js的版本也相对较高，如果不想卸载原本的Node.js版本，解决方法下文有说。

安装步骤

1. 如果没有安装Node.js则需要先安装Node.js（https://nodejs.org/zh-cn/
   选择当前发布版本即可），如果已经安装了Node.js，则通过在cmd中执行node -v查看当前安装版本。我们要求安装Node.js
   V8.9以上的，不必卸载重装，直接装两个Node版本即可，解决方案如下：

1.安装node.js管理工具nvm for windows
包地址为：https://github.com/coreybutler/nvm-windows/releases，选择nvm-setup.zip下载即可。
2.安装教程：https://www.cnblogs.com/gaozejie/p/10689742.html ，注意选择的安装路径最好不要有中文和空格。
3.安装完nvm后，可以通过以下几个命令来完成对node的版本切换：
nvm list //查看本地安装的所有版本
nvm install //安装相关版本的node.js
nvm use 11.12.0 //切换当前node版本到11.13.0
nvm uninstall 11.12.0 //卸载版本号为11.12.0的Node.js

2. 安装完Node.js后，我们一般是通过Node.js自带的npm来管理相关的依赖包，但是npm的仓库地址在国外，为了方便下载包，安装淘宝镜像。cmd中执行命令：

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm -v //判断是否安装成功

3. 执行命令安装Vue-cli

npm install -g @vue/cli
vue --version //检验安装是否成功

安装成功的检验结果如下：

快速原型开发

适合对单个*.vue文件进行快速开发。不过需要安装一个全局依赖。
cnpm install -g @vue/cli-service-global

安装完成后，可以快速的创建一个.vue文件，默认的话是main.js、index.js、App.vue 或 app.vue 中的一个。你也可以显式地指定入口文件，比如 AAA.vue，然后通过下面的方式来启动并在浏览器中显示。

vue serve AAA.vue

搭建一个简单的项目

通过执行以下命令可以快速创建一个简单的项目，包括生成对应的依赖配置（ Babel + ESLint），这些默认的设置非常适合快速创建一个新项目的原型。

vue create hello-world

同时也支持使用ui界面的方式来创建一个项目。

vue ui

Vue-cli官方地址