Vue脚手架安装

vue-cli（为单⻚⾯应⽤ (SPA) 快速搭建繁杂的脚⼿架）在实际开发中，有时为了加快开发进度，借助vue-cli是一个不错的选择。

官网：Vue CLI

安装过程

因为vue-cli在配置过程中，需要安装npm（npm是Node JS的包管理工具，可以下载并使用公共仓库的开发包，类似于maven）

而npm需要nodeJS（Node.js是运行在服务器的 JavaScript）的支持。

所以需要先安装Node JS。下载地址：下载 | Node.js 中文网 。

 

安装过程比较简单，基本上一路下一步。并且新版本的node已集成了npm，所以无需单独安装npm。

校验NODE

在cmd回车后，输入以下2个命令，能看到版本信息，表示OK。

配置淘宝源

为了能让npm在线下载更为顺畅，配置一个国内镜像源，这里选择淘宝源。输入命令回车即可。若回车后提示不识别npm，请重启电脑。

npm install -g cnpm --registry=https://registry.npm.taobao.org

 

校验淘宝源

淘宝源安装完毕后，输入命令，若能看到下图蓝框信息表示OK。若需要更多镜像请参考：

npmmirror 镜像站

cnpm -v

安装vue-cli

如下命令，只需要在cmd窗口中执行一次即可，无需重复执行。

cnpm install -g @vue/cli
cnpm install -g @vue/cli-init

创建vue工程

在cmd窗口中执行 创建工程的命令，工程名随意，默认工程会创建到windows用户目录中，创建完毕后，可以剪切到任意路径。也可以事先在cmd窗口中自行指定工程路径。此处将工程创建到了window桌面路径。

vue create my-project（my-project是项目名）

 

回车后，输入 y 选择淘宝源，然后再次回车  

 在下一步中，默认选择vue2.x版本即可（目前该版本使用量较大），默认使用该版本。直接回车。

接着开始工程的在线下载安装过程  

安装成功会显示下图

 

根据提示在cmd窗口中，进入工程cd my-project ，然后启动工程，启动命令是：npm run serve 。启动成后会看到浏览器访问地址

 

访问工程