基于vue2.0搭建vue-cli脚手架

1.使用cnpm

通过npm下载node包管理器中的内容速度会非常慢，国内一般使用淘宝镜像cnpm代替，方法如下¹：

PS E:\vue-workspace> npm install -g cnpm --registry=https://registry.npm.taobao.org

或者

PS E:\vue-workspace> alias cnpm="npm --registry=https://registry.npm.taobao.org \
>> --cache=$HOME/.npm/.cache/cnpm \
>> --disturl=https://npm.taobao.org/dist \
>> --userconfig=$HOME/.cnpmrc"

实际上我们就是给“npm --registry=https://registry.npm.taobao.org \”创建了一个别名cnpm

2.安装vue-cli脚手架

PS E:\vue-workspace> cnpm install vue-cli -g

查看vue版本

PS E:\vue-workspace> vue -V
2.9.6

查看一下官方提供的模版

PS E:\vue-workspace> vue list

  Available official templates:

  ★  browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
  ★  browserify-simple - A simple Browserify + vueify setup for quick prototyping.
  ★  pwa - PWA template for vue-cli based on the webpack template
  ★  simple - The simplest possible Vue setup in a single HTML file
  ★  webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
  ★  webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.

我们这里采用比较基本的webpack来进行安装

PS E:\vue-workspace> vue init webpack test1

test1可自己定义名称
（1）项目名称（可选默认）
（2）项目描述（可选默认）
（3）项目作者（可选默认）
（4）Runtime+Compiler（确认）
（5）ESlink（代码检查工具，使用以后可能在代码书写过程中会报出很多离奇的错误，但是初学者建议选择使用，可帮助培养良好的代码习惯）
（6）unit test（单元测试工具，可根据实际情况确定是否安装）
（7）e2e test（也是一个测试工具，可根据实际情况确定是否安装）

# Project initialization finished!
# ========================

To get started:

  cd test1
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

出现上面的情况说明安装完毕了！

3.安装依赖

进入项目

PS E:\vue-workspace> cd test1

安装package.json中的依赖，这里给大家推荐一个网址http://package.json.is/，里面详述了package.json中所有配置项的含义

PS E:\vue-workspace\test1> cnpm install

安装完成后，项目中会多出一个node_modules的目录，里面包括了我们安装的所有依赖

4.启动项目

PS E:\vue-workspace\test1> npm run dev

这里说一下npm run XXX，不同的脚手架版本，XXX会不一样，之前有篇文章是基于vue-cli4.1版本安装vue-cli脚手架，启动方式为npm run serve，关键要看package.json中启动脚本对应的key值

PS E:\vue-workspace\test1> npm run dev

E:\vue-workspace\test1>doskey sayhello=echo Hello $*

E:\vue-workspace\test1>doskey cattxt=type xxxxxxxxxxxx.txt $*

> test1@1.0.0 dev E:\vue-workspace\test1
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 13% building modules 29/31 modules 2 active ...=0!E:\vue-workspace\test1\src\App.vue{ parser:
"babylon" } is deprecated; we now treat it as { parser: "babel" }.
 95% emitting

 DONE  Compiled successfully in 3619ms                                                 20:28:10
 I  Your application is running here: http://localhost:8081

若默认浏览器未自动打开测试页面，可按住Ctr，点击http://localhost:8081打开测试页面

5.生成部署文件

PS E:\vue-workspace\test1> npm run build

完成后项目中会多出一个dist目录，目录中保存着一些压缩后的文件，包括vue.js以及一些用于调试的map文件等

/========================================================/

至此，基于vue2.0使用cnpm安装vue-cli脚手架创建完成！

---

1. https://developer.aliyun.com/mirror/NPM?from=tnpm. ↩︎