一 安装node.js

1、Node.js简介
简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。Node.js 的包管理器 npm，是全球最大的开源库生态系统。
2、下载Node.js
打开官网下载链接:https://nodejs.org/en/download/ 我这里下载的是node-v6.9.2-x64.msi,如下图：

开始安装

1、下载完成后，双击“node-v6.9.2-x64.msi”，开始安装Node.js 

点击【Next】按钮 

勾选复选框，点击【Next】按钮 

修改好目录后，点击【Next】按钮 

安装完后点击【Finish】按钮完成安装 

至此Node.js已经安装完成，可以先进行下简单的测试安装是否成功了，后面还要进行环境配置
在键盘按下【win+R】键，输入cmd，然后回车，打开cmd窗口

安装完后的目录如下图所示:

此处说明下：新版的Node.js已自带npm，安装Node.js时会一起安装，npm的作用就是对Node.js依赖的包进行管理，也可以理解为用来安装/卸载Node.js需要装的东西

环境配置

说明：这里的环境配置主要配置的是npm安装的全局模块所在的路径，以及缓存cache的路径，之所以要配置，是因为以后在执行类似：npm install express [-g] （后面的可选参数-g，g代表global全局安装的意思）的安装语句时，会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中，占C盘空间。
例如：我希望将全模块所在路径和缓存路径放在我node.js安装的文件夹中，则在我安装的文件夹【D:\Develop\nodejs】下创建两个文件夹【node_global】及【node_cache】如下图：

创建完两个空文件夹之后，打开cmd命令窗口，输入

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

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

接下来设置环境变量，关闭cmd窗口，“我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”

进入环境变量对话框，在【系统变量】下新建【NODE_PATH】，输入【D:\Develop\nodejs\node_global\node_modules】，将【用户变量】下的【Path】修改为【D:\Develop\nodejs\node_global】

测试

配置完后，安装个module测试下，我们就安装最常用的express模块，打开cmd窗口，
输入如下命令进行模块的全局安装：

npm install express -g #     -g是全局安装的意思

安装cnpm（npm为国外镜像，速度可能会很慢）

    由于有些npm有些资源被屏蔽或者是国外资源的原因，经常会导致用npm安装依赖包的时候失败，
所以还需要npm的国内镜像—cnpm。
    在命令行中输入 npm install -g cnpm –registry=http://registry.npm.taobao.org 。

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

    在命令行中运行命令 npm install -g vue-cli ，然后等待安装完成。

三 用vue-cli构建项目

    在你的workspace中进入命令行。(不建议在桌面，建议在workspace中)
在命令行中运行命令 vue init webpack firstVue 。解释一下这个命令，这个命令的意思是初始化一个项目
    其中webpack是构建工具，也就是整个项目是基于webpack的。
    其中firstVue是整个项目文件夹的名称，这个文件夹会自动生成在你指定的目录中，如下图：

运行初始化命令的时候回让用户输入几个基本的选项，如项目名称，描述，作者等信息

