创建 Vue3 + Vite 项目
大约 3 分钟
创建 Vue3 + Vite 项目,并初始化常见的依赖。
Node.js 版本
过低的 Node.js 版本(14 和 14 以下)不受支持,请升级的 Node.js 16 / 18 或者更高的版本。
1. 使用 pnpm
本文全面使用 pnpm
,如果没有安装 pnpm
,安装命令如下:
npm i -g pnpm
更新 pnpm
:
pnpm add -g pnpm
2. 创建 Vite 项目
2.1 初始化项目
pnpm create vite
下面进行配置:
- 项目名,任意,遵循 Slug 命名
- 项目类型 Vue
- TypeScript 或 JavaScript
安装依赖:
cd my-proj
pnpm i
2.2 安装常见库
pnpm add vue-router
pnpm add pinia
pnpm add pinia-plugin-persistedstate
pnpm add axios
pnpm add mitt
pnpm add @vueuse/core
pnpm add less -D
3. 配置项目
3.1 基础配置
vite.config.ts
的常见配置:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
server: {
host: '0.0.0.0',
port: 3000,
proxy: {
'/api': {
target: 'http://localhost:8081',
rewrite: path => path.replace(/^\/api/, '')
}
}
},
resolve: {
alias: {
'@': '/src'
}
}
})
现在进行调试:
pnpm dev
看到页面证明配置无误。
3.2 配置 Axios
新建 src/request/index.ts
文件,然后复制下面的代码:
import axios from 'axios'
const request = axios.create({
baseURL: '/api/',
timeout: 20000,
headers: {
'Content-Type': 'application/json'
}
})
request.interceptors.request.use(config => {
if (config.headers === undefined || config.headers.Authorization !== undefined) {
return config
}
const token = localStorage.getItem('token')
if (token) {
config.headers.Authorization = `Bearer ${token}`
}
return config
}, error => {
// TODO: 错误处理
console.log(error, '请求错误:请替换为你的错误处理逻辑')
return Promise.reject(error)
})
request.interceptors.response.use(response => {
if (response.data.code !== 0) {
// TODO: 错误处理
console.log(response.data, '响应错误:请替换为你的错误处理逻辑')
return Promise.reject(response)
}
return response
}, error => {
console.log(error)
if (error.response && error.response.status === 401) {
// TODO: 错误处理
console.log(error, '未授权错误:请替换为你的错误处理逻辑')
} else {
// TODO: 各种不同类型的错误处理
console.log(error, '网络错误:请替换为你的错误处理逻辑')
}
return Promise.reject(error)
})
export default request
各种错误处理逻辑可以自行定义。
3.3 配置 Vue Router
创建 src/router/index.ts
:
import { createRouter, createWebHistory } from 'vue-router'
import { routes } from './config'
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
创建 src/router/config.ts
:
import { RouteRecordRaw } from 'vue-router'
import Home from '../views/Home.vue'
export const routes: RouteRecordRaw[] = [
{
path: '/',
name: 'Home',
component: Home,
meta: {
title: '首页',
keepAlive: true,
requiresAuth: false
}
}
]
3.4 配置 Pinia
创建 src/store/index.ts
:
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const store = createPinia()
store.use(piniaPluginPersistedstate)
export default store
创建应用级别存储,创建 src/store/app.ts
:
import { defineStore } from 'pinia'
export const useAppStore = defineStore({
id: 'app',
state: () => {
return {
// 此处填写应用级别 store 项目
}
},
getters: {
},
actions: {
},
persist: {
key: 'app',
storage: window.localStorage
}
})
可选 创建用户存储,创建 src/store/user.ts
:
import { defineStore } from 'pinia'
export const useUserStore = defineStore({
id: 'user',
state: () => {
return {
user: {},
token: ''
}
},
getters: {
},
actions: {
},
persist: {
key: 'user',
storage: window.localStorage
}
})
3.5 编写第一个页面
创建 src/views/Home.vue
,然后编写一些内容,例如:
<script setup lang="ts">
</script>
<template>
<h2>Hello World</h2>
<p>这是段落</p>
</template>
<style lang="less" scoped>
</style>
为了让页面可见,我们先删除 src/style.css
、src/components/HelloWorld.vue
和 src/assets/vue.svg
,然后修改 main.ts
为下面的内容:
import { createApp } from 'vue'
import router from './router'
import App from './App.vue'
import store from './store'
const app = createApp(App)
app.use(store).use(router).mount('#app')
下面修改 App.vue
:
<script setup lang="ts">
console.log('全局环境:', import.meta.env)
</script>
<template>
<router-view></router-view>
</template>
<style lang="less" scoped>
</style>
下面修改 index.html
的一些项目:
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home</title>
然后将 public/vite.svg
修改为你的图标,保存 public/favicon.svg
,这样图标就是统一的样式了。