- A+
一、node.js安装以及环境配置
1、下载vue.js
-
下载地址：
2、安装node.js
-
下载完成后，双击安装包开始安装。安装地址最好换成自己指定的地址。
-
这一步根据自己的需要进行选择，我这里就选的是第一个。网上有些教程说要选中第4个，我这里是要后期需要更换全局模块所在的路径，以及缓存cache的路径的，所以在后期需要自己重新配置环境变量。
-
这一步我没选，直接进行下一步，一直下一步，剩下的都是安装了。
-
安装完成之后，node启动程序会自动添加到系统环境变量path中，这里可自行去查看。
3、检查node程序是否安装成功
-
打开cmd窗口输入node -v 和 npm -v查看node版本和npm版本。如果版本号都能出来，代表安装成功了
-
在默认下载全局包时，这个包的路径是放在我c盘下面的，大家可以输入指令 npm root -g 进行查看，我这里已经更换了目录，所以不在c盘。接下里就来教大家如何更改
4、更改默认路径
-
这里主要是配置的是npm安装的全局模块所在的路径，以及缓存cache的路径。因为以后在执行类似：npm install express [-g] 的安装语句时，会将安装的模块安装到C盘的路径中，占用C盘空间，所以才进行的配置，如果C盘容量足够，可省略这一步，不影响node使用。
-
打开自己刚刚安装的node目录
-
在目录下新建两个文件夹【node_global】和【node_cache 】文件夹
-
-
再次再次打开cmd命令窗口，输入npm config set prefix “你的路径node_global”（
你的路径”默认安装的情况下为 C:Program Filesnodejs） -
npm config set cache “你的路径node_cache” 可直接复制刚刚新建的空文件夹目录
-
这里记住了两次的命令是不一样的一个是 set prefix 一个是 sex cache ，大家不要为了省事两次都直接复制粘贴成同一个了
5、添加环境变量
-
点击下面系统变量里的新建按钮，添加变量名和变量值然后点击确定
-
“变量名”栏填写：NODE_PATH（要大写，HOME前有下划线）
-
“变量值”栏填写：D:nodejsnode_globalnode_modules （node的安装地址）
-
-
找到系统变量中的Path然后点击编辑，新建两个变量，然后确定。第一个是node_global文件夹目录，第二是node安装目录
5、测试安装是否成功
-
根据步骤3：打开cmd输入node -v 和 npm -v 查看是否有版本号出现。以及输入命令： npm root -g 查看全局模块的默认路径是否已经改变。这里不过多的介绍了。
二、安装vue-cli脚手架
1、检查node环境是否安装好，打开cmd输入node -v 和 npm -v，如果能出现版本号，说明安装成功，安装成功才能进行下一步。
2、更改淘宝镜像下定制的cnpm (gzip 压缩支持) 命令行工具代替默认的 npm。打开cmd输入如下命令：
npm install -g cnpm --registry=https://registry.npm.taobao.org
-
如果安装失败，可以使用命令 ：npm cache clean --force 强制执行清理缓存，然后再重新安装。
-
安装完成之后打开cmd 输入cnpm -v 查看是否安装成功，如果出现版本号代表安装成功
3、开始安装vue-cli
-
打开cmd输入如下指令安装vue-cli
cnpm install -g vue-cli
-
最新的vue项目模块中，都带有webpack插件，所以这里就可以不安装webpack插件。安装完成后，可以使用 vue -V（注意V大写）查看是否安装成功
-
如果出现版本号，则代表安装成功，如果提示“无法识别 vue”，可以是npm版本过低，可以使用 npm install -g npm 来更新版本
4、生成项目
-
首先需要再命令行中进入到项目目录，然后输入：
vue init webpack demo1
-
其中webpack是面板名称，demo1是自定义项目名称，命令执行之后，会在当前目录生成以该名称命名的项目文件夹。配置完成后，可以看到目录下多出了一个项目文件夹，里面就是 vue-cli 创建的一个基于 webpack 的 vue.js 项目
-
然后进入项目目录（cd Vue-Project），使用 cnpm 安装依赖(注意要在有package.json 的目标下运行)
cnpm install
-
然后启动项目（直接访问端口号进入测试demo1）
npm run dev
-
然后打开浏览器进入 localhost:8080，如果出现页面则项目启动成功。如果没有加载出页面，可能是本地8080端口被占用，需要修改一下配置文件 config>index.js
5、打包上线
-
自己的项目文件都需要放在src文件夹下，项目开发完成之后可以输入如下命令来进行打包工作。
npm run build
-
打包完成后，会生成 dist 文件夹，如果已经修改了文件路径，可以打开本地文件查看，项目上线时，只需要将 dist 文件夹放到服务器就行了。
