GitHub上的项目体验第二期——mall-admin-web

心动不如行动

之前在写《9月中旬到12月中旬的学习规划》的时候就说到“先做vuepress，做出一个完善的博客和文档库；然后接触vue-admin-beautiful做中后台。最后使用DataV（echarts、mapbox）做数据可视化。”

首先下载，还不算大1.8M。

然后用vscode打开项目，yarn install。

error An unexpected error occurred: "https://registry.yarnpkg.com/echarts/-/echarts-4.9.0.tgz: ESOCKETTIMEDOUT". 

日常报错，可能是我设置有问题，版本没弄好。

参考大佬的搭建步骤。

首先看看package.json。

 "dependencies": {
    "axios": "^0.18.0",
    "echarts": "^4.2.0-rc.2",
    "element-ui": "^2.3.7",
    "js-cookie": "^2.2.0",
    "normalize.css": "^8.0.0",
    "nprogress": "^0.2.0",
    "v-charts": "^1.19.0",
    "v-distpicker": "^1.0.20",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },

然后看看main.js

import Vue from 'vue'

import 'normalize.css/normalize.css'// A modern alternative to CSS resets

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n
import VCharts from 'v-charts'

import '@/styles/index.scss' // global css

import App from './App'
import router from './router'
import store from './store'

import '@/icons' // icon
import '@/permission' // permission control

再看看router/index.js和store/index.js

挺长的。

再看看views。有home、layout、login、oms、pms、sms、ums七个文件夹和一个404的组件。

大佬的教程上讲得真清晰，以后我弄开源项目的时候也这样操作。

src – 源码目录
├── api – axios网络请求定义
├── assets – 静态图片资源文件
├── components – 通用组件封装
├── icons – svg矢量图片文件
├── router – vue-router路由配置
├── store – vuex的状态管理
├── styles – 全局css样式
├── utils – 工具类
└── views – 前端页面
├── home – 首页
├── layout – 通用页面加载框架
├── login – 登录页
├── oms – 订单模块页面
├── pms – 商品模块页面
└── sms – 营销模块页面

卡在第一步没能成功。等初始化等了半天。

然后用在线项目截的图。

http://www.macrozheng.com/admin/

密码是：macro123