一. 开发环境
1. 安装node.js
下载安装包，进行安装，默认npm也会一起安装
/download/
2. 配置环境变量
(1) 设置npm的全局模块的存放路径，缓存路径
npm config set prefix "D:\Software\nodejs\node_global"npm config set cache "D:\Software\nodejs\node_cache"
(2) 设置环境变量
NODE_PATH = "D:\Software\nodejs\node_global"Path = "D:\Software\nodejs\node_global"
3. 安装 cnpm
//安装cnpmnpm install -g cnpm --registry=https://registry.//配置淘宝镜像(不知道之前为啥不用这一操作，有时间再细究)npm config set registry https://registry.//查看淘宝镜像npm config get registry
4. 安装 vue-cli
cnpm install -g vue-cli
二. 开发流程
1. 创建项目
(1) 项目名全小写；
(2) 进入工作空间目录，执行以下：
vue init webpack 项目名
2. 运行项目
(1) 设置ip地址和端口号：修改 config / index.js：
module.exports = {dev: {...host: '0.0.0.0', port: 8080,
(2) 进入项目目录（后续所有cmd操作都在项目目录下），执行：
cnpm run dev
(3) 通过设置的ip和端口访问项目，如 http://10.1.32.96:8080
3. 兼容IE浏览器
(1) vue要求必须 IE9 及以上版本
(2) 进入项目目录，执行以下：
cnpm install --save-dev babel-polyfill
(3) 修改 build / webpack.base.conf.js
module.exports = {...entry: {...app: ["babel-polyfill", "./src/main.js"]},
(4) 在 src / main.js 中引入
import 'babel-polyfill'
4. 去除 Eslint 校验
(1) 修改 build / webpack.base.conf.js
module.exports = {...module: {rules: [...(config.dev.useEslint ? [] : []),
5. 配置后台服务环境
(1) 进入项目目录，执行以下：
cnpm install --save-dev cross-env
(2) 定义打包命令，修改 package.json
"scripts" : {..."build": "cross-env type=dev node build/build.js","build:dev": "cross-env type=dev node build/build.js","build:prod": "cross-env type=prod node build/build.js","build:test": "cross-env type=test node build/build.js",}
(3) 设置环境配置，修改 config/dev.env.js，config/pro.evn.js等文件
module.exports = merge(prodEnv, {NODE_ENV: '"development"',API_URL: '"http://xeyserver./alphakids/"'})
(4) 设置打包命令和环境配置文件的的映射，修改 build/webpack.prod.conf.js
const env = require('../config/'+ process.env.type +'.env')
(5) 设置打包时控制台提示语（非必要），修改 build/build.js
const spinner = ora('building for ' + process.env.type + ' mode ...')
(6) 代码中使用环境配置参数
window.config = {baseUrl : process.env.API_URL, //后台服务地址debug : (process.env.NODE_ENV=="development") //只有开发环境下开启debug模式};
6. 打包项目
(1) 设置资源引用路径，设置报错时不暴露源码：修改 config / index.js：
module.exports = {dev: {...},build: {...assetsPublicPath: './',productionSourceMap: false,
(2) 设置图片引用路径：修改 build / utils.js：
exports.cssLoaders = function (options) {...function generateLoaders(..) {...return ExtractTextPlugin.extract({use: loaders,fallback: 'vue-style-loader',publicPath : '../../'})}}
(3) 生成代码，在 dist 文件夹中生成 index.html 和 static 文件夹，保持在同一目录下， index.html 即为项目入口
cnpm run build
三. 开发插件
0. 插件引入方式
(1) npm方式，下载到本地，跟着项目一起打包
cnpm install 插件名 --save
(2) cdn方式，引用第三方链接 （/）
在index.html中引入
<link href="/animate.css/3.7.2/animate.min.css" rel="stylesheet"><script src="/vue/2.6.10/vue.min.js"></script>
修改 build/webpack.base.conf.js
module.exports = {...externals: {'vue': 'Vue','vue-router': 'VueRouter','vuex': 'Vuex','axios': 'axios','jquery': 'jQuery','animate': 'animate'}
注：element-ui设计到改主题色，cdn方式太麻烦，直接用npm方式。除此之外，其他插件可用cdn则用cdn，初次加载速度更快
1. Jquery
(1) 安装
cnpm install jquery --save
(2) 引入：修改 src / main.js
import jquery from 'jquery'window.$ = jquery;window.jQuery = jquery;
2. ElementUI
(1) 安装
cnpm install element-ui --save
(2) 重设主题颜色：新建 css / element-variables.scss 文件
/* 改变主题色变量 */$--color-primary: #3bb2b8;/* 改变 icon 字体路径变量，必需 */$--font-path: '~element-ui/lib/theme-chalk/fonts';@import "~element-ui/packages/theme-chalk/src/index";
(3) 引入：修改 src / main.js
import elementUI from 'element-ui'import './css/element-variables.scss'Vue.use(elementUI);
3. Axios
(1) 安装
cnpm install axios --save
(2) 配置统一请求拦截：新建 js / axios.js 文件
import axios from 'axios';axios.defaults.baseURL = "http://10.1.32.44/8023/";axios.defaults.timeout = 5000;axios.defaults.withCredentials = true; //携带cookie信息,保持session的一致性axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';//request 拦截器axios.interceptors.request.use(config => {...return config;},error => {...return Promise.reject("系统错误");});//response 拦截器axios.interceptors.response.use(response => {...return response.data;},error => {...return Promise.reject(系统错误);})window.axios = axios;
(3) 引入：修改 src / main.js
import './js/axios.js'
4. Vuex
(1) 安装
cnpm install vuex --save
(2) 配置 store：新建 store / index.js 和 store / moduleA.js 文件
import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);//引入分流模块import moduleA from "./moduleA.js";export default new Vuex.Store({state:{xx: "xx"},modules : {moduleA : moduleA }});
export default {state:{xx : "xx"}}
(3) 引入：修改 src / main.js
import store from './store/index.js'...new Vue({el: '#app',router,store,components: {App },template: '<App/>'})
5. scss 和 less
(1) 安装
npm install sass-loader --save-devnpm install node-sass --sava-devnpm install less less-loader --save-dev
6. vue-layer
(1) 安装
cnpm install vue-layer --save
(2) 引入：修改 src / main.js
import layer from 'vue-layer'window.layer = layer(Vue);
(3) 说明：功能没有原版layer强大，且elementUI本身提供的弹窗也很好用，因此项目中没用到
7. px2rem-loader
(1) 安装
npm install px2rem-loader --save -dev
(2) 配置：修改 build / utils.js
exports.cssLoaders = function (options) {...const px2remLoader = {loader: 'px2rem-loader',options: {remUnit: 100// 将代码中px转rem,转换比例:1rem=100px (不转换元素内嵌样式)}};function generateLoaders (loader, loaderOptions) {const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader]...}}
8. postcss-px2rem-exclude
(1) 说明：上面的px2rem-loader插件不能自定义过滤掉不转的文件夹
(2) 安装
npm install postcss-px2rem-exclude --save -dev
(3) 配置：修改 .postcssrc.js
module.exports = {"plugins": {..."postcss-px2rem-exclude": {"remUnit": 10,"exclude": /static/}}};
9. zepto
(1) 说明：移动端js框架，与Jquery类似
(2) 安装
cnpm install script-loader exports-loader --save -dev cnpm install zepto --save
(3) 配置：修改 build / webpack.base.conf.js
module.exports = {..."module": {"rules": [{test: require.resolve('zepto'),loader: 'exports-loader?window.Zepto!script-loader'},...]}};
(4) 引入：修改 src / main.js
//其实不引人也无妨，因为zepto已经自动挂载到$和Zepto全局变量中import zepto from 'zepto'window.$ = zepto;window.Zepto = zepto;
