创建项目
npm init vite vue-element-admin // 选择ts版本
cnpm i // 安装依赖
项目报错
- vetur工作区禁用,改用Volar
Router
cnpm install vue-router@4 --save
// store.index.ts
import { createStore } from 'vuex'
// 自动引入 modules下的所有store模块
const files= import.meta.globEager('./modules/*.ts')
let modules: any = {}
Object.keys(files).forEach((c: string) => {
const module = files[c].default
const moduleName: string = c.replace(/^\.\/(.*)\/(.*)\.\w+$/, '$2')
modules[moduleName] = module
})
const Store : object = createStore({
modules: {
...modules
},
})
export default Store
// store.modules.app.ts
const app : object = {
namespace: true,
state: {
title: '后台管理系统', // 系统名称
},
mutations: {
setTitle (state: any,title: string) {
state.title = title
},
}
}
export default app
// main.ts
import Store from './store'
// @ts-ignore 这里ts说要install 忽略
app.use(Store)
Vuex
npm install vuex@next --save
问题记录
- 找不到模块“vue”或其相应的类型声明
// env.d.ts
declare module '*.vue' {
import { ComponentOptions } from 'vue'
const componentOptions: ComponentOptions
export default componentOptions
}