当前位置： 首页 > wzjs >正文

网站建设服务包含内容山东和城乡建设厅网站

wzjs 2025/9/22 12:56:38
网站建设服务包含内容,山东和城乡建设厅网站,网页版游戏排行榜2022,装潢设计公司排行认识vue-admin **核心交付:** 为什么要基于现成架子二次开发 什么是二次开发：基于已有的代码（项目工程，脚手架）开进行新功能的开发 所以看懂已有的框架中的既有代码，变得很重要了 1. 背景知识 后台管理系统是一种最…

认识vue-admin

**核心交付:** 为什么要基于现成架子二次开发

什么是二次开发：基于已有的代码（项目工程，脚手架）开进行新功能的开发

所以看懂已有的框架中的既有代码，变得很重要了

1. 背景知识


后台管理系统是一种最常见的应用模式，不同的管理系统之间有很多相似的地方，比如：

  1. 页面整体结构相似（Sidebar + Navbar + Main经典布局）
  1. 技术选型相似 （Vue.js + VueRouter + Vuex + Axios...）
  1. 业务类型相似 （CRUD + 导入导出 + 权限管理...）

既然这么多一样的地方，有必要每次开发后台管理系统，都重新创建一套吗？

2. vue-admin

vue-admin是基于vue-admin-template做了一些升级和改版之后的后台管理系统脚手架，内置了必要的安装包、目录结构划分、路由表设计等等，方便做二次开发，我们需要做的大部分是 填空题 ，架子搭建部分工作通常由团队Leader来做

执行下面命令，克隆脚手架到本地，并安装依赖运行

# 克隆项目
git clone http://git.itcast.cn/heimaqianduan/vue-admin.git# 安装依赖
npm i# 启动项目
npm run start

熟悉项目目录

**核心交付:** 熟悉项目的目录结构设计
 


说明：

  1. src 目录指的是源代码（source code）目录，存放项目应用的源代码，包含项目的逻辑和功能实现，实际上线之后在浏览器中跑的代码就是它们

好处：1. 维护方便 2. 语义化

    1. apis - 业务接口
    1. assets - 静态资源 （图片）
    1. components - 组件 公共组件
    1. constants - 常量 （不需要变动的数据）
    1. directive - 全局指令
    1. icons - 图标 （png svg 字体图标）
    1. Layout - 搭建项目的架子
    1. utils - 工具函数 （转化函数 校验函数 请求request）
    1. views - 页面级组件 路由级别组件 业务组件
  1. src 之外的目录和文件多数是项目的配置文件，包括babel配置，脚手架配置，环境变量配置等等

熟悉项目关键文件

1. 包文件 - package.json

**核心交付:** 拿到一个新项目之后，重点关注包文件中的哪些东西

项目包管理文件，我们重点关注 项目依赖 和 可执行命令 两部分

  "scripts": {"dev": "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.13.2","js-cookie": "^2.2.0","normalize.css": "7.0.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"}

说明：

  1. 可执行命令配置 script中包含了所有可执行的项目命令，包括启动开发服务，打包等等，这些命令可以定制
  1. 依赖项（dependencies ） 对比 开发依赖项（devDependencies）在开发时注意要把当前包安装到对应的依赖项中
    |
    | npm下载方式 | 作用 |
    | --- | --- | --- |
    | 依赖项（dependencies ） | npm i dayjs | 和业务代码相关，参与打包 |
    | 开发依赖（devDependencies） | npm i sass -D | 提供开发环境下的工程化支持，不参与打包 |

为什么要把包添加到依赖项里面？

协同开发的时候保证团队里的所有人用到包都是一致的

2. 应用入口 - main.js

**核心交付:** 知道入口文件中都做了哪些重要的事情

3. 组件树 - App.vue

**核心交付:** 能够从组件树的角度理清楚各级组件是如何渲染出来的

4. 路由文件 - vueRouter

**核心交付:** 能够理清楚一级和二级路由的不同配置写法，能够自己新增路由

