[关闭]
@jikeytang 2019-06-19T15:01:22.000000Z 字数 5796 阅读 2132

vyan-shop-admin

2019-blog

自从上次学习了Vue-cli之后，了解了一些简单的vue基础用法，但离真正的熟练还有很大的差距，本着通过实践来有效成长加深了解学习Vue的战略小目标，经过一段时间的沉淀和项目立意的准备，这个以Element-UI为UI组件的微信商城跃然纸上，由Vue-5群『7561206』管理雨生架构，其它群管理参与的名为：微燕商城的开源项目正式拉开了序幕，因为本着学习的目的所以这次准备微信、小程序的商城分别开发，着重熟悉微信的开发模式。经过一段时间的开发，微燕商城管理系统0.1.0版本告一段落，至此先总结记录一下。此版本开发目标为：通过mock数据提供一个基础模板，保证页面的完整性，整体功能比较简单，基于阶段性的成果，还是记录一下。
能力有限，不足之外还有很多，正在努力完善中，路过的大佬多多指点。

先看一下我们完成的效果

目前暂时不支持移动端，Login视频耗流量，也没有适配。

参考自：

1. 相关介绍

1.1 基本介绍

1.2 技术栈

技术 说明 官网
Vue-CLI-3 Vue脚手架工具 https://cli.vuejs.org/zh/guide/
Vue 渐进式JavaScript 框架 https://vuejs.org/
Vue-router 官方的路由管理器 https://router.vuejs.org/
Vuex 全局状态管理模式 https://vuex.vuejs.org/
Axios 基于promise 的HTTP 库 https://github.com/axios/axios
Element-UI 前端UI组件库 *1 https://element.eleme.io/
vue-echarts Baidu EFE基于Echarts的图表库 *2 https://github.com/ecomfe/vue-echarts
Mockjs 生成数据 http://mockjs.com/
Momentjs JavaScript 日期处理类库 *3 http://momentjs.cn/
SCSS CSS预处理器 https://sass-lang.com/
Tinymce 可视化HTML编辑器 https://www.tiny.cloud/
Fontawesome 图标字体库 *4 http://www.fontawesome.com.cn/

1. 虽然采用Element，但整体样式风格趋向于 ant-design，目的就是区别于大多数admin
2. v-charts为ElemeFE团队基于 Vue2.0 和 ECharts 开发的图表组件
3. 备选 Day.js 轻量的时间日期处理库
4. 图标并不清晰放大之后边缘模糊，下次准备使用 IconFont

1.3 开发工具

系统 工具 官网
VScode 主开发工具 https://code.visualstudio.com/
Webstorm 开发工具(兼Git提交) https://www.jetbrains.com/webstorm/
Atom 源码阅读工具 https://atom.io/
Cmder Cmd替代工具[windows] https://cmder.net/
Notepad2 临时单文件编辑[windows] http://www.flos-freeware.ch/notepad2.html
Chrome 调试工具 https://www.google.com/intl/zh-CN/chrome/

1.4 文件结构

  1. ├─dist           // 上线发布目录
  2. ├─public         // 公共资源目录
  3. └─/
  4.     ├─api           // 所有请求方法
  5.     ├─assets        // 资源目录
  6.     ├─components    // 全局组件
  7.     ├─config        // 全局配置
  8.     ├─layout        // 布局文件
  9.     ├─mock          // mock数据
  10.     ├─plugins       // 插件目录
  11.     ├─router        // 路由
  12.     ├─store         // Vuex
  13.     ├─styles        // CSS
  14.     ├─utils         // 公共方法目录
  15.     └─views         // 页面
  16.         ├─common       // 常用操作
  17.         ├─dashboard    // 首页
  18.         ├─login        // 登录
  19.         ├─order        // 订单管理
  20.         ├─other        // 其它
  21.         ├─product      // 商品管理
  22.         ├─system       // 系统设置
  23.         └─user         // 用户设置

需要注意的点：

  1. require.context('./', true, /\.vue/) // 搜索当前目录下所有子文件夹.vue结尾文件

但得到的并不是我们期望的数组对象，需要转换之后forEach，

  1. requireComponents.keys().forEach(fileName => {
  2.   // 组件实例
  3.   const reqCom = requireComponents(fileName)
  4.   // 截取路径作为组件名
  5.   const reqComName = reqCom.default.name || fileName.split('/')[1]
  6.   // 组件挂载
  7.   Vue.component(reqComName, reqCom.default || reqCom)
  8. })

因为需要处理 @/components/AppFilter/index.vue这个一个文件下的单组件，也需要处理@/components/Upload/MultiUpload.vue, @/components/Upload/SingleUpload.vue，一个文件夹下多组件，所以组件名称为.vue文件内的name，比如AppFilter的name为AppFilter：

  1. export default {
  2.   name: 'AppFilter'
  3. }

如果缺少name则取文件名为组件名，此项目全部采用default.name为组件名。
最后在总结一下，如果不用此方法，那注入全局组件就需要这样写：

  1. import Vue from 'vue'
  2. import Copyright from './Copyright/'
  3. import ToBack from './ToBack/'
  4. ……
  6. Vue.component('copyright', Copyright)
  7. Vue.component('to-back', SendSms)
  8. ……

最主要的增加一个组件，需要手动修改这个文件，而上面的处理是避免过多手动操作的解决办法。

此方法还在store中也有用到@/store/index.js，读出所有modules下的文件，然后绑定modules对象最后通过store入口注入。

  1. const files = require.context('./modules', false, /\.js$/)
  2. const modules = {}
  4. files.keys().forEach(key => {
  5.   modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
  6. })

@/main.js 中 render函数已经渲染一个视图提供给el挂载，对应的路由就是根级路由，对应的视图就是@/App.vue 当中router-view，而AppMain.vue中对应的路由应该是children，视图就是component: () => import('@/views/dashboard/index')：

  1. const pre = '/index/'
  2. export default [
  3.   {
  4.     path: '/',
  5.     component: Layout,
  6.     redirect: { name: 'dashboard' },
  7.     children: [
  8.       {
  9.         path: `/dashboard`,
  10.         name: 'dashboard',
  11.         title: '公告板',
  12.         component: () => import('@/views/dashboard/index'),
  13.         meta: { title: 'Dashboard', icon: 'dashboard', affix: true }
  14.       }
  15.     ]
  16.   }
  17. ]
  1. export default [
  2.   {
  3.     path: '/404',
  4.     component: () => import('@/views/other/404'),
  5.     hidden: true
  6.   },
  7.   {
  8.     path: '*',
  9.     redirect: '/404',
  10.     hidden: true
  11.   }
  12. ]

2. 开发约定

除了eslint之外的约定(若第三方参数违反约定，可以单行关闭/*eslint-disable */)：

3. Login页面

此页面大体结构参考：vue-element-admin

admin其实从逻辑及视图结构上可以分为前后两部分，前部分为Login登录页面，所有用户登录前的信息获取都在这块处理，后部分为通过Login登录之后的内页面，所有业务方面的操作需要经过Login过滤才能看到，为了防止内页面数据读取错误及一般安全浏览问题，所以通过url访问内页面登录地址需要进行统一拦截处理，这个在router/index.js的beforeEach里边处理。

而Login相关的处理在：@/views/login/index.vue中，其中@/views与@/components中的.vue文件区别在于：views为路由文件(@/router/index.js)对应的视图页面，components全局共用组件，可多次复用。

4. Views

5. 待开发的

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注