尚医通——管理平台前端环境搭建

codeyangleduo

于 2023-03-04 09:07:20 发布

阅读量332

点赞数

分类专栏：项目总结 # 尚医通文章标签：前端 vue.js javascript node.js

本文链接：https://blog.csdn.net/qq_44732432/article/details/129330116

版权

项目总结同时被 2 个专栏收录

8 篇文章 1 订阅

订阅专栏

尚医通

7 篇文章 0 订阅

订阅专栏

1、项目名称

解压vue-admin-template-master.zip，项目重命名：yygh-admin

修改package.json

{

  "name": "yygh-admin",

  "version": "3.8.0",

  "license": "MIT",

  "description": "尚医通管理平台系统",

  "author": "493111402@qq.com",

...

  }

3、如果需要修改端口号

config/index.js中修改

port: 9528

4、项目的目录结构

├── build // 构建脚本

├── config // 全局配置

├── node_modules // 项目依赖模块

├── src //项目源代码

├── static // 静态资源

└── package.jspon // 项目信息和依赖配置

src

├── api // 各种接口

├── assets // 图片等资源

├── components // 各种公共组件，非公共组件在各自view下维护

├── icons //svg icon

├── router // 路由表

├── store // 存储

├── styles // 各种样式

├── utils // 公共工具，非公共工具，在各自view下维护

├── views // 各种layout

├── App.vue //***项目顶层组件***

├── main.js //***项目入口文件***

└── permission.js //认证入口

5、运行项目

npm insall

npm install 失败可能是node版本问题：xx

npm run dev

6、登录页修改

将登陆相关请求接口改为静态数据，不请求接口

修改文件：\src\store\modules\user.js

注释掉：Login、GetInfo、LogOut三个方法，替换为如下代码：

Login({ commit }) {

  const data = {

  'token': 'admin'

  }

setToken(data.token)// 将token存储在cookie中

  commit('SET_TOKEN', data.token)

},

  

  GetInfo({ commit }) {

  const data = {

  'roles': [

  'admin'

  ],

  'name': 'admin',

  'avatar': 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif'

  }

  if (data.roles &&data.roles.length >0) { // 验证返回的roles是否是一个非空数组

  commit('SET_ROLES', data.roles)

  }

  commit('SET_NAME', data.name)

  commit('SET_AVATAR', data.avatar)

},

  

  // 登出

  LogOut({ commit, state }) {

  return new Promise((resolve, reject) => {

    commit('SET_TOKEN', '')

    commit('SET_ROLES', [])

    removeToken()

    resolve()

  })

}

说明：token是我们手动配置的，如果过期后续自行生成，后续会有TokenHelper类生成token，在此不用关注

修改\src\util\request.js

config.headers['token'] = getToken()

6.1标题

index.html（项目的html入口）

<title>尚医通管理平台系统</title>

6.2 国际化设置

打开 src/main.js（项目的js入口），第7行，修改语言为 zh-CN，使用中文语言环境，例如：日期时间组件

import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n

6.3 导航栏文字

src/views/layout/components（当前项目的布局组件）

src/views/layout/components/Navbar.vue

13行

<el-dropdown-item>

首页

</el-dropdown-item>

17行

6.4 面包屑文字

src/components（可以在很多项目中复用的通用组件）

src/components/Breadcrumb/index.vue

38行

meta: { title: '首页' }

6.5 关闭校验

打开 config/index.js，配置是否开启语法检查

useEslint: false,

6.6 复制icon图标

将vue-element-admin/src/icons/svg 中的图标复制到 guli-admin项目中

7、路由分析

7.1 入口文件中调用路由

src/main.js

...

  import router from './router'//引入路由模块

  ...

new Vue({

  el: '#app',

  router,

  store,

  render: h => h(App)

})

7.2 路由模块中定义路由

src/router/index.js

...

  export const constantRouterMap = [

...

  

  { path: '*', redirect: '/404', hidden: true }

]

  

  export default new Router({

  // mode: 'history', //后端支持可开

  scrollBehavior: () => ({ y: 0 }),

  routes: constantRouterMap

  })

说明：我们后续菜单路由就在此配置