前言

• 🍜 Resolve.alias
• ‍🚀 UnoCSS
• 🚠 Less
• 🍦 VueUse
• 🍔 Unplugin-vue-components
• 🍟 Vue-router
• 🍕 Pinia
• 🍰 Unplugin-auto-import
• 🍨 Iconify

在线预览：stackblitz.com/edit/vitejs…

初始化项目

在线

Vite-Vue3-TS： Stackblitz

本地

# 创建一个空的项目 vite-vue3-ts
npm create vite@latest my-vue-app --template vue-ts
# 安装依赖
cd my-vue-app && pnpm i
# 启动项目
npm run dev

配置路径别名

在项目开发中，引入组件或者 assets 的时候，相对路径写的很是心力交瘁，别名必不可少

引用 path 的时候，ts 会报找不到 Cannot find module 'path' or its corresponding type declarations.(2307)，需要做点小处理

pnpm i -D @types/node

// vite.config.ts
import path from 'path'
export default defineConfig({
  resolve: {
    alias: {
      '~': path.resolve(__dirname,'src')
    }
  },
})

// ts.config.json
{
  "compilerOptions": {
    "types": ["node"],
    "paths": {
        "~/*": ["./src/*"],
    },
  },
}

引入 CSS 插件

• 🥯 UnoCSS
• 🚠 less

# 安装UnoCss
npm i -D unocss

# 安装less
pnpm i -D less
pnpm i -D less-loader

// vite.config.ts
import Unocss from 'unocss/vite'

export default {
  plugins: [
    Unocss({ /* options */ }),
  ],
}

// main.ts
import 'uno.css'

这样就引入成功UnoCSS。使用文档可以参考 Tailwind CSS 或者 uno

<template>
  <div class=" text-green-400 text-xl">UnoCss</div>
</template>

引入常用插件

• 🍦 VueUse
• 🍔 Unplugin-vue-components
• 🍟 Vue-router
• 🍕 Pinia
• 🍰 unplugin-auto-import
• 🍨 @iconify

# vueuse -- 一个vue的Composition API函数集合
pnpm i @vueuse/core

# unplugin-vue-components -- 自动按需导入组件
npm i unplugin-vue-components

# 以上项目中引入需要 unplugin-auto-import 插件

# vue-router -- vue路由
pnpm i vue-router

# pinia -- vue 全局状态存储库
pnpm i pinia

# unplugin-auto-import -- 自动导入
pnpm i unplugin-auto-import

# @iconify -- 开源 svg 图标集
pnpm i -D @iconify-json/carbon

简单配置 vue-router

// src/router/index.ts
import type { App } from 'vue'
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Layout from '../layout/index.vue'
import { createRouterGuard } from './guard'
const routes: RouteRecordRaw[] = [
  {
    path: '/',
    component: () => import(/* webpackChunkName: "HelloWord" */ '../views/index.vue'),
    name: 'HelloWord',
    meta: { hidden: false , hasAuth: false}, /
  },
]

export const router = createRouter({
  history: createWebHistory(), // 二级路由 createWebHistory('dist') + vite.config.ts defineConfig({ base:'dist' })
  routes,
})

export async function setupRouter(app: App) {
  app.use(router)
  createRouterGuard(router)
  await router.isReady()
}

很简单的路由拦截，一般我会在这里加一个 nprogress

// src/router/guard/index.ts
export function createRouterGuard(router: Router) {
  router.beforeEach(async (to: any) => {
    if (to.meta.hasAuth) {
      console.log('需要校验');
    }else{
      console.log('不需要校验');
    }
  })
  router.afterEach((to: any) => {
    console.log('下一个路由');
  })
}

最后在 main.ts中引入就大功告成

// src/main.ts
import { setupRouter } from './router'

async function setupApp() {
  const app = createApp(App)
  // 挂载路由
  await setupRouter(app)
  app.mount('#app')
}
setupApp()

简单配置 Pinia

// src/store/index.ts
import type { App } from 'vue'
import { createPinia } from 'pinia'

export function setupStore(app: App) {
  const store = createPinia()
  app.use(store)
}
export * from './modules'

// src/store/modules/index.ts
export * from './user'

// src/store/modules/user.ts
import { defineStore } from 'pinia'

export const useUserStore = defineStore({
  id: 'userInfo',
  state: () => {
    return {
      name: 'Tom',
      age: '',
    }
  },
  getters: {},
  actions: {},
})

使用方法：

import { useLoginInfoStore } from '~/store' // 当配置了 unplugin-auto-import后， 这里的import 不再需要
const store = useLoginInfoStore()
console.log(store.name); // Tom

简单配置 unplugin-vue-components

指定组件的文件夹和生成的注册文件位置。也可以UI组件库解析

// vite.config.ts
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    Components({
      // 指定组件位置，默认是src/components
      dirs: ['src/components/common'],
      extensions: ['vue'],
      // 配置文件生成位置
      dts: 'components.d.ts'
    })
  ]
})

unplugin-auto-import 配置使用

可以很方便的配置引入vue、vueuse、pinia或者封装好的接口或者自定义的一些函数

详细配置文档请参考官网：github.com/antfu/unplu…

// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    AutoImport({
      imports: [
        'vue',
        'vue-router',
        '@vueuse/head',
        '@vueuse/core',
      ],
      dts: 'src/auto-imports.d.ts',
      dirs: [
        'src/store',
      ],
      vueTemplate: true,
    }),
  ],
})

这样配置，就会将vue、vue-router、vueuse和src/store文件夹下的导出自动导入。全局使用的时候无需再次 import

TS 配置

在vue3的开发过程中，使用钩子函数（比如 onMounted）需要先 import 。但是使用 unplugin-auto-import不再需要引入就可以使用，因为这个插件，生成了 auto-imports.d.ts 这个文件，里面自动引入。不过在开发的时候，编辑器还是会报 ts 找不到，这里就需要配置一下 ts.config.json

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    "types": ["node"],
    "paths": {
			"~/*": ["./src/*"],
		},
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "vite.config.*",
    "components.d.ts",
    "auto-imports.d.ts",
  ],
  "exclude": [
      "/dist/**",
      "node_modules"
   ],
  "references": [{ "path": "./tsconfig.node.json" }]
}

@iconify-json/carbon

iconify是一款强大丰富的开源svg图标库，这里使用的是carbon风格的图标集。 pnpm i -D @iconify-json/carbon 安装后即可使用。

<div i-carbon-logo-github />