该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

vite + vue3 + ts + pinia + elementui 基础后台管理系统

根据https://gitee.com/hellozdq/vue3-admin-ts 更新第二版本
vue3 更改成 <script setup>
vuex 更改成pinia
elementui 更改成最新版本

版本功能

  • 具备侧边栏、标签导航栏路由页面跳转
  • 权限控制
  • 代码规范(需要安装Volar)

目录

  • src
    • assets 静态资源
      • images 图片
    • common 公共资源
      • directives 自定义指令
        • dialogDrag dialog拖拽
        • permission 权限
      • auth.ts 全局方法(token)
      • color.ts 全局颜色
      • index.ts 公共方法
      • interface.ts 公共interface
      • regexp.ts 公共正则表达式
      • request.ts 请求方法
    • components 公共组件
    • layout 布局组件
      • HeaderView 头部组件
      • Sidebar 侧边栏
      • AppMain 主页面
      • index 整个布局
    • router 路由
    • store 全局通讯(pinia)
    • styles 公共样式
      • element.scss 修改elementui组件样式
      • index.scss 公共样式
      • variables 导出样式(vite 不支持)
    • views 页面
      • about 测试页面
      • home 首页
      • login 登录页
      • redirect 重定向页
      • 404
    • App.vue
    • env.d.ts 声明文件
    • permission.ts 权限设置
    • shims-vue.d.ts 声明文件(声明.vue 的引入)
  • .eslintrc.js 页面规范
  • .prettierrc.js 页面规范
  • index.html
  • package.json
  • README.md
  • tsconfig.json
  • tsconfig.node.json
  • vite.config.ts
  • yarn-error.log
  • yarn.lock

创建

yarn create @vitejs/app // 默认vue3

引入 router

yarn add vue-router@4 --save-dev

1、在/router 建路由
2、在main.ts 引入
import router from './router/index'

设置动态路由和静态路由
动态路由根据permission.ts 中获取权限进行动态显示

建文件夹views

引入pinia(替代vuex 使用)

yarn add pinia --save

pinia 使用

<!-- main.ts 引入 -->
import { createPinia } from 'pinia'
createApp(App).use(createPinia())

<!-- 在/store创建对应的store 文件 -->
import { defineStore } from 'pinia'

export const layoutStore = defineStore({
  // id: 必须的,在所有 Store 中唯一
  id: 'layoutStore',
  // state: 返回对象的函数
  state: () => ({
    a: 2
  }),
  // getter
  getter: {
    c(state) {
      return this.count ** 2;
      <!-- 
      或者
      return state.count ** 2;
       -->
    },
  },
  // 操作的方法
  actions: {
    b() {}
  }
})

<!-- vue 文件中使用 -->
<!-- 例如 /layout/index -->
import { layoutStore } from '@/store/layoutStore.js'


pinia持久化 pinia-plugin-persist

yarn add pinia-plugin-persist

<!-- 使用 在main.ts 调用-->
createPinia().use(piniaPluginPersist)

vite.config.ts 配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { loadEnv } from 'vite'

// const path = require('path')
import path from 'path'

console.log(process.env.NODE_ENV)

export default ({ mode }) => {
  return defineConfig({
    base: loadEnv(mode, process.cwd()).VITE_NODE_ENV === 'product' ? '/' : './',
    server: {
      open: '/',
      host: 'localhost', // 使用127.0.0.1 会存在没法跨域请求
      port: 8080,
      proxy: {
        '/api': {
          target: 'http://127.0.0.1:5000',
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, '')
        }
      }
    },
    css: {
      preprocessorOptions: {
        scss: {
          // eslint-disable-next-line quotes
          additionalData: "@import '@/styles/index.scss';" //全家引入scss
        }
      }
    },
    resolve: {
      alias: {
        '@': resolve('src')
      }
    },
    plugins: [vue()]
  })
}

function resolve(dir: string) {
  return path.resolve(__dirname, dir)
}


<!-- 问题 -->
resolve 不存在
通过 yarn add --save-dev @types/node 引入
const path = require('path')

function resolve(dir: string) {
  return path.resolve(__dirname, dir)
}

<!-- @符号问题 -->
Cannot find module '@/store/layout' or its corresponding type declarations.Vetur(2307)
<!-- 在tsconfig.json中配置 -->
{
 "compilerOptions": {
   "baseUrl": ".",
   "paths": {
     "@/*": ["src/*"]
   }
 }
}

引入sass

yarn add sass sass-loader node-sass --save-dev

全局样式在vite.config.ts配置, 会出现在首次加载到登录也样式没引入的问题
解决:在main.ts 中引入

安装 elementui

1、yarn add element-plus
 
2、main.ts引入
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

<!-- 引入图标 -->
yarn add @element-plus/icons-vue

安装 eslint

yarn add --dev eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier-eslint eslint-config-prettier

封装请求

引入 axios yarn add axios

需下载Vscode 插件(引入vue3 的vue会提示错误)

Vue Language Features (Volar)

volar 导致elementui-plus 的问题(JSX 元素类型“El-”不具有任何构造签名或者调用签名)

<!-- tsconfig.json 里修改 -->
{
  "vueCompilerOptions": {
    "experimentalSuppressInvalidJsxElementTypeErrors": true
  }
}
或者
{
"types": [
    "element-plus/global"
]
}

添加自定义指令拖拽、按钮权限

src/common/directives/

空文件

简介

暂无描述 展开 收起
取消

发行版

暂无发行版

贡献者

全部

近期动态

不能加载更多了
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化