devbox
代码架构师
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue项目开发目录架构_vue项目一般目录结构

作者：代码架构师 | 2024-02-04 14:13:17

赞

踩

vue项目一般目录结构

一.整体的目录介绍

1.目录架构

  1. - mock                    mock可以不需要后台，自动拦截ajax返回测试数据
  2.  
  3. - public                  公共目录
  4.  
  5. - src   
  6.  
  7.     api                   用于存放网络请求文件的目录
  8.     
  9.         index.ts          
  10.    
  11.         xxx目录            
  13.     assets                存放静态文件的目录
  15.     components            存放自定义组件的目录
  17.     filter                过滤器的使用（例如时间data格式化）
  19.         index.ts
  21.     icons                 图标库引入
  23.         svg  
  25.         index.ts
  27.     lang                  语言包引入（用于项目中多语言切换）
  29.         en.js
  31.         zh.js
  33.     layout                每个页面的框架
  35.     router                路由设置 
  37.         index.ts
  39.         modules           可以减少router下index整体的大小
  41.     store                 vuex的目录
  43.         modules           相应的文件存放
  45.         getters           获取vuex变量get方式
  47.         index.ts 
  49.     utils                 工具目录
  51.     views                 页面目录
  53.     App.vue 
  55.     main.ts  
  57.     permisson.ts          权限文件
  59. - .env.development        本地的环境变量
  60.  
  61. - .env.production         线上的环境变量
  62.  
  63. - vue.config.js           配置整体的vue项目
  64.  
  65. - package.json            所有下载的依赖统一管理文件
  66.  
  67. - README.md               项目介绍文档（一般上传源码管理器使用）

二.具体的代码

1. Vuex具体代码

1)  vuex具体架构

  1. const state = {
  2.    isRefresh:false //初始化刷新 为false
  3. }
  4.  
  5. const mutations = {
  6.  
  7.    SET_IS_REFRESH:(state: any, isRefresh: Boolean)=>{
  8.         state.isRefresh=isRefresh
  9.    }
  10. }
  11.  
  12. const actions = {
  13.     setRefresh: ({ commit }: any, isRefresh: Boolean) => {
  14.  
  15.         commit("SET_IS_REFRESH", isRefresh)
  16.     }
  17.  
  18. }
  19.  
  20. export default {
  21.   namespaced: true,
  22.   state,
  23.   mutations,
  24.   actions
  25. }

2）vuex的getters

  1. const getters = {
  2.     isRefresh:(state:any)=>state.refresh.isRefresh
  3. }
  4. export default getters

3）vuex注册

index.ts文件  在main.ts记住引入store

  1. import Vue from 'vue'
  2. import Vuex from 'vuex'
  3. import getters from './getters'
  4.  
  5.  
  6. Vue.use(Vuex)
  7.  
  8.  
  9. // https://webpack.js.org/guides/dependency-management/#requirecontext
  10. const modulesFiles = require.context('./modules', true, /\.ts$/)
  11.  
  12.  
  13.  
  14. const modules = modulesFiles.keys().reduce((modules: any, modulePath) => {
  15.   // set './app.js' => 'app'
  16.  
  17.   const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  18.  
  19.   const value = modulesFiles(modulePath)
  20.   modules[moduleName] = value.default
  21.   return modules
  22. }, {})
  23.  
  24. const store = new Vuex.Store({
  25.   modules,
  26.   getters,
  27.  
  28. })
  29.  
  30. export default store

2.permisson路由问题

permisson.ts   页面会反复调用 beforeEach，直到调用next()

router.beforeEach(to,from,next)   to 代表将要访问的路径   from 当前路径  next用于跳转页面

