阅读 4672

vue模块化开发入门| 从0到1——使用vue.js2.0 + ElementUI开发BS后台管理系统

最近一段时间在开发新项目很高兴领导信任我,能把如此重要的任务交给我。以下是我的个人总结,方便以后能够快速回忆具体细节,同时也方便大家。有欠妥之处望大神纠正,一起进步~

技术选型:

  1. 基于vue2.0脚手架的搭建
  2. elementUI 框架 element-cn.eleme.io/#/zh-CN/com…
  3. vueX状态管理
  4. axios —— http封装+拦截器的使用
  5. vue-router 路由使用
  6. webpack简单配置
  7. ES6语法
  8. 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.csdn.net/bboyjoe/art…

blog.csdn.net/qq_34543438…

my.oschina.net/gujieyi/blo…

www.cnblogs.com/avon/p/5943…

www.mamicode.com/info-detail…

项目中在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…

blog.csdn.net/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")就可以了。简单么~

参考文章

www.cnblogs.com/DM428/p/729…

www.cnblogs.com/FarmanKKK/p…

www.imooc.com/article/147…

www.jb51.net/article/128…

www.cnblogs.com/gsgs/p/6738…

www.cnblogs.com/qiu-Ann/p/7…

cnodejs.org/topic/58426…

www.cnblogs.com/gsgs/p/6738…

步骤五 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实例创建 在任何组件想调用后台接口的时就可以先这样做

  1. import {requestLogin} from '../../axios/axios';
  2. 在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如图

把你的项目中根路径(就是IP和Port按照如此性质更改下) pathRewrite属性代表可以把axios自定义路径更改为正式路径。 如此基本能满足本地开发跨域问题~

参考资料:

segmentfault.com/q/101000001…

www.jb51.net/article/112…

www.kancloud.cn/yunye/axios…(官网)

blog.csdn.net/wopelo/arti…

blog.csdn.net/u012369271/…

blog.csdn.net/qq_28027903…

blog.csdn.net/quanquanxiu…

www.cnblogs.com/ldlx-mars/p…

blog.csdn.net/panyox/arti…

blog.csdn.net/qq673318522…

www.cnblogs.com/guoxianglei…

segmentfault.com/q/101000001…

segmentfault.com/q/101000001…

www.cnblogs.com/caimuqing/p…

blog.csdn.net/wangjun5159…

segmentfault.com/q/101000000…

www.cnblogs.com/tugenhua070…

www.cnblogs.com/linh93/p/70…

segmentfault.com/q/101000001…

www.jianshu.com/p/1fc65f3f4…

步骤六 简单配置webpack+打包上线

项目开发到一定周期就要打包上线,简单的就是运行之前讲的npm run build 然后把生成的dist文件夹提交到服务器上,然后做好引导就好了,但是事实上需要注意以下几点:

  1. build之前要设置好webpack文件:

    更改下路径,不然打包到服务器页面会是白屏的

  2. 此步骤若项目不存在动态设置IP和port可忽略

    其实这一步主要处理打包的时候暴露相关文件,便于上线的时候再次手动修改文件IP和Port (本公司用的是K8S服务器,需要对IP和port设置。所以我自己新建了一个src/config.js文件,把接口的IP和port都设置了一下,su所以要把config.js最后暴露出来,所以要在这里设置下参数)

3)最后一步npm run build 提交代码搞定!

以后希望能和大神讨论下webpack相关应用,小弟深感荣幸!

参考文档:

www.webpackjs.com/ webpack官网

blog.csdn.net/github_2667…

blog.csdn.net/liangklfang…

blog.csdn.net/qq_32930863…

blog.csdn.net/gebitan505/…

www.cnblogs.com/tugenhua070…

www.cnblogs.com/ye-hcj/p/70…

www.jb51.net/article/132…

blog.csdn.net/yusirxiaer/…

www.cnblogs.com/ye-hcj/p/70…

blog.csdn.net/s8460049/ar…

关于ES6语法和iconfont相关知识

无需多言

总结

首先很感谢身边的大神们对我的帮助,希望我的心血能确实帮助到大家,送给大家一句话:你走过的路、见过的人、看过的书、 学过的东西,最终都会回馈到你的身上~

欢迎各位交流

QQ:2996713250

wx:1050049640

关注下面的标签,发现更多相似文章
评论
说说你的看法