blog/source/_posts/vite.md

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

# 初始化

## 创建项目

```shell
yarn create vite
cd ./module-name
yarn
```



## 引入常用依赖

### 功能

```shell
yarn add -S vue-router
```

### 界面

```shell
yarn add -D naive-ui
```

### 插件

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



# 配置

## vite.config.ts

```typescript
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

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



## router.ts

```typescript
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

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

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

app.mount('#app')

```