next({"path":"/"})指向路径后代表重定向  会再次访问beforeEach

  1. import router from './router'
  2. import { getToken, removeToken, setToken } from '@/utils/auth';
  3. import { Dialog } from 'vant';
  4. import store from './store';
  5.  
  6.  
  7.  
  8. const whiteList = ['/login']
  9.  
  10. const env = process.env.NODE_ENV
  11. if(env === "production") {
  12. // 应将layout中navList的to添加到此
  13. const navList = ['/socialRela', '/childrenStatus', '/work', '/education', '/info']
  14. router.beforeEach(async (to, from, next) => {
  15.   const userId = getToken()
  16.   if (userId) {
  17.     
  18.   } else {
  19.     if (whiteList.indexOf(to.path) != -1) {
  20.       next()
  21.     } else {
  22.       next({ path: '/login' })
  23.     }
  24.   }
  25. })
  26.  
  27.  
  28. }

 在路由权限这块，有一个笔记就是对于菜单权限的分配，判断角色是否存在，不存在的话获取角色后通过角色获取动态菜单，代码如下（代码仅供参考）

  1. 、、、路由判断代码
  2.       const hasRoles = store.getters.roles && store.getters.roles.length > 0
  3.       if (hasRoles) {
  4.         next()
  5.       } else {
  6.         try {
  7.           // get user info
  8.           // note: roles must be a object array! such as: ['ROLE_ADMIN'] or ,['ROLE_DEVELOPER','ROLE_EDITOR']
  9.           const { roles } = await store.dispatch('user/getInfo')
  10.  
  11.           // generate accessible routes map based on roles
  12.           const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
  13.  
  14.           // dynamically add accessible routes
  15.           router.addRoutes(accessRoutes)
  16.  
  17.           // hack method to ensure that addRoutes is complete
  18.           // set the replace: true, so the navigation will not leave a history record
  19.           next({ ...to, replace: true })
  20.         } catch (error) {
  21.           // remove token and go to login page to re-login
  22.           await store.dispatch('user/resetToken')
  23.           Message.error(error || 'Has Error')
  24.           next(`/login?redirect=${to.path}`)
  25.           NProgress.done()
  26.         }
  27.       }
  1. 、、、路由添加参考
  2. import { asyncRoutes, constantRoutes } from '@/router'
  3.  
  4. /**
  5.  * Use meta.role to determine if the current user has permission
  6.  * @param roles
  7.  * @param route
  8.  */
  9. function hasPermission(roles, route) {
  10.   if (route.meta && route.meta.roles) {
  11.     return roles.some(role => route.meta.roles.includes(role))
  12.   } else {
  13.     return true
  14.   }
  15. }
  16.  
  17. /**
  18.  * Filter asynchronous routing tables by recursion
  19.  * @param routes asyncRoutes
  20.  * @param roles
  21.  */
  22. export function filterAsyncRoutes(routes, roles) {
  23.   const res = []
  24.  
  25.   routes.forEach(route => {
  26.     const tmp = { ...route }
  27.     if (hasPermission(roles, tmp)) {
  28.       if (tmp.children) {
  29.         tmp.children = filterAsyncRoutes(tmp.children, roles)
  30.       }
  31.       res.push(tmp)
  32.     }
  33.   })
  34.  
  35.   return res
  36. }
  37.  
  38. const state = {
  39.   routes: [],
  40.   addRoutes: []
  41. }
  42.  
  43. const mutations = {
  44.   SET_ROUTES: (state, routes) => {
  45.     state.addRoutes = routes
  46.     state.routes = constantRoutes.concat(routes)
  47.   }
  48. }
  49.  
  50. const actions = {
  51.   generateRoutes({ commit }, roles) {
  52.     return new Promise(resolve => {
  53.       let accessedRoutes
  54.       if (roles.includes('ADMIN')) {
  55.         accessedRoutes = asyncRoutes || []
  56.       } else {
  57.         accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
  58.       }
  59.       commit('SET_ROUTES', accessedRoutes)
  60.       resolve(accessedRoutes)
  61.     })
  62.   }
  63. }
  64.  
  65. export default {
  66.   namespaced: true,
  67.   state,
  68.   mutations,
  69.   actions
  70. }

3.首先是svg引入 

在src目录创建icon目录    

icon目录分为svg（目录下是svg图片）、svgo.yml 、index.js

svgo.yml

  1. # replace default config
  2.  
  3. # multipass: true
  4. # full: true
  5.  
  6. plugins:
  7.  
  8.   # - name
  9.   #
  10.   # or:
  11.   # - name: false
  12.   # - name: true
  13.   #
  14.   # or:
  15.   # - name:
  16.   #     param1: 1
  17.   #     param2: 2
  18.  
  19. - removeAttrs:
  20.     attrs:
  21.       - 'fill'
  22.       - 'fill-rule'

