131 lines
1.7 KiB
Markdown
131 lines
1.7 KiB
Markdown
---
|
||
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')
|
||
|
||
```
|
||
|