版权声明：宅小叔出品 https://blog.csdn.net/u010744834/article/details/89924098

Vue2.0搭建Vue脚手架（vue-cli）及nodejs环境安装

Vue2.0搭建Vue脚手架（vue-cli）及nodejs环境安装

随着vue.js越来越火爆，更多的项目都用到vue进行开发，在实际的开发项目中如何搭建开发脚手架呢，今天跟大家分享一下：
首先需要了解的知识
Html
Css
Javascript
Node.js 环境（npm包管理工具）
Webpack 自动化构建工具

安装node.js

1.前往node.js官网下载并安装工具，这里安装路径选到D盘，E:\Program Files\nodejs

安装完毕在命令行输入以下命令测试是否安装成功，正确会出现版本号

// 在命令行输入
npm -v

如下图

2.改变原有的环境变量，

1，我们要先配置npm的全局模块的存放路径以及cache的路径，例如我希望将以上两个文件夹放在NodeJS的主目录下，便在NodeJs下建立"node_global"及"node_cache"两个文件夹，输入以下命令改变npm配置

npm config set prefix "E:\Program Files\nodejs\node_global"
npm config set cache "E:\Program Files\nodejs\node_cache"

2,在系统环境变量添加系统变量NODE_PATH，输入路径E:\Program Files\nodejs\node_global\node_modules，此后所安装的模块都会安装到改路径下

3,在命令行输入以下命令试着安装express（注：“-g”这个参数意思是装到global目录下，也就是上面说设置的“E:\Program Files\nodejs\node_global”里面。）

npm install express -g

安装完毕后可以看到.\node_global\node_modules\express 已经有内容

4,在命令行输入node进入编辑模式，输入以下代码测试是否能正常加载模块

require('express')

如果成功，可以看到有输出。假设出错，请检查NODE_PATH的路径。

安装 cnpm

1、说明：npm（node package manager）是nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）；
2、使用npm安装插件：命令提示符执行npm install
重要说明：npm install 安装软件，出现 operation not permitted, mkdir，请一定注意命令行工具运行权限，请尝试以管理员身份运行命令行工具
3、选装 cnpm 因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，如果npm的服务器在中国就好了，所以我们乐于分享的淘宝团队干了这事！来自官网：“这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。”;

安装：

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

输入cnpm -v，可以查看当前cnpm版本

//这里的v请注意大小写
cnpm -v

安装vue-cli脚手架构建工具

vue-cli 提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：
安装：$ cnpm install vue-cli –g //g表示全局安装
安装完成之后输入 vue -V（注意这里是大写的“V”），如下图，如果出现相应的版本号，则说明安装成功。

创建一个基于webpack模板的新项目

要创建项目，首先我们要选定目录，然后再命令行中把目录转到选定的目录。可以使用：

$ vue init webpack my-app
>// my-app为自定义项目名

运行初始化命令的时候回让用户输入几个基本的选项，如项目名称，描述，作者等信息，如果不想填直接回车默认就好
Project name (my-app) # 项目名称（我的项目）
Project description (A Vue.js project) # 项目描述一个Vue.js 项目
Author 作者（你的名字）
Install vue-router? (Y/n) # 是否安装Vue路由，也就是以后是spa（但页面应用需要的模块）
Use ESLint to lint your code? (Y/n) # 使用 ESLint 到你的代码？ （Y [ yes ] / N [ no ]）
Pick an ESLint preset (Use arrow keys) # 选择一个预置ESLint（使用箭头键）
Setup unit tests with Karma + Mocha? (Y/n) # 设置单元测Karma + Mocha？ （Y/ N）
Setup e2e tests with Nightwatch? (Y/n) # 设置端到端测试，Nightwatch？ （Y/ N）
注：当然这些都看你自己个人的情况

运行项目 （进入到my-app目录下）

$ cnpm run dev
运行成功后，浏览器直接显示的是页面如下：

安装项目所需要的依赖

刚初始化的项目是没有依赖的，如果运行会报类似这样的错误，输入命令

$ cnpm install