go on

Advanced/docs/jies.md

@@ -0,0 +1,87 @@
+```
+.
+|-- config                           // 项目开发环境配置
+|   |-- index.js                     // 项目打包部署配置
+|-- src                              // 源码目录
+|   |-- components                   // 公共组件
+|       |-- header.vue               // 页面头部公共组件
+|       |-- index.js                 // 加载各种公共组件
+|   |-- config                       // 路由配置和程序的基本信息配置
+|       |-- routes.js                // 配置页面路由
+|   |-- css                          // 各种css文件
+|       |-- common.css               // 全局通用css文件
+|   |-- iconfont                     // 各种字体图标
+|   |-- images                       // 公共图片
+|   |-- less                         // 各种less文件
+|       |-- common.less              // 全局通用less文件
+|   |-- pages                        // 页面组件
+|       |-- home                     // 个人中心
+|       |-- index                    // 网站首页
+|       |-- login                    // 登录
+|       |-- signout                  // 退出
+|   |-- store                        // vuex的状态管理
+|       |-- index.js                 // 加载各种store模块
+|       |-- user.js                  // 用户store
+|   |-- template                     // 各种html文件
+|       |-- index.html               // 程序入口html文件
+|   |-- util                         // 公共的js方法，vue的mixin混合
+|   |-- app.vue                      // 页面入口文件
+|   |-- main.js                      // 程序入口文件，加载各种公共组件
+|-- .babelrc                         // ES6语法编译配置
+|-- gulpfile.js                      // 启动，打包，部署，自动化构建
+|-- webpack.config.js                // 程序打包配置
+|-- server.js                        // 代理服务器配置
+|-- README.md                        // 项目说明
+|-- package.json                     // 配置项目相关信息，通过执行 npm init 命令创建
+.
+```
+
+### 开发环境依赖模块说明
+
+#### webpack相关模块
+
+```
+webpack                               // 用来构建打包程序
+webpack-dev-server                    // 开发环境下，设置代理服务器
+html-webpack-plugin                   // html 文件编译
+url-loader                            // 图片  转化成base64格式，不需要
+file-loader                           // 字体  将字体文件打包，不需要
+css-loader                            // css  生成
+
+less                                  // css  预处理器less
+less-loader                           // css  预处理器less的webpack插件
+
+style-loader                          // css  插入到style标签
+autoprefixer-loader                   // css  浏览器兼容性问题处理
+babel-core                            // ES6  代码转换器
+babel-loader                          // ES6  代码转换器，webpack插件
+babel-plugin-transform-object-assign  // ES6  Object.assign方法做兼容处理
+babel-preset-es2015                   // ES6  代码编译成现在浏览器支持的ES5
+babel-preset-stage-0                  // ES6  ES7要使用的语法阶段
+vue-loader                            // vue  组件编译
+babel-helper-vue-jsx-merge-props      // vue  jsx语法编译
+babel-plugin-syntax-jsx               // vue  jsx语法编译
+babel-plugin-transform-vue-jsx        // vue  jsx语法编译
+```
+
+#### gulp相关模块
+
+```
+gulp                                  // 用来构建自动化工作流
+gulp-sftp                             // 将代码自动部署到服务器上
+del                                   // 代码部署成功后，删除本地编译的代码
+```
+
+#### 其他模块
+
+```
+cross-env                             // 解决跨平台设置NODE_ENV的问题
+```
+
+#### vue全家桶
+
+```
+vue                                   // 构建用户界面的
+vue-router                            // 路由
+vuex                                  // 组件状态管理
+```

Advanced/docs/项目介绍.md

@@ -0,0 +1,71 @@
+
+### 2.安装全局模块
+
+#### webpack
+
+```
+npm install -g webpack
+npm install -g gulp
+npm install -g vue-cli
+```
+
+webpack是一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理
+
+gulp是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务
+
+### 3.创建项目
+
+```
+vue init webpack-simple vuedemo02
+npm install --save-dev gulp gulp-sftp del sass-loader node-sass shelljs ora
+npm install --save vue vue-router vuex
+```
+
+### 5.搭建开发环境
+
+- [config/index.js](../config/index.js)       配置项目开发时的信息
+- [webpack.config.js](../webpack.config.js)   webpack打包配置
+- [.babelrc](../.babelrc)                     ES6编译配置
+- [server.js](../server.js)                   设置代理服务器
+- [gulpfile.js](../gulpfile.js)               自动化打包，编译，压缩，部署服务器
+- [package.json](../package.json)             执行npm init 初始化项目，自定义命令，启动程序，自动部署
+
+### 6.测试编译
+
+#### src/template/index.html
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8">
+	<title>vue2-demo</title>
+</head>
+
+<body>
+</body>
+
+</html>
+```
+
+#### src/main.js
+
+```javascript
+alert('test')
+```
+
+```
+1.运行程序执行命令：npm run dev
+2.然后打开网址：http://localhost:3000/app/
+3.如果浏览器弹出test，说明我们的开发环境已经搭建通过。
+```
+
+#### package.json自定义命令说明
+
+```
+npm run dev      开发环境
+npm run dev:test 将代码打包到测试服务器
+npm run dev:dist 将代码打包到正式服务器
+```
+

Advanced/vuedemo02/README.md

@@ -14,5 +14,3 @@ npm run dev
 # build for production with minification
 npm run build
 ```
