代码拉取完成,页面将自动刷新
根据https://gitee.com/hellozdq/vue3-admin-ts 更新第二版本
vue3 更改成 <script setup>
vuex 更改成pinia
elementui 更改成最新版本
yarn create @vitejs/app // 默认vue3
yarn add vue-router@4 --save-dev
1、在/router 建路由
2、在main.ts 引入
import router from './router/index'
设置动态路由和静态路由
动态路由根据permission.ts 中获取权限进行动态显示
yarn add pinia --save
<!-- 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'
yarn add pinia-plugin-persist
<!-- 使用 在main.ts 调用-->
createPinia().use(piniaPluginPersist)
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/*"]
}
}
}
yarn add sass sass-loader node-sass --save-dev
全局样式在vite.config.ts配置, 会出现在首次加载到登录也样式没引入的问题
解决:在main.ts 中引入
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
yarn add --dev eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier-eslint eslint-config-prettier
引入 axios yarn add axios
Vue Language Features (Volar)
<!-- tsconfig.json 里修改 -->
{
"vueCompilerOptions": {
"experimentalSuppressInvalidJsxElementTypeErrors": true
}
}
或者
{
"types": [
"element-plus/global"
]
}
src/common/directives/
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。