01 克隆项目并熟悉主要目录和文件

WWWWW先生
0 阅读4分钟

1. 克隆初始项目并运行起来

  1. 执行git clone https://git.itcast.cn/heimaqianduan/vue-admin.git命令，克隆初始代码。
  2. 执行npm i安装依赖,安装成功后示例

be143d84-4247-4587-b9ba-0fd69f3f1a61.png 3. 运行服务npm run start

57a22289-62d2-448d-b5cf-45d5f27e9a2f.png

2.代码目录

0b29ae96-d88a-4ffd-8516-90002e2bf4f1.png 代码目录主要在src目录下，src目录是源代码(source code)目录，存放项目的逻辑和功能实现，实际上线之后在浏览器中跑的代码就是它们。

apijs - 业务接口
assets - 静态资源（图片）
components - 组件（公共组件）
constants - 常量（不需要变动的数据）
directive - 全局指令
icons - 图标（png,svg,字体图标）
layout - 搭建项目的架子，布局
utils - 工具函数（转化函数、校验函数、请求request）
views - 页面级组件、路由级别组件、业务组件

源代码分多个目录：方便维护、语义化。

src之外的目录和文件多数是项目的配置文件，包括babel配置，脚手架配置，环境变量配置等等。

2.1 包文件-package.json

核心交付：拿到一个新项目之后，重点关注包文件中的哪些东西。package.json是项目包管理文件，我们重点关注项目依赖和可执行命令部分。

{
  "name": "vue-admin-template",
  "version": "4.4.0",
  "description": "A vue admin template with Element UI & axios & iconfont & permission control & lint",
  "author": "Pan <panfree23@gmail.com>",
  "scripts": {
    "start": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "report": "vue-cli-service build --report"
  },
  "dependencies": {
    "axios": "^0.18.1",
    "core-js": "^3.30.0",
    "element-ui": "^2.15.13",
    "js-cookie": "^2.2.0",
    "normalize.css": "7.0.0",
    "path-to-regexp": "2.4.0",
    "vue": "2.6.10",
    "vue-router": "^3.6.5",
    "vuex": "3.1.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "4.4.4",
    "@vue/cli-plugin-eslint": "4.4.4",
    "@vue/cli-service": "4.4.4",
    "autoprefixer": "9.5.1",
    "babel-eslint": "10.1.0",
    "babel-plugin-dynamic-import-node": "2.3.3",
    "chalk": "2.4.2",
    "connect": "3.6.6",
    "eslint": "6.7.2",
    "eslint-plugin-vue": "6.2.2",
    "html-webpack-plugin": "3.2.0",
    "runjs": "4.3.2",
    "sass": "^1.49.10",
    "sass-loader": "10",
    "script-ext-html-webpack-plugin": "2.1.3",
    "serve-static": "1.13.2",
    "svg-sprite-loader": "^6.0.11",
    "vue-template-compiler": "2.6.10"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ],
  "engines": {
    "node": ">=8.9",
    "npm": ">= 3.0.0"
  },
  "license": "MIT"
}

上面的配置文件中的dependencies是无论生产环境还是开发环境都要依赖的包，devDependencies是开发环境中依赖的包，npm i sass如果没指定，默认是安装到dependencies中的。如果想只安装到开发环境中devDependencies,可以执行npm i sass -D。具体安装到哪里，可以查看文档建议和自己的实际需求。

scripts中包含了可执行命令的配置，包括启动开发服务、打包等，并且这些命令可以定制。

2.2 应用入口 - main.js

// 导入核心框架
import Vue from 'vue'
// 样式重置文件
import 'normalize.css/normalize.css'
// 引入elementUI组件库
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

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

import App from './App'

import store from './store'

import router from './router'

// 注册svg
import '@/icons'
// 全局注册组件
Vue.use(ElementUI)

Vue.config.productionTip = false

// vue实例化
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

2.3 组件树 - App.vue

334a0b89-1858-40d5-9050-fe42bc8540b1.png 分析顺序: App.vue→router/index.js→layout/index.vue→components/AppMain.vue---components/Navbar.vue

2.4 路由文件 - vueRouter

能够理清楚一级和二级路由的不同配置写法，能够自己添加新路由。

只有一级路由的写法：

{
    path: '/workbench',
    component: Layout,
    children: [{
      path: '',
      component: () => import('@/views/Workbench/index'),
      meta: { title: '工作台', icon: 'el-icon-data-board' }
    }]
  }

同时拥有一级路由和二级路由的写法：

{
    path: '/park',
    component: Layout,
    permission: 'park',
    meta: { title: '园区管理', icon: 'el-icon-office-building' },
    children: [{
      path: 'building',
      permission: 'park:building',
      meta: { title: '楼宇管理' },
      component: () => import('@/views/Park/Building/index')
    },
    {
      path: 'enterprise',
      permission: 'park:enterprise',
      meta: { title: '企业管理' },
      component: () => import('@/views/Park/Enterprise/index')
    }]
  }

效示例果： f987ae51-0f42-4e34-a3cf-2afd65880912.png

2.5 状态管理 - Vuex

a170d7ed-5fe7-4196-a6c1-3526cfd23a68.png 基于模块化管理的集中状态管理。

791cf508-1a33-46ba-aae7-c7976c17641c.png

使用方法：

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
Vue.use(Vuex)

const store = new Vuex.Store({
  // 组合模块的配置项
  modules: {
    user
  }
})
// 组件中使用user模块中的数据 ?
// this.$store.state.user.name
// 组件中使用mutation ?
// this.$store.commit('user/mutation name')
// 组件中使用action ?
// this.$store.dispatch('user/action name')

// 场景1：组件中使用state和方法很少 this.store
// 场景2：组件中使用state和方法很多 映射方法mapState mapMutations
export default store

2.6 请求模块 - request.js和api.js

2.6.1 request.js模块说明

1b8d15cc-1868-475f-9045-eeb5734aa6f9.png

import axios from 'axios'
const service = axios.create({
  baseURL: 'https://api-hmzs.itheima.net/v1',
  timeout: 5000 // request timeout
})

// 请求拦截器
service.interceptors.request.use(
  config => {
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 响应拦截器
service.interceptors.response.use(
  response => {
    return response.data
  },
  error => {
    return Promise.reject(error)
  }
)

export default service

项目的多数接口的配置是一样的，只需统一配置一次即可。请求拦截器需要做的事情就是在请求发送之前，支队参数对象做一些事情（比如添加甲醛Token）。响应拦截器主要做的事情就是响应数据返回到业务方之前，支队响应对象做一些事情（比如，简化data，错误处理等）。

2.6.2 apis模块说明

知道apis模块中的业务接口函数是如何封装一级如何使用的，通常都是按模块来划分的。

ceb95e6c-a9f1-4f11-88e6-0ff1d2a7ea50.png apis中的所有的业务函数都采用同样的封装逻辑（参数格式、返回值格式），方便维护；apis中所有的业务函数内部都采用request.js中统一导出的axios实例达到配置一次，管控所有接口的目的。

008448f7-e9af-44e1-af00-74a274699828.png

2.7 路由和菜单的关系

5dcc668c-d87a-49f9-bbc5-688789a40416.png

菜单通过遍历路由来表示，路由表作为数据来源。路由对象meta属性中的icon决定了显示的图标，title决定了要显示的标题。

avatar
文章
阅读
粉丝