先上git地址：https://github.com/summercloud/vue-admincss
配置思路
配置npm
这里不赘述html
配置eslint
- npm安装eslint以及eslint相关模块；
- 编写.eslintrc配置文件，在rules中编写校验规则；
- 在.eslintignore中设置须要忽略的文件;
- package.json的scripts中设置校验命令;其中test命令用于跑eslint校验，校验文件的路径在lint中配置
"test": "npm run lint",
"lint": "eslint src/**",
- lint:fix命令用于跑eslint自动修复，会自修复代码中的简单的编写错误
"lint:fix": "eslint --fix src/**"
安装webpack和webpack-dev-server
注：webpack-dev-server是一个小型的nodejs express服务器，使用webpack-dev-middleware中间件来为webpack打包生成的资源文件提供web服务。vue
- npm安装webpack，webpack-dev-server；
- 配置webpack.config.js文件，详细请见代码中webpack.config.js文件，注释写的很详细了。
- 在npm run build命令中经过NODE_ENV=production标记生产环境，在webpack.config.js配置文件中设置，若是为生产环境则进行代码压缩。
配置babel
- 在webpack.config.js中配置es6解析器babel
- 在loaders中对全部的js文件都进行babel-loader的解析
- 并配置.babelrc文件，preset字段是在为babel解析作预设，告诉babel须要使用相关的预设插件来解析代码，plugins字段就是用来配置使用babel相关的插件的。这样在运行webpack的同时全部的es6代码会通过babel编译成为浏览器可运行的js代码。
热模块加载
热模块加载是指代码自动同步开发过程当中的全部修改。node
- 在package.json的scripts中设置启动webpack-dev-server的命令,
"dev": "webpack-dev-server --content-base ./ --inline --hot" 其中./为webpack-dev-server读取文件的根目录。
- 在webpack.config.js中的output中publicPath为静态文件的文件夹，若是源代码有变动，热模块替换的代码会在此文件夹的相应路径中替
- 添加--inline命令，inline模式用于浏览器自动刷新页面，而且在webpack.config.js文件中配置devServer中的inline参数为true；
- 运行在inline模式中启用热模块替换，需在命令行中加入--hot参数，并在webpack.config.js的plugins中加入new webpack.HotModuleReplacementPlugin()语句。
其余文件解释器
- 在webpack.config.js中配置vue文件解析器，官网有详细教程
- 在webpack.config.js中配置ivew文件解析器，官网有详细教程
- 在webpack.config.js中配置除了js之外的其余文件的加载器，例如css、html、png等。
调试工具
- 调试工具devtool，并设置值为source-map，这样咱们就能够在浏览器中直接调试咱们的源码，在控制台的sources下，点开能够看到webpack://目录。
git中项目分析
- /dist/index.html 为页面总入口
- 入口文件有两个，index.js和vendors.js，index包含整个项目逻辑代码的入口，vendors则是打包全部工具库的入口与代码逻辑无关。
- index使整个项目的入口，其中配置了路由，而且混入mixin中的方法到全局的VUE中，mixin包含一些通用的方法，例如$_request等。全部new的VUE对象都包含这些方法。
- index中定义了根组件app，此后的全部页面显示组件都是根组件的子组件。其中app中渲染的内容来自app.vue，app.vue中定义了页面的架构。
- store文件夹里用vuex作状态管理，定义了一系列的全局状态，并在index.js中注入根组件app中 util中的routes定义了项目的路由
- css文件夹中的common文件中定义一些工具类以及皮肤类等；util中定义一些对iview修改的类；
- 使用iview组件库进行开发，使用手册详见：https://www.iviewui.com/components/grid