vue3项目搭建

后台管理系统

创建用户 => 分配角色 => 分配权限

创建vue项目

方式一：
    基于webpack
    vue create
方式二：
    基于vite工具
    npm init vue@latest

搭建项目

npm init vue@latest
npm install

安装插件：

"Vue.volar", "Vue.vscode-typescript-vue-plugin"

vite.config.ts
对vite的配置文件

export default defineConfig({
  plugins: [vue()],  // 对vue的配置
  resolve: {
    alias: {   // 对打包路径的配置
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

tsconfig.config.json
tsconfig.json

tsconfig.json

{
   // 继承自 @vue/tsconfig/tsconfig.web.json
  "extends": "@vue/tsconfig/tsconfig.web.json",
  // ts要编译的文件
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  // 给 vscode 设置的路径和别名
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  // 引用 tsconfig.config.json  最好在tsconfig.config.json里修改
  "references": [
    {
      "path": "./tsconfig.config.json"
    }
  ]
}

tsconfig.config.json   最好在这个文件里修改

{
  "extends": "@vue/tsconfig/tsconfig.node.json",
  "include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "playwright.config.*"],
  "compilerOptions": {
    "composite": true,
    "types": ["node"]
  }
}