笔记

Appearance

大纲

项目配置 ​

安装模板 ​

shell
npm create vite
pnpm i

这里示例基于 vue-ts

安装依赖 ​

shell
pnpm i vue-router pinia
pnpm i -D pug sass @types/node
shell
pnpm i axios dayjs
pnpm i -D unplugin-auto-import unplugin-vue-components

配置 vite ​

js
import { resolve } from "path";

export default defineConfig({
  resolive: {
    alias: {
      "@": resolve(__dirname, "./src"),
    },
  },
  plugins: [],
});

配置 ts ​

json
{
  // ...
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"],
  "vueCompilerOptions": {
    "plugins": ["@volar/vue-language-plugin-pug"]
  }
}

常用插件 ​

  • unplugin-vue-components: 自动导入组件
  • unplugin-auto-import: 自动导入 api
  • vite-plugin-pages: 依据目录自动生成路由

vite.config.ts

js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path";
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
// import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import Pages from 'vite-plugin-pages'

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: ["vue", 'vue-router'],
      dts: "auto-import.d.ts",
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      dirs: ['src/comp'], // 指定目录将自动注册为组件，默认 "src/components"
      // resolvers: [ElementPlusResolver()], // element or others
    }),
    Pages({
      dirs: "src/page"  // 默认 src/pages
      extensions: ['vue'] // 默认 ['vue', 'ts', 'js']
    })
  ]
})

tsconfig.json

json
{
  // ...
  "include": ["auto-import.d.ts", "components.d.ts"]
}

vite-env.d.ts

ts
/// <reference types="vite-plugin-pages/client" />
ts
import routes from "~pages";

const router = createRouter({
  history: createWebHistory(),
  routes,
});

说明

  • unplugin-vue-components: 若组件为 index.vue, 则取其父级命名
  • vite-plugin-pages：若叶子为 index.vue ，则取其父级目录