基于VUE的前端框架搭建

摘要: 前端相关技术栈：vue + es6

工具：webpack、babel转码、eslint校验、使用npm管理包、iview组件库

vue周边：vuex做状态管理、vueRouter做路由管理

先上git地址：https://github.com/summercloud/vue-admin

配置思路

配置npm

这里不赘述

配置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服务。

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代码。

热模块加载

热模块加载是指代码自动同步开发过程中的所有修改。

在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