vue 环境搭建配置

一、安装配置nodejs

下载地址：https://nodejs.org/en/

1. 安装vue依赖的nodejs环境

vue.js通过webpack打包,webpack基于npm, npm需要nodejs环境。因此vue.js也需要安装nodejs环境

nodejs是js的运行环境，类似Java的jvm。高版本的nodejs已集成npm（包管理器）

安装时，注意添加nodejs环境变量

比如下载安装nodejs到本地目录D:\nodejs

安装时注意选择add to path，自动添加到系统环境变量，减少环境配置

会自动配置npm环境在以下位置：D:\nodejs\node_modules\npm

否则需要手动配置node命令环境变量:path中添加：D:\nodejs

名词解释：

npm: Nodejs下的包管理器

webpack: 主要用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备， 比如资源的合并和打包

vue-cli: 用户生成Vue工程模板。（帮你快速开始一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库，只需要 npm install就可以安装）

2. 检查nodejs安装是否成功

echo %path% 可以查看系统环境变量

node -v 查看node版本

npm -v 查看npm版本，node自带的npm可能不是最新的版本，需要升级：

cd D:\nodejs

npm install npm

会自动创建以下设置目录

node_cache

node_global 全局模块

3. nodejs系统文件配置

若不配置，默认存放在系统盘

执行设置命令：

npm config set prefix "D:\nodejs\node_global"

npm config set cache "D:\nodejs\node_cache"

npm list -global

npm config set registry=http://registry.npm.taobao.org 配置镜像站,提升速度

npm config get registry 检查镜像站行不行命令

npm config list 查看所有配置信息 （配置信息存储在C:\Users\Administrator\.npmrc）

4. npm下载安装模块

npm install example_module -g 安装或更新模块example_module，装在global下，即D:\nodejs\node_global

二、安装配置vue

1. 安装vue模块

npm install vue -g

2. 安装vue路由模块

npm install vue-router -g

3. 安装vue脚手架（vue-cli工具内置了模板webpack）

npm install vue-cli -g

4. 配置vue环境变量

对path环境变量添加D:\nodejs\node_global

5. 查看vue版本号

vue -V (上面四步是有依赖关系的，须依次执行完后，才能查看vue版本号)

6. 创建初始化项目

切换到自定义的工作空间，

vue init webpack myproject

自动选择配置项，注意router选择yes，会省掉路由的配置

7. 项目构建打包

cd myproject

npm run dev （开发运行）// 运行后浏览器访问控制台输出的地址

npm run build（构建发布）// 编译后会生成dist静态资源文件，可以由vsftp上传服务器通过nginx代理服务器部署服务

8.安装vue浏览器调试工具：vue_devtools

下载后进入解压目录执行npm install编译后选择以下目录，从chrome安装插件：

D:\vue-devtools\shells\chrome