最近一段时间在开发新项目很高兴领导信任我，能把如此重要的任务交给我。以下是我的个人总结，方便以后能够快速回忆具体细节，同时也方便大家。有欠妥之处望大神纠正，一起进步~
技术选型：
- 基于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.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
- 还是不会可以参考 segmentfault.com/a/119000001…
- 如果报错一般是node_modules没装好，你可以考虑重装
rm -rf node_modules
rm package-lock.json
npm cache clear --force
npm 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.vuejs.org/zh-cn/essen…
blog.youkuaiyun.com/bboyjoe/art…
blog.youkuaiyun.com/qq_34543438…
项目中在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.youkuaiyun.com/latency_che…
blog.youkuaiyun.com/weixin_3579…
下期可以参考
步骤四 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…(官网)
blog.youkuaiyun.com/wopelo/arti…
blog.youkuaiyun.com/u012369271/…
blog.youkuaiyun.com/qq_28027903…
blog.youkuaiyun.com/quanquanxiu…
blog.youkuaiyun.com/panyox/arti…
blog.youkuaiyun.com/qq673318522…
blog.youkuaiyun.com/wangjun5159…
步骤六 简单配置webpack+打包上线
项目开发到一定周期就要打包上线，简单的就是运行之前讲的npm run build 然后把生成的dist文件夹提交到服务器上，然后做好引导就好了，但是事实上需要注意以下几点：
-
build之前要设置好webpack文件：
-
此步骤若项目不存在动态设置IP和port可忽略
3)最后一步npm run build 提交代码搞定！
以后希望能和大神讨论下webpack相关应用，小弟深感荣幸！
参考文档：
www.webpackjs.com/ webpack官网
blog.youkuaiyun.com/github_2667…
blog.youkuaiyun.com/liangklfang…
blog.youkuaiyun.com/qq_32930863…
blog.youkuaiyun.com/gebitan505/…
blog.youkuaiyun.com/yusirxiaer/…
blog.youkuaiyun.com/s8460049/ar…
关于ES6语法和iconfont相关知识
-
iconfont:www.iconfont.cn/
无需多言
总结
首先很感谢身边的大神们对我的帮助，希望我的心血能确实帮助到大家，送给大家一句话：你走过的路、见过的人、看过的书、 学过的东西，最终都会回馈到你的身上~
欢迎各位交流
QQ：2996713250
wx:1050049640
扫一扫
1072
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
