blog/source/_posts/vite.md

title	date	tags	category
Vite新建vue项目模板（自用）	2022-03-15 00:00:00	前端 编程 vue vite	技术

初始化

创建项目

yarn create vite
cd ./module-name
yarn

引入常用依赖

功能

yarn add -S vue-router

界面

yarn add -D naive-ui

插件

yarn add -D unplugin-vue-components
yarn add -D unplugin-auto-import
yarn add -D @types/node

配置

vite.config.ts

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [NaiveUiResolver()]
    }),
    AutoImport({
      imports: ['vue', 'vue-router',]
    })
  ],
  resolve: {
    // 配置路径别名
    alias: {
      '@': resolve('./src'),
    },
  },
})

tsconfig.json

    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }

router.ts

import { createRouter, createWebHistory } from "vue-router";

const routes = [
    {
        path: '/',
        name: 'index',
        component: () => import('@/components/Index.vue')
    }
]

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

export default router

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from '@/modules/router'

const app = createApp(App)
app.use(router)

app.mount('#app')