注：本文中我使用的是 pnpm，也可以替换成 npm。
一、创建 vue3 项目
Vite是一种新型前端构建工具，能够显著提升前端开发体验。
兼容性注意
Vite 需要 Node.js 版本 18+，20+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。
1、 在需要创建项目的目录下打开 cmd，并输入以下命令：
npm create vite@latest
2、 之后根据自己所需按照提示操作即可，这里是使用 ts 创建 vue3 项目。
3、 随后使用 vs code 打开项目执行对应命令即可完成项目的创建。
二、修改配置文件
这里我们需要注意到 vite.config.ts 这个配置文件，之后我们的配置都会写在这里。
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
export default defineConfig({
// 基本路径
base: './',
plugins: [
vue()
],
resolve: {
// src 别名配置
alias: {
"@": resolve(__dirname, 'src'),
},
// 使用路径别名时想要省略的后缀名，可以自己增减
extensions: ['.js', '.json', '.ts']
},
server: {
// 端口号
port: 8080,
// 监听所有地址
host: '0.0.0.0',
// 服务启动时是否自动打开浏览器
open: true,
// 允许跨域
cors: true,
// 自定义代理规则
proxy: {},
},
build: {
// 设置最终构建的浏览器兼容目标
target: 'es2015',
// 构建后是否生成 source map 文件
sourcemap: false,
// chunk 大小警告的限制（以 kbs 为单位）
chunkSizeWarningLimit: 2000,
// 启用/禁用 gzip 压缩大小报告
reportCompressedSize: false,
},
})
在 ts 中，可能会提示找不到 path，可执行以下命令安装：
pnpm install @types/node --save-dev
别名配置：
在 tsconfig.json 中加入配置
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"module": "ESNext",
"lib": [
"ES2020",
"DOM",
"DOM.Iterable"
],
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "preserve",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
/* 别名配置 */
"baseUrl": ".",
"paths": {
"@/*": [
"src/*"
],
},
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue"
],
"references": [
{
"path": "./tsconfig.node.json"
}
],
}
之后即可通过@来代指src目录了。
三、安装 router
1、 在项目目录的控制台中输入命令安装 router：
pnpm install vue-router@4
2、 为了方便测试，先在 src 目录下创建 views 目录，并在 views 目录下创建 index.vue 和 about.vue 文件
index.vue
<template>
<div>
<h1>这是主页！</h1>
<button @click="to">前往</button>
</div>
</template>
<script setup lang="ts">
import { router } from '@/router';
function to() {
router.push('/about')
}
</script>
about.vue
<template>
<div>
<h1>这是关于页！</h1>
<button @click="to">前往</button>
</div>
</template>
<script setup lang="ts">
import { router } from '@/router';
function to() {
router.push('/')
}
</script>
3、 随后在 src 目录下创建目录 router，并在 router 目录下创建 index.ts 文件。
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
const routes: Array<RouteRecordRaw> = [
{
path: "/",
component: () => import("@/views/index.vue")
},
{
path: "/about",
component: () => import("@/views/about.vue")
},
];
export const router = createRouter({
history: createWebHistory(),
routes,
});
4、 在 main.ts 中引入
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import { router } from './router/index'
createApp(App)
.use(router)
.mount('#app')
5、 最后修改 App.vue 文件
<script setup lang="ts">
import { RouterView } from 'vue-router'
</script>
<template>
<RouterView></RouterView>
</template>
<style scoped>
</style>
四、引入 element plus
1、 引入依赖
pnpm install element-plus
2、全局引入
在 main.ts 中引入
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
createApp(App)
.use(ElementPlus)
.mount('#app')
五、添加环境变量
1、 在与 src 同级目录下分别创建.env.development 和.env.production 文件
.env.development
VITE_USER_NODE_ENV=dev
VITE_PARAM=dev
VITE_BASE_URL="http://localhost:8081/v1/api"
.env.production
VITE_USER_NODE_ENV=prod
VITE_PARAM=prod
VITE_BASE_URL='https://api.example.com/v1/api'
需要注意的是，VITE_ 前缀是必须要有的，否则会获取不到
2、使用
import.meta.env.变量
// 例如
import.meta.env.VITE_BASE_URL
六、引入 axios
1、引入 axios
pnpm install axios
2、封装统一请求
在 src 目录下新建 utils 目录，然后在 utils 目录下创建 request.ts
import axios, { InternalAxiosRequestConfig, AxiosResponse } from "axios"
import { ElMessage } from 'element-plus'
// 创建 axios 实例
const request = axios.create({
baseURL: import.meta.env.VITE_BASE_URL,
timeout: 10000,
headers: { "Content-Type": "application/json;charset=utf-8" },
});
// 请求拦截器
request.interceptors.request.use(
(config: InternalAxiosRequestConfig) => {
const token = window.sessionStorage.getItem('token')
if (token) {
config.headers.Authorization = `Bearer ${token}`
}
return config
},
(error: any) => {
return Promise.reject(error)
}
);
// 响应拦截器
request.interceptors.response.use(
(response: AxiosResponse) => {
const data = response.data;
if (data.code === 200) {
return response.data;
}
ElMessage.error(data.msg || "系统出错");
return Promise.reject(new Error(data.msg || "Error"));
},
(error: any) => {
if (error.response.data) {
ElMessage.error(error.response.data.msg || "系统出错");
}
return Promise.reject(error.message);
}
);
// 导出 axios 实例
export default request;
4、编写 api 请求
在 src 下创建 api 目录，定义一个 page 对象,用于接收分页返回来的数据
page.ts
export interface Page<T> {
records: Array<T>,
total: number,
}
在 api 下创建 test 目录，并创建 test.ts 和 types.ts 文件
test.ts
import request from "@/utils/request"
import { AxiosPromise } from "axios";
import { HotArticleQuery, HotArticleVo } from './types'
import { Page } from "../page";
// 入参是HotArticleQuery，返回体是Page<HotArticleVo>
export function getArticleApi(queryParams?: HotArticleQuery) : AxiosPromise<Page<HotArticleVo>> {
return request({
url: '/article/list',
method: 'post',
data: queryParams
})
}
types.ts
// 请求参数
export interface HotArticleQuery {
pageSize: number;
pageIndex: number;
searchKey: string;
}
// 返回分页数据的具体参数
export interface HotArticleVo {
id: number;
title: string;
}
调用
<template>
<div>
<h1>这是主页！</h1>
<el-button @click="to">前往</el-button>
<el-button @click="getArticleList">获取</el-button>
</div>
</template>
<script setup lang="ts">
import { getArticleApi } from '@/api/test/test'
import { HotArticleQuery, HotArticleVo } from '@/api/test/types'
import { Page } from '@/api/page'
import { router } from '@/router';
import { reactive, ref } from 'vue';
const query = reactive<HotArticleQuery>({
pageIndex: 1,
pageSize: 10,
searchKey: ''
})
const articleData = ref<Page<HotArticleVo>>();
function getArticleList() {
getArticleApi(query).then(res => {
articleData.value = res.data
console.log(articleData.value.records)
console.log(articleData.value.total)
})
}
function to() {
router.push('/about')
}
</script>
七、状态管理 Pinia
1、安装
pnpm install pinia
2、在 main.ts 中引入
import { createPinia } from "pinia";
const pinia = createPinia();
createApp(App)
.use(pinia)
.mount('#app')
3、创建 store
在 src 目录下创建 store 目录，然后创建一个 user.ts 用于存放用户相关数据
import { defineStore } from 'pinia'
// 第一个参数是应用程序中 store 的唯一 id
export const useUsersStore = defineStore('users', {
// 配置项
state: () => {
// 这里假设有一些参数
return {
uid: 1,
username: 'admin',
exp: 100
}
}
})
4、使用 store
<el-button @click="get">测试pinia</el-button>
import { useUsersStore } from '@/store/user'
function get() {
const store = useUsersStore()
console.log(store)
// 或者
const { uid, username, exp} = useUsersStore()
console.log(uid)
console.log(username)
console.log(exp)
// 修改
store.exp = 200
// 重置
store.$reset()
console.log(store)
}
5、getter
在 user.ts 中定义一个 getters
import { defineStore } from 'pinia'
// 第一个参数是应用程序中 store 的唯一 id
export const useUsersStore = defineStore('users', {
// 配置项
state: () => {
return {
uid: 1,
username: 'admin',
exp: 100
}
},
getters: {
// 无参
addExp: (state) => {
return state.exp + 150
},
// 带参
addExpCustom: (state) => {
return (num: number) => state.exp + num
}
}
})
使用
console.log(store.addExp)
console.log(store.addExpCustom(180))
6、actions 属性
actions 属性类似于一个方法，我们可以在里面进行业务操作，例如发送请求等
export const useUsersStore = defineStore('users', {
// 配置项
state: () => {
return {
uid: 1,
username: 'admin',
exp: 100
}
},
getters: {
addExp: (state) => {
return state.exp + 150
},
addExpCustom: (state) => {
return (num: number) => state.exp + num
}
},
actions: {
showParam(param: string) {
console.log('传入的参数为：' + param)
}
}
})
使用
store.showParam('test')
注意：如果在开发过程中发现有一些样式不太对劲，可以试着把与main.ts同级的style.css文件里的样式注释掉，有奇效
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