index.js  加载svg目录下文件 ，不需要一次次加载，对于代码解释,收藏里require.context

  1. import Vue from 'vue'
  2. import SvgIcon from '@/components/SvgIcon'// svg component
  3.  
  4. // register globally
  5. Vue.component('svg-icon', SvgIcon)
  6.  
  7. const req = require.context('./svg', false, /\.svg$/)
  8. const requireAll = requireContext => requireContext.keys().map(requireContext)
  9. requireAll(req)

在vue.config中

  1. chainWebpack(config) {
  2.     config.plugins.delete('preload') // TODO: need test
  3.     config.plugins.delete('prefetch') // TODO: need test
  4.  
  5.     // set svg-sprite-loader
  6.     config.module
  7.       .rule('svg')
  8.       .exclude.add(resolve('src/assets/icons'))
  9.       .end()
  10.     config.module
  11.       .rule('icons')
  12.       .test(/\.svg$/)
  13.       .include.add(resolve('src/assets/icons'))
  14.       .end()
  15.       .use('svg-sprite-loader')
  16.       .loader('svg-sprite-loader')
  17.       .options({
  18.         symbolId: 'icon-[name]'
  19.       })
  20.       .end()
  21. }

然后全局注册SvgIcon组件

那么组件代码（组件定义完整后，最后记得在main.ts引入icon目录  但不需要vue对象里声明，lang需要）

  1. <template>
  2.   <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
  3.   <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
  4.     <use :xlink:href="iconName" />
  5.   </svg>
  6. </template>
  7.  
  8. <script>
  9. // doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
  10. import { isExternal } from '@/utils/validate'
  11.  
  12. export default {
  13.   name: 'SvgIcon',
  14.   props: {
  15.     iconClass: {
  16.       type: String,
  17.       required: true
  18.     },
  19.     className: {
  20.       type: String,
  21.       default: ''
  22.     }
  23.   },
  24.   computed: {
  25.     isExternal() {
  26.       return isExternal(this.iconClass)
  27.     },
  28.     iconName() {
  29.       return `#icon-${this.iconClass}`
  30.     },
  31.     svgClass() {
  32.       if (this.className) {
  33.         return 'svg-icon ' + this.className
  34.       } else {
  35.         return 'svg-icon'
  36.       }
  37.     },
  38.     styleExternalIcon() {
  39.       return {
  40.         mask: `url(${this.iconClass}) no-repeat 50% 50%`,
  41.         '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
  42.       }
  43.     }
  44.   }
  45. }
  46. </script>
  47.  
  48. <style scoped>
  49. .svg-icon {
  50.   width: 1em;
  51.   height: 1em;
  52.   vertical-align: -0.15em;
  53.   fill: currentColor;
  54.   overflow: hidden;
  55. }
  56.  
  57. .svg-external-icon {
  58.   background-color: currentColor;
  59.   mask-size: cover!important;
  60.   display: inline-block;
  61. }
  62. </style>

4.lang 语言包

在src创建lang文件目录

en.js tw.js zh.js  

其中一个文件的代码

  1. export default {
  2.   route: {
  3.      "language":"汉语"
  4.   }
  5. }

index.js需要下载vue-i18n

  1. import Vue from 'vue'
  2. import VueI18n from 'vue-i18n'
  3. //import Cookies from 'js-cookie'
  4. import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui lang
  5. import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui lang
  6. import elementTwLocale from 'element-ui/lib/locale/lang/zh-TW'// element-ui lang
  7. import enLocale from './en'
  8. import zhLocale from './zh'
  9. import twLocale from './tw'
  10.  
  11. Vue.use(VueI18n)
  12.  
  13. const messages = {
  14.   en: {
  15.     ...enLocale,
  16.     ...elementEnLocale
  17.   },
  18.   zh: {
  19.     ...zhLocale,
  20.     ...elementZhLocale
  21.   },
  22.   tw: {
  23.     ...twLocale,
  24.     ...elementTwLocale
  25.   }
  26. }
  27. export function getLanguage() {
  28.   //此处代码如果有选择可以加
  29.   //const chooseLanguage = Cookies.get('language')
  30.   //if (chooseLanguage) return chooseLanguage
  31.  
  32.   // if has not choose language
  33.   const language = (navigator.language || navigator.browserLanguage).toLowerCase()
  34.   const locales = Object.keys(messages)
  35.   for (const locale of locales) {
  36.     if (language.indexOf(locale) > -1) {
  37.       return locale
  38.     }
  39.   }
  40.   return 'en'
  41. }
  42. const i18n = new VueI18n({
  43.   // set locale
  44.   // options: en | zh | es
  45.   locale: getLanguage(),
  46.   // set locale messages
  47.   messages
  48. })
  49.  
  50. export default i18n

