最近一段时间在开发新项目很高兴领导信任我，能把如此重要的任务交给我。以下是我的个人总结，方便以后能够快速回忆具体细节，同时也方便大家。有欠妥之处望大神纠正，一起进步~
技术选型：
- 基于vue2.0脚手架的搭建
- elementUI 框架
- vueX状态管理
- axios —— http封装+拦截器的使用
- vue-router 路由使用
- webpack简单配置
- ES6语法
- inconfont 矢量图应用
github代码地址:(有用记得给兄弟点个star哈哈~)
(1.0版本)~ https://github.com/lifuxu521/vue-element1.0.git
(2.0版本)~ https://github.com/lifuxu521/vue-element2.0.git
文档结构
-
1区是项目搭建后自动生成的（其中dist文件是最后项目打包时候自动生成的）
-
2区是主要代码编辑部分 我主要编辑了axios,components(组件模板），router(路由配置）,vuex(状态配置），config.js(公用URL抽取）
-
3区是我抽取的公共css和js部分供整个项目的使用。
-
绿色划线部分是项目的主入口根实例
步骤一（搭建脚手架）
哈哈很简单
- 装node环境，装npm或者cnpm
- 装git界面（个人比较推荐）
- 本地新建一个工作区右键git bash here
- npm install vue
- npm install vue-cli
- vue init webpack my-project
- 一顿回车 |Y|n
- cd 你的项目名称 npm run dev
- 还是不会可以参考
- 如果报错一般是node_modules没装好，你可以考虑重装
rm -rf node_modulesrm package-lock.jsonnpm cache clear --forcenpm install复制代码
都没问题后浏览器输入localhost:端口号如果出现
恭喜你进入了vue的世界了
PS：（你可以仿照我的项目文件结构改自己的，看个人喜好随意调整文件，但是别太嗨皮把配置文件都整没了）
其实你也可以直接copy我的项目来使用，去掉不用的文件重新配置路由，然后npm install直接搞定前期项目的搭建复制代码
步骤二
装自己必要的插件工具（比如less,scss,axios,MD5,base64,qs,jq,echats,UI框架等）
-
npm install echarts --save
-
npm install vuex --save
-
npm install --save axios
-
npm install element-ui -S
-
npm install vuex --save
.............
步骤三：编写组件+配置路由
这一步你可以看自己的项目需求了，有几级的页面，有几个公用的模板，组件是否要通信。
比如我的项目是这样登陆（三种角色登录）==>左侧导航（不同角色登陆左侧导航显示不同条目）
登陆页：
系统子页:
所以我就这样架构：
第一级有一个login组件和home组件（组件：就相当于一个单个模板页面）
- login组件配置vuex总登录状态,配置相应路由切换
- home组件管理状态并分发跳转到子组件
第二级（home下的子组件）：
- home组件主要实现左侧和头部公用部分的逻辑和样式
- 各个子组件都从home组件嵌套通过逻辑判断应用哪部分组件
- 一个组件相当于右侧一个页面的，从子组件里边书写相应的局部逻辑编写局部的样式
配置路由:
参考资料：
vue-router官网讲解：
项目中在router/index.js中我配置了我自己需要的路由，如果需要嵌套路由的话你就可以增加childern:[]属性，将二级路由设置到json中，一般路由会有icon图标，你可以在你配置的路由上增加iconCls(自定义属性),把对应的矢量图的类名写好，
{ {item.name}} 复制代码
可以参考上边这段最简单的遍历路由的代码书写自己的，还可以通过vue标记flag管理路由状态，而后你可以参考下边这段代码在main.js中书写一些路由切换的时候的逻辑
routes.beforeEach((to, from, next) => { //NProgress.start(); next(); if (to.path == '/login') { }else{ };})复制代码 可参考资料：
下期可以参考
步骤四 vuex状态应用
对于初学者来说这个东西好像摸不着头脑，其实vuex没这么难搞无非就是顺着配置好。它主要可以管理一些全局的状态同localstrorage有些类似，当然如果项目允许用localstorage这种情景记录情况可以考虑不用vuex, 其实主要就这几个配置项
state mutations actions getters复制代码
然后形式呢就这样写：
import Vue from 'vue'import Vuex from 'vuex'import axios from 'axios'Vue.use(Vuex) //首先声明一个状态 state const state = {}// 然后给 actions 注册事件处理函数，当这个函数被触发时，将状态提交到 mutaions中处理const actions = {// 提交到mutations中处理 loginin:({commit})=>commit('LOGININ'),//首次登录 refreshToken:({commit})=>commit('REToken'),//五分钟刷新token loginout:({commit})=>commit('LOGINOUT'),//登出 gettoken:({commit})=>commit('GETTOKEN')//首次刷新token}// 更新状态const mutations = { LOGININ (state,odata) { // 登录状态变为登录 //state.loginInfo.logined = true }, // 登出 LOGINOUT (state) { }, GETTOKEN(state,odata){ }, /***刷新token**/ REToken(state){ }}// 获取状态信息const getters = { // gettoken(state){ // return state.loginInfo.access_token; // }}// 下面这个相当关键了，所有模块，记住是所有，注册才能使用export default new Vuex.Store({ state, mutations, actions, getters})复制代码 同传统的vue实例一样，有一个类似data的状态state,然后开始注册并更新调用更新数据。最后我们在任何页面直接引用文件然后调用 类似这样 store.dispatch("refreshToken")就可以了。简单么~
参考文章
步骤五 axios应用
这个是官网的APi
其实axios就相当于jq里边的$.ajax(),主要使用了它的拦截器能够在发送http请求之前配置一些设置。比如我们公司需要每次请求验证token值，所以就需要这个来操作。
例子：
axios.js对应设置
import axios from 'axios';import config from '@/config'//配置动态IP和Port let base1 = 'http://172.16.0.13:31427';//刷新tokenexport const getRefreshToken = params => { return instanceBase1.post(`/mtccp/oauth/refresh `, params).then(res => res.data); };//登录export const requestLogin = params => { return instanceBase1.post(`/mtccp/oauth/login `, params).then(res => res.data); };/***************************创建axios实例***************************************/const instanceBase1 = axios.create({ // baseURL: config.BASE1_URL,(本公司上线代码需要换动态IP和Port前期准备) baseURL: base1, // headers: { // 'Access-Control-Allow-Origin':'*', // 'Content-Type': 'application/json', // 'Access-Control-Allow-Headers':'Authorization,Origin, X-Requested-With, Content-Type, Accept', // } // transformRequest: [function (data) { // data = QS.stringify(data); // return data; // }] // withCredentials:true //设置跨域(并没什么卵用)！});/***************************配置拦截器***************************************/instanceBase1.interceptors.request.use( // //在发送请求之前做些什么 config => { // if (request.getMethod().equals("OPTIONS")) { // HttpUtil.setResponse(response, HttpStatus.OK.value(), null); // return; // } config.headers.Authorization = store.state.loginInfo.access_token;//vuex管理token //以下代码2.0版本会有机会参考应用 // var xtoken = getXtoken() // if(xtoken != null){ // config.headers['X-Token'] = xtoken // } // if(config.method=='post'){ // config.data = { // ...config.data, // _t: Date.parse(new Date())/1000, // } // }else if(config.method=='get'){ // config.params = { // _t: Date.parse(new Date())/1000, // ...config.params // } // } return config; },function(error){ store.dispatch("loginout");//登出删除状态 return Promise.reject(error) });复制代码 以上就是一个完整的axios实例创建 在任何组件想调用后台接口的时就可以先这样做
- import {requestLogin} from '../../axios/axios';
- 在vue实例中挂载函数methods:
getList(){ let _this = this; let params ={ }; console.log(params) requestLogin(params).then((res) => { console.log(res) if(res.code=="200000"){ }; //NProgress.done(); }); },复制代码 到此一个带有拦截器的http请求完成
特别注意：
当你配置的时候会有跨域问题，不管是本地，还是推送线上都可能会出现跨域问题。axios不支持jsonp格式跨域，首先你要确定后台大哥是不是给你设置了支持不支持跨域(header的相关配置)可参考如下
response.setHeader("Access-Control-Allow-Origin", "*");response.setHeader("Access-Control-Allow-Methods", "POST,GET,OPTIONS,DELETE");response.setHeader("Access-Control-Allow-Headers", "x-requested-with,Content-Type");复制代码 如果确实设置之后，然后就是前端这边的问题了，首先模块化开发模式会有一个问题，会有代理访问服务存在，就是说不是直接访问接口，会在代理服务中转下。所以我们前端需要配置下具体访问路径然后就可以实现跨域了 项目中在config文件夹的index.js如图
参考资料：
(官网)
步骤六 简单配置webpack+打包上线
项目开发到一定周期就要打包上线，简单的就是运行之前讲的npm run build 然后把生成的dist文件夹提交到服务器上，然后做好引导就好了，但是事实上需要注意以下几点：
-
build之前要设置好webpack文件：
-
此步骤若项目不存在动态设置IP和port可忽略
3)最后一步npm run build 提交代码搞定！
以后希望能和大神讨论下webpack相关应用，小弟深感荣幸！
参考文档：
webpack官网
关于ES6语法和iconfont相关知识
-
es6:
-
iconfont:
无需多言
总结
首先很感谢身边的大神们对我的帮助，希望我的心血能确实帮助到大家，送给大家一句话：你走过的路、见过的人、看过的书、 学过的东西，最终都会回馈到你的身上~
欢迎各位交流
QQ：2996713250
wx:1050049640