vue3+ts项目搭建

vue3+vite+ts+element-plus+pinia+vue-router(4+)+axios

项目使用到的框架

先使用vite创建项目

npm create vite@latest vite-project

cd vite-project

npm run dev

文件目录结构

main.ts里面使用@报错

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import './style.css'
import App from './App.vue'
import router from '@/router'

const app = createApp(App)
app.use(router).use(ElementPlus).mount("#app");

解决方案增加vite.config.ts和tsconfig.json的配置

vite.config.ts

import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    })
  ],
  // 别名
  resolve: {
    alias: {
      //设置别名
      '@': resolve(__dirname, './src')
    }
  }
})

tsconfig.json

  "compilerOptions": {
    "baseUrl": "./",  // 解决@ ts报错
    "paths": {
      "@/*": ["./src/*"]  // 解决@ ts报错
    },
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    "noEmit": true
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

router引入

1、现在main.ts引入 npm i vue-router@4 -S import router from '@/router'

app.use(router)

router/index.ts

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'

// 对RouteRecordRaw类型进行扩展
export type AddRouteRecordRaw = RouteRecordRaw & {
  hidden?: boolean
}
const viewsRouter = [
    {
        path: '/login',
        name: 'login',
        hidden: true, // 自定义添加的属性
        meta: {
        title: '登录'
        },
        component: () => import('@/pages/login/index.vue')
    },
    {
        path: '/:pathMatch(.*)', // 或者 /:pathMatch(.*)*
        name: '404',
        hidden: false, // 自定义添加的属性
        meta: {
        title: '404'
        },
        component: () => import('@/pages/404.vue')
    }
];

const router = createRouter({
  history: createWebHistory(),
  routes: viewsRouter as AddRouteRecordRaw[]
})
 
export default router

pinia引入 axios引入