列表如下
(1)? Project name (VueTest002)：项目名称name can no longer contain capital letters（不能大写）
(2)? Project description (A Vue.js project) vue-cli新建项目(项目描述)；
(3)? Author (xhdx <zhuming3834@sina.com>) ；zhuming3834@sina.com(项目作者)；
(4)? Vue build
❯ Runtime + Compiler: recommended for most users
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY 
allowed in .vue files - render functions are required elsewhere
这里选择Runtime + Compiler: recommended for most users；
(5)? Install vue-router? (Y/n) y 是否使用vue-router，这里根据需求选择；
(6)? Use ESLint to lint your code? (Y/n) y 是否使用ESLint，这里根据需求选择；
(7)? Pick an ESLint preset (Use arrow keys)
❯ Standard (https://github.com/feross/standard)
Airbnb (https://github.com/airbnb/javascript) none (configure it yourself) 
这里选择	Standard(https://github.com/feross/standard)
(8)? Setup unit tests with Karma + Mocha? (Y/n) n 是否需要单元测试，这里根据需求选择；
(9)Setup e2e tests with Nightwatch? (Y/n) n是否需要单元测试，这里根据需求选择；
(10) Should we run `npm install` for you after the project has been created? 
(recommended) (Use arrow keys)
创建项目后需要需要安装项目所需要的依赖，这里选择no，本步骤作为步骤6说明

四 安装依赖    

使用npm安装依赖

安装依赖包，首先cd到项目文件夹（firstVue文件夹），然后运行命令 cnpm install ，等待安装
    安装完成之后，会在我们的项目目录firstVue文件夹中多出一个node_modules文件夹，这里边就是我们项目需要的依赖包资源

使用yarn安装依赖

//安装yarn
npm install -g yarn
//切换镜像
yarn config set registry https://registry.npm.taobao.org
//查看yarn配置
yarn config list
//安装依赖
yarn


//yarn常用命令
npm init === yarn init

npm install === yarn 或者 yarn install

npm install taco --save === yarn add taco

npm uninstall taco --save === yarn remove taco

npm install taco --save-dev === yarn add taco --dev

npm update --save === yarn upgrade

npm install taco@latest --save === yarn add taco

npm install taco --global === yarn global add taco

npm init --yes/-y === yarn init --yes/-y

npm link === yarn link

npm outdated === yarn outdated

npm publish === yarn publish

npm run === yarn run

npm cache clean === yarn cache clean

npm login === yarn login

npm test === yarn test

五 运行项目

    安装完依赖包之后，就可以运行整个项目了。
    在项目目录中，运行命令 npm run dev （或 yarn run dev），会用热加载的方式运行我们的应用，热加载可以让我们在修改完
代码后不用手动刷新浏览器就能实时看到修改后的效果。
    这里简单介绍下 npm run dev 命令，其中的“run”对应的是package.json文件中，scripts字段中的dev，
也就是 node build/dev-server.js命令的一个快捷方式。

会出现以下提示，按提示进行后，在执行 npm run dev

 

项目运行成功后，浏览器会自动打开localhost:8080（如果浏览器没有自动打开，可以手动输入）。运行成功后，会看到如下所示的界面。

   

五 集成element

1、在cmd命令行进入到项目根目录输入cnpm i element-ui -S
2、安装完成之后，package.json文件会增加element-ui依赖

 六 创建vue 

执行 vue create app

 根据提示执行

cd app

yarn serve

 浏览器输入local地址

注：vue create、vue webpack init 创建vue项目产生的项目文件区别说明

1.用法：vue init webpack app
2.产生目录及说明
build及config：webpack配置相关
src：项目源码
static：存放静态资源
.babelrc：babel相关配置（因为我们的代码大多都是    ES6，而大多浏览器是不支持ES6的，所以我们需要babel帮我们转换成ES5语法）
.editorconfig：编辑器的配置，可以在这里修改编码、缩进等
.eslintignore：设置忽略语法检查的目录文件
.eslintrc.js：eslint的配置文件
.gitignore：git忽略里面设定的这些文件的提交
index.html：入口html文件
package.json：项目的配置文件，用于描述一个项目，包括我们init时的设置、开发环境、生成环境的依赖插件及版本等。
package-lock.json：普通package.json文件“^2.0”这样写的，意味着版本可以大于等于2.0，如此就会出现各种错误。

    1.使用vue create图形化界面创建
    2.产生目录及说明
	node_modules:通过npm install安装的依赖代码库
	public:部署到生产环境的目录
	src:源码
	.gitignore：git忽略里面设定的这些文件的提交
	babel.config.js:babel转码配置
	package.json：项目的配置文件，用于描述一个项目，包括我们init时的设置、开发环境、生成环境的
	依赖插件及版本等。

 至此结束，欢迎大家的阅览