最近公司web项目要使用Vue框架重构，对Vue不是很了解的可以戳这里查看。在此记录下环境的搭建，以后换电脑了可以方便配置~
官方文档展示了安装使用Vue框架的三种方式
方式一：直接 <script>引入
方式二：NPM
方式三：命令行工具 (CLI)
今天主要说一下方法三：命令行工具 (CLI)的使用环境搭建，比较推崇，更倾向于我们实际的开发。
第一步： 安装Node.js
点这里下载,对应自己电脑系统下载相应版本，下载成功之后按照步骤安装即可。
安装成功之后，打开终端输入相应的命令行查看状态
Node.js：Javascript运行环境(runtime), 不同系统之间不能直接运行各种编程语言，Runtime类似于各种国际会议上的 同声传译。
npm: Nodejs下的包管理工具，类似于Mac下的 Homebrew。
第二步：对于国内用户，建议将 npm 的注册表源设置为国内的镜像，可以大幅提升安装速度。（如果有vpn，也可以忽略该步骤）
在终端输入如下指令：
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
此时就成功改成了npm淘宝镜像，安装模板的时候 直接 cnpm isntall 模板名 即可。
或者:
(在React Native网站上说不要使用cnpm！cnpm安装的模块路径比较奇怪，packager不能正常识别！)
$ npm config set registry https://registry.npm.taobao.org --global
$ npm config set disturl https://npm.taobao.org/dist --global
此时就成功改成了npm淘宝镜像，安装模板的时候和之前一样, 直接 npm isntall 模板名 即可。
第三步：全局安装 vue-cli
在桌面创建一个文件夹，cd到该文件夹，装一下vue-cli脚手架。(只要安装的vue-cli 用 -g 修饰了,既是全局的,此时创不创建文件夹都不影响使用)
(因为我安装了cnpm镜像，所以此处使用cnpm安装，速度快)
# 全局安装 vue-cli
$ cnpm install --global vue-cli
安装完之后，执行vue -V
显示出了vue的版本，表示已经安装成功了。
vue-cli：快速构建单页应用的脚手架。
第四步： 创建一个基于 webpack 模板的新项目
终端执行下面指令：
$ vue init webpack 项目文件名
项目配置我暂时都设为No，以后用到了再安装相应的模板也不迟。
第五步：cd到项目目录下，安装模板，运行项目
$ cd vuedemo
$ npm install
$ npm run dev
(有大佬建议说不要从国内镜像cnpm安装(会导致后面缺了很多依赖库))
依次执行完上面的指令之后项目就运行起来了,如下图：
提示：
如果在运行时出现
“Module build failed: Error: Cannot find module '模块名' ”错误时，
说明缺少对应的模板，
那就安装
cnpm install 模块名 --save-dev(关于环境的，表现为npm run dev 启动不了)
cnpm install 模块名 --save(关于项目的，比如main.js，表现为npm run dev 成功之后控制台报错)
比如escape-string-regexp、strip-ansi、has-ansi、is-finite、emojis-list
具体的可参考该文章.
千里之行，始于足下~
网友评论