只有一级路由的配置写法

  {path: '/workbench',component: Layout,children: [{path: '', // 地址为空name: 'workbench',component: () => import('@/views/workbench/index'),meta: { title: '工作台', icon: 'el-icon-eleme' }}]}

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

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

路由配置练习

配置要求：

  1. icon el-icon-wallet
  1. title名称 物业费管理

5. 状态管理 - Vuex

**核心交付:** 能够知道基于模块化管理的集中状态管理

请求模块说明

request.js模块说明

**核心交付:** 基于axios的基础封装都做了什么

import axios from 'axios'
const service = axios.create({baseURL: 'https://api-hmzs.itheima.net/tj',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

总结说明：

  1. 一般项目中多数的接口使用的配置是相似的，所以需要统一配置一次
  1. 请求拦截器主要做的事情是在请求发送之前，针对请求参数对象做一些事情（比如添加鉴权Token）
  1. 响应拦截器主要做的事情是在响应数据返回到业务方之前，针对响应对象做一些事情（比如简化data，错误处理等）

apis模块说明

**核心交付:** 能够知道APIS模块里的业务接口函数是如何封装以及如何使用
1- 按业务模块划分

2- 基础封装逻辑

import request from '@/utils/request'// 登录函数
/*** @description: 登录函数* @param {*} data { mobile,password}* @return {*} promise*/
export function login({ mobile, password }) {return request({url: '/sys/login',method: 'POST',data: {mobile,password}})
}

总结说明：

  1. apis中的所有业务函数都采用同样的封装逻辑（参数格式/返回值格式），方便维护
  1. apis中的所有业务函数内部都采用request.js中统一导出的axios实例达到配置一次，管控所有接口的目的

路由和菜单的关系

路由表是菜单的数据支撑

路由对象的属性和菜单显示对应

说明：

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

使用Git管理项目

**核心交付:** 养成git管理项目的习惯

  1. 删除原有的.git文件，切断和原本远程仓库的链接
  1. 重新执行 git init . 命令, 初始化本地仓库
  1. 在gitee上新增远程仓库
  1. 关联远程仓库到本地
  1. 推送本地到远程
  1. 后续日常提交 git add . git commit -m "提交说明"
http://www.dtcms.com/wzjs/828972.html

相关文章：

  • 活动网站免费的网站软件正能量推荐
  • 南宁seo网站推广服务建设部网站一级开发资质
  • 大会的网站架构wordpress挖
  • 广州海珠建网站的公司如何自己开发一款app
  • wordpress旅游类网站企业网组建
  • 济宁建设网站首页淘宝联盟+做网站
  • 网站文章排版营销型网站建设知识
  • 万网域名怎么绑定网站销售易crm官网
  • 加强网站微信公众号平台建设前端开发入门薪水
  • 主题网站设计实验步骤做网站在哪里做比较好
  • 营销型网站建设的优缺点专业团队怎样建设网站
  • 网站如何做线下推广番禺核酸检测点在哪
  • 网站做影集安全吗win10怎么删除2345网址导航
  • 网站的盈利模式硬件设计包括哪些内容
  • 网站降权如何恢复做ppt的模板的网站
  • 有没有做衣服的网站wordpress主题工具
  • 农产品电商网站的建设需求开发次元世界笔趣阁
  • 优秀国内个人网站网址360云盘做 网站图片服务器
  • 网站建设drwhcmwordpress采集提交百度
  • 宿迁网站定制网站自己可以做么
  • 外语网站建设hoperun企业邮箱
  • 太原建站司点击查看建个网站视频
  • 青岛福瀛建设集团网站wordpress点击弹窗
  • 龙岗网站建设过程公司员工培训方案
  • wordpress字数统计网站优化公司多少钱
  • 湛江做网站设计公司做渔具最大的外贸网站
  • 网站建设找工作网站美工工作步骤是什么
  • 刘涛做的儿童购物网站去哪个网站做吃播
  • cms 做网站模板深圳深圳做网站
  • 网站首页推广企业网站系统的设计与开发