Node环境搭建

1.下载安装nodejs
https://nodejs.org/en/
下载完成后，下一步-->下一步-->安装完成

验证node是否安装成功:
打开命令行(windows)或终端(mac),在命令行(终端)中输入：
node -v 如果提示出版本信息则说明node安装成功
npm -v 如果提示出版本信息则说明npm安装成功

2.安装淘宝镜像
在终端输入：
sudo npm install -g cnpm --registry=https://registry.npm.taobao.org
根据提示输入密码，等待安装成功

验证淘宝镜像是否安装成功：
在终端输入cnpm -v 如果提示出版本信息则说明cnpm淘宝镜像安装成功

cnpm安装成功后，以后npm install 命令用cnpm install代替

3.安装vue脚手架：vue-cli
在终端中输入命令：
sudo cnpm install vue-cli -g
(-g全局安装，全局安装即就将当前的工具安装在了node的安装目录下)

验证vue-cli是否安装成功:
在终端输入vue -V 如果提示出版本信息则说明vue-cli安装成功

4.拉取项目模版
新建一个存放项目的文件夹(如：Vue_Code7)，在该文件夹下打开终端

通过下面的简单的Linux命令进入到指定的文件夹：
ls 列出当前所在目录下的所有文件及文件夹
cd xxx 进入到当前目录下的指定的文件夹
cd ../ 返回上一级目录

在指定文件夹下打开终端后，在终端中输入：
sudo vue init webpack my-project
(webpack是官方模版，
my-project是自定义的项目名称)

5、下载安装项目依赖
如果在拉取模版时没有下载安装依赖，则需要执行如下操作
1）进入项目所在的项目文件夹 
cd my-project
2）通过下面的命令安装依赖：
sudo cnpm install

6、运行项目
在项目文件夹下打开终端,运行下面的命令
npm run dev

7.分析项目目录
build 开发及发布环境的配置文件
config 打包及运行的目录的配置文件
node_modules 存放是项目依赖的工具及库文件
src 源代码
static 用于存放静态资源
test 用于存放测试代码的文件
.babelrc babel的配置文件
index.html 项目的主页面
package.json 基于node的项目包配置文件
//配置npm run要执行的命令
"scripts": { 
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",//运行项目的命令
"start": "npm run dev", 
"unit": "jest --config test/unit/jest.conf.js --coverage",//执行单元测试的命令
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"build": "node build/build.js" //执行项目打包的命令
},
//项目运行是所依赖的库文件,如果要下载自己的库文件，则通过 npm install lib@version --save
"dependencies": {
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
//项目开发时所要用到的工具,如果要下载自己的工具，则通过 npm install tool@version --save-dev
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-jest": "^21.0.2",
}
README.md 项目的说明书

8.项目运行的流程
第一步：执行npm run dev,
即执行 webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

第二步：使用webpack工具根据build/webpack.dev.conf.js配置文件将项目打包到内存中
webpack根据配置文件加载所配置loader对入口文件及其所引用到的文件进行编译，
编译完成后webpack根据入口出口配置，将所有用到的文件打包到出口文件(app.js)
在利用所配置的插件(HtmlWebpackPlugin)将出口文件自动插入到项目中的index.html
最后在项目目录下启动devServer服务器

第三步：服务启动后，自动打开项目下的index.html文件，用浏览器执行起来

9.模块化开发规范：
ES6之前，社区提出了两种模块化开发标准：
每一个模块都是独立的,一个模块需要用到另一个模块中的方法或变量时,需要在该模块中导入对应的方法或变量才能使用
AMD:将所依赖的模块提前加载，依赖前置，遵循AMD规范的模块化加载器有:requirejs
CMD:就近依赖，延迟加载,遵循CMD规范的模块化加载有:common.js,sea.js

ES6的模块化方法完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案