vue模块化开发入门| 从0到1——使用vue.js2.0 + ElementUI开发BS后台管理系统
最近一段时间在开发新项目很高兴领导信任我，能把如此重要的任务交给我。如下是个人我的总结，方便之后可以快速回忆具体细节，同时也方便你们。有欠妥之处望大神纠正，一块儿进步~css
技术选型：
- 基于vue2.0脚手架的搭建
- elementUI 框架 element-cn.eleme.io/#/zh-CN/com…
- vueX状态管理
- axios —— http封装+拦截器的使用
- vue-router 路由使用
- webpack简单配置
- ES6语法
- inconfont 矢量图应用
github代码地址:(有用记得给兄弟点个star哈哈~)前端
(1.0版本)~ https://github.com/lifuxu521/vue-element1.0.gitvue
(2.0版本)~ https://github.com/lifuxu521/vue-element2.0.gitnode
文档结构
-
1区是项目搭建后自动生成的（其中dist文件是最后项目打包时候自动生成的）webpack
-
2区是主要代码编辑部分 我主要编辑了axios,components(组件模板），router(路由配置）,vuex(状态配置），config.js(公用URL抽取）ios
-
3区是我抽取的公共css和js部分供整个项目的使用。git
-
绿色划线部分是项目的主入口根实例es6
步骤一（搭建脚手架）
哈哈很简单github
- 装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
- 仍是不会能够参考 segmentfault.com/a/119000001…
- 若是报错通常是node_modules没装好，你能够考虑重装
rm -rf node_modules
rm package-lock.json
npm cache clear --force
npm install
复制代码
都没问题后浏览器输入localhost:端口号若是出现web
恭喜你进入了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.vuejs.org/zh-cn/essen…
项目中在router/index.js中我配置了我本身须要的路由，若是须要嵌套路由的话你就能够增长childern:[]属性，将二级路由设置到json中，通常路由会有icon图标，你能够在你配置的路由上增长iconCls(自定义属性),把对应的矢量图的类名写好，
<template v-for="item in $router.options.routes[2].children" >
<router-link v-bind:to="item.path">
<i class="iconfont" v-bind:class="item.iconCls" v-bind:title="item.name"></i>
<span class="">{{item.name}}</span>
</router-link>
</template>
复制代码
能够参考上边这段最简单的遍历路由的代码书写本身的，还能够经过vue标记flag管理路由状态，然后你能够参考下边这段代码在main.js中书写一些路由切换的时候的逻辑
routes.beforeEach((to, from, next) => {
//NProgress.start();
next();
if (to.path == '/login') {
}else{
};
})
复制代码
可参考资料： blog.csdn.net/latency_che…
下期能够参考
步骤四 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 www.kancloud.cn/yunye/axios…
其实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';
//刷新token
export 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如图
参考资料：
www.kancloud.cn/yunye/axios…(官网)
步骤六 简单配置webpack+打包上线
项目开发到必定周期就要打包上线，简单的就是运行以前讲的npm run build 而后把生成的dist文件夹提交到服务器上，而后作好引导就行了，可是事实上须要注意如下几点：
-
build以前要设置好webpack文件：
-
此步骤若项目不存在动态设置IP和port可忽略
3)最后一步npm run build 提交代码搞定！
之后但愿能和大神讨论下webpack相关应用，小弟深感荣幸！
参考文档：
www.webpackjs.com/ webpack官网
关于ES6语法和iconfont相关知识
-
iconfont:www.iconfont.cn/
无需多言
总结
首先很感谢身边的大神们对个人帮助，但愿个人心血能确实帮助到你们，送给你们一句话：你走过的路、见过的人、看过的书、 学过的东西，最终都会回馈到你的身上~
欢迎各位交流
QQ：2996713250
wx:1050049640
- 1. vue入门 | 使用vue.js2.0 + ElementUI开发后台管理系统详细教程
- 2. vue入门 | 使用vue.js2.0 + ElementUI开发后台管理系统详细教程（一）
- 3. 基于vue模块化开发后台系统——准备工做
- 4. vue 搭建后台系统模块化开发
- 5. 基于vue模块化开发后台系统——权限控制
- 6. 基于vue模块化开发后台系统——构建项目
- 7. node后台开发入门——http模块
- 8. vue后台管理系统开发完整开源代码基于elementUI
- 9. 使用Vue-cli搭建后台简单管理系统vue.js2.0
- 10. 全栈开发入门实战：后台管理系统
- 更多相关文章...
- • Spring使用AspectJ开发AOP：基于XML和基于Annotation - Spring教程
- • 操作系统（OS）平台 统计 - 浏览器信息
- • PHP开发工具
- • Java Agent入门实战（三）-JVM Attach原理与使用
-
每一个你不满意的现在，都有一个你没有努力的曾经。