-
-For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).

Advanced/vuedemo02/build/build.js

@@ -0,0 +1,32 @@
+// shelljs 执行 rm/cp/mkdir 等文件命令操作
+require('shelljs/global')
+
+var env = process.env.NODE_ENV
+var path = require('path')
+var config = require('../config')
+var webpack = require('webpack')
+var webpackConfig = require('./prod.conf.js')
+
+// 主要用来实现node.js命令行环境的loading效果，和显示各种状态的图标等
+var ora = require('ora')
+var spinner = ora('building for production...')
+spinner.start()
+
+//1、 把static资源 cp 到 dist/static 中。
+var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory)
+rm('-rf', assetsPath)
+mkdir('-p', assetsPath)
+cp('-R', 'static/*', assetsPath)
+
+//2、 src 打包到 dist
+webpack(webpackConfig, function(err, stats) {
+    spinner.stop()
+    if (err) throw err
+    process.stdout.write(stats.toString({
+        colors: true,
+        modules: false,
+        children: false,
+        chunks: false,
+        chunkModules: false
+    }) + '\n')
+})

Advanced/vuedemo02/build/dev.conf.js

@@ -1,4 +1,5 @@
+
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
   DEBUG_MODE: true // this overrides the DEBUG_MODE value of prod.env
-})
+})

Advanced/vuedemo02/build/prod.conf.js

@@ -1,5 +1,7 @@
-module.exports = {
-  NODE_ENV: '"production"',
-  DEBUG_MODE: false,
-  API_KEY: '"..."' // this is shared between all environments
-}
+var path = require('path')
+var config = require('../config')
+
+var env = config.build.env    //生产环境:production
+var webpackConfig = {}
+
+module.exports = webpackConfig

Advanced/vuedemo02/config/index.js

@@ -3,29 +3,29 @@
 const path = require('path')
 
 module.exports = {
-  dev: {
-    / Paths
-    assetsSubDirectory: 'static',
-    assetsPublicPath: '/',
-    proxyTable: {},
+	dev: { // npm run dev 配置参数
+		// Paths
+		assetsSubDirectory: 'static',
+		assetsPublicPath: '/',
+		proxyTable: {},
 
-    // Various Dev Server settings
-    host: 'localhost',
-    port: 8080, 
+		// Various Dev Server settings
+		host: 'localhost',
+		port: 8080,
+	},
+	build: {
+		env: {
+			NODE_ENV: '"production"'
+		},
+		productionSourceMap: false,
+		productionGzip: false,
 
-    // skipping other options as they are only convenience features
-  },
-  build: {
-    // Template for index.html
-    index: path.resolve(__dirname, '../dist/index.html'),
+		// Template for index.html
+		index: path.resolve(__dirname, '../dist/index.html'),
 
-    // Paths
-    assetsRoot: path.resolve(__dirname, '../dist'),
-    assetsSubDirectory: 'static',
-    assetsPublicPath: '/',
-
-    productionSourceMap: true,
-
-    // skipping the rest ...
-  },
-}
+		// Paths
+		assetsRoot: path.resolve(__dirname, '../dist'),
+		assetsSubDirectory: 'static',
+		assetsPublicPath: '/',
+	},
+}

Advanced/vuedemo02/package.json

@@ -7,7 +7,8 @@
   "private": true,
   "scripts": {
     "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
-    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
+    "build1": "cross-env NODE_ENV=production webpack --progress --hide-modules",
+		"build" : "cross-env NODE_ENV=production node build/build.js"
   },
   "dependencies": {
     "vue": "^2.5.11",
@@ -32,6 +33,9 @@
     "vue-loader": "^13.0.5",
     "vue-template-compiler": "^2.4.4",
     "webpack": "^3.6.0",
-    "webpack-dev-server": "^2.9.1"
+    "webpack-dev-server": "^2.9.1",
+		"html-webpack-plugin": "^2.24.0",
+		"shelljs": "^0.7.4",
+		"ora": "^0.3.0"
   }
 }

Advanced/vuedemo02/webpack.config.js

@@ -1,6 +1,8 @@
 var path = require('path')
 var webpack = require('webpack')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
 
+var plugins = []
 module.exports = {
   entry: './src/main.js',
   output: {