vue3.x+elementPlus+axios+ts

499 阅读1分钟

创建项目

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
}