前端进阶之Vue环境搭建及基本配置

1、 node官网[ http://nodejs.cn/download/ ]，根据不同系统选择不同版本，下载之后进行安装，node -v查看node版本

image.png

• node环境变量（任意目录下都能找到命令）配置
  1、找到node安装所在位置

  
  image.png
  

  2、复制路径到系统变量里面；路径

  
  image.png

2、 由于npm是国外的站点，所以我们要使用淘宝镜像npm install -g cnpm --registry=https://registry.npm.taobao.org

3、 使用node运行js结果

image.png
image.png

4、 安装webpack，打开命令行工具输入：npm install webpack -g，安装完成之后输入 webpack -v，如下图，如果出现相应的版本号，则说明安装成功。

image.png
5、 安装vue-cli脚手架构建工具，打开命令行工具输入：npm install vue-cli -g，安装完成之后输入 vue -V（注意这里是大写的“V”），如下图，如果出现相应的版本号，则说明安装成功。
image.png
6、构建项目vue init webpack-simple 项目名称

7、cd 进去
8、安装项目依赖：npm install，因为自动构建过程中已存在package.json文件，所以这里直接安装依赖就行。
9、各个文件注释

image.png
10、npm run dev 项目就跑起来了
image.png