在main.ts(由于i18n使用到了elementui)

  1. import i81n from './lang'
  2.  
  3. Vue.use(Element, {
  4.  
  5. size: Cookies.get('size') || 'medium', // set element-ui default size
  6.  
  7. i18n: (key, value) => i18n.t(key, value)
  8.  
  9. })
  10.  
  11.  
  12.  
  13. new Vue({
  14.  
  15. i18n,
  16.  
  17. })

在使用页面中  $t('login.title')    判断页面是否有字段this.$te('route.' + title)

5.filter的使用

<span>{{ new Date(row.createTime) | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>

  1.  
  2. /**
  3.  * @param {number} time
  4.  * @param {string} option
  5.  * @returns {string}
  6.  */
  7. export function formatTime(time, option) {
  8.   if (('' + time).length === 10) {
  9.     time = parseInt(time) * 1000
  10.   } else {
  11.     time = +time
  12.   }
  13.   const d = new Date(time)
  14.   const now = Date.now()
  15.  
  16.   const diff = (now - d) / 1000
  17.  
  18.   if (diff < 30) {
  19.     return '刚刚'
  20.   } else if (diff < 3600) {
  21.     // less 1 hour
  22.     return Math.ceil(diff / 60) + '分钟前'
  23.   } else if (diff < 3600 * 24) {
  24.     return Math.ceil(diff / 3600) + '小时前'
  25.   } else if (diff < 3600 * 24 * 2) {
  26.     return '1天前'
  27.   }
  28.   if (option) {
  29.     return parseTime(time, option)
  30.   } else {
  31.     return (
  32.       d.getMonth() +
  33.       1 +
  34.       '月' +
  35.       d.getDate() +
  36.       '日' +
  37.       d.getHours() +
  38.       '时' +
  39.       d.getMinutes() +
  40.       '分'
  41.     )
  42.   }
  43. }

全局注册在main.ts

  1. import * as filters from './filters'
  2.  
  3. Object.keys(filters).forEach(key => {
  4.  
  5.   Vue.filter(key, filters[key])
  6.  
  7. })
  8.

6.api网络请求

1）封装axios

首先安装axios框架，

api->index.ts文件 （封装axios）

  1. import axios from 'axios'
  2. import { Dialog } from 'vant';
  3. import store from '@/store';
  4.  
  5. // create an axios instance
  6. const service = axios.create({
  7.   baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  8.   timeout: 8000 // request timeout
  9. })
  10.  
  11. // request interceptor
  12. service.interceptors.request.use(
  13.   config => {
  14.     //do something before request is sent
  15.     if (store.getters.token) {
  16.  
  17.       config.headers['Authorization'] = 'Bearer ' + store.getters.token
  18.     }
  19.     return config
  20.   },
  21.   error => {
  22.     // do something with request error
  23.     console.log(error) // for debug
  24.     return Promise.reject(error)
  25.   }
  26. )
  27.  
  28. // response interceptor
  29. service.interceptors.response.use(
  30.  
  31.   response => {
  32.  
  33.     const res = response.data
  34.     // if the custom code is not 200, it is judged as an error.
  35.     if (res.status && res.status !== 200) {
  36.       Dialog.alert({
  37.         message: res.message ,
  38.         title: "提示"
  39.       })
  40.  
  41.       return Promise.reject(new Error(res.message || 'Error'))
  42.     } else {
  43.       return res
  44.     }
  45.   },
  46.   error => {  
  47.     Dialog.alert({
  48.       message: error,
  49.       title: "服务器提示"
  50.     })
  51.     return Promise.reject(error)
  52.   }
  53. )
  54.  
  55. export default service

2）具体的方法网络请求实现

api下新建多个目录，存放网络请求的方法，如

  1. import request from '@/utils/request'
  2. import qs from 'qs'
  3.  
  4.  
  5. export function getUserId(query: any) {
  6.   return request({
  7.     url: "/consumer/user",
  8.     method: 'get',
  9.  
  10.     params: query
  11.   })
  12. }
  13.  
  14. // 新增用户基本信息
  15. export function Add(data: any) {
  16.   return request({
  17.     url: '/consumer/baseInfo/add',
  18.     method: 'post',
  19.     data: qs.stringify(data)
  20.   })
  21. }

以下axios提交方式Content-type:form-data
在使用axios时，注意到配置选项中包含params和data两者

因为params是添加到url的请求字符串中的，用于get请求。 （后台@RequestParam）

而data是添加到请求体（body）中的， 用于post请求;（后台@RequestBody） 

使用qs：qs的作用将json用&相连并序列化处理，那么需要字符特殊处理的可以使用qs

7.mock的使用

1）mock的注册

mock下的index.ts，将所有mock文件注册，如果确认使用就在主目录下的main.ts引入（require('../mock');）

  1. // 首先引入Mock
  2. const Mock = require('mockjs');
  3.  
  4. // 设置拦截ajax请求的相应时间
  5. Mock.setup({
  6.   timeout: '200-600'
  7. });
  8.  
  9. let configArray = [];
  10.  
  11. // 使用webpack的require.context()遍历所有mock文件
  12. const files = require.context('./modules', true, /\.ts$/);
  13. files.keys().forEach((key) => {
  14.   
  15.   configArray = configArray.concat(files(key).default);
  16. });
  17.  
  18. // 注册所有的mock服务
  19. configArray.forEach((item) => {
  20.   for (let [path, target] of Object.entries(item)) {
  21.     let protocol = path.split('|');
  22.     Mock.mock(new RegExp('^' + protocol[1]), protocol[0], target);
  23.   }
  24. });

2）mock的查找

modules下的xx，例如（具体的mock格式Home · nuysoft/Mock Wiki · GitHub）：

  1. let demoList = 
  2. {
  3.   status: 200,
  4.   message: 'success',
  5.   'data|10': [{
  6.   
  7.     clientId:'@id',
  8.     clientName: '@cname',
  9.     contactsPhone: '@email',
  10.    
  11.   }]
  12. }
  13. export default {
  14.   'get|/consumer/clientele/queryByAccount': demoList
  15. }

三.组件构造对象通过js调用

  1. import Vue from 'vue';
  2. import tipVue from './Tip.vue';
  3.  
  4. //将组件转换成对象
  5. const TipVueConstructor = Vue.extend(tipVue);
  6.  
  7.  
  8. const initInstance = () => {
  9.   //实例化
  10.   instance = new TipVueConstructor({
  11.     el: document.createElement('div')
  12.   });
  13.  
  14. };
  15.  
  16.  
  17. const TipBox = function (options) {
  18.   if (!instance) {
  19.     initInstance();
  20.   }
  21.   instance.action = '';
  22.   if (!instance.visible && options) {
  23.     document.body.appendChild(instance.$el);
  24.     var closeTime = options.closeTime || 1000;
  25.     Vue.nextTick(() => {
  26.       instance.visible = true;
  27.       instance.isTip = options.isTip;//isTip为true显示错误提示小黑框
  28.       instance.message = options.message
  29.       setTimeout(() => {
  30.         TipBox.close();
  31.         if (typeof options.func == "function") {
  32.           options.func();
  33.         }
  34.  
  35.       }, closeTime);
  36.     });
  37.   }
  38. };
  39.  
  40.  
  41. export default TipBox;

main.js或全局

Vue.prototype.$tip = TipBox

调用案例:

this.$tip({

          isTip: true,

          message: "验证码发送成功",

        });

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/article/detail/58962
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号