目录
一、创建项目
二、整合router4
三、整合vuex4
1、目录结构
2、store/index.ts
3、modules/name/index.ts
4、文件中使用xxx.vue
四、整合element-plus
五、别名配置
六、Normalize.css 的安装使用
七、Vue jsx支持
八、mock数据
1、安装依赖
2、vite.config.ts配置
3、定义mock接口
4、使用
一、创建项目
npm init vite@latest my-vue-app -- --template vue
安装完成之后你会发现，.vue文件引入时没有提示，且编辑器提示找不到它
搜索安装Volar
二、整合router4
npm install vue-router@4
新建router文件夹，建立index.ts
import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
import Home from "@/pages/Home/index.vue";
const routes: Array<RouteRecordRaw> = [
{
path: "/",
name: "Home",
component: Home
}
];
const router = createRouter({
history: createWebHashHistory(),
routes
});
export default router;
三、整合vuex4
npm install vuex@next --save
当使用组合式 API 编写 Vue 组件时，您可能希望 useStore 返回类型化的 store。为了 useStore 能正确返回类型化的 store，必须执行以下步骤：
1、定义类型化的 InjectionKey
2、将 store 安装到 Vue 应用时提供类型化的 InjectionKey
3、将类型化的 InjectionKey 传给 useStore 方法。
1、目录结构
2、store/index.ts
//持久化插件安装
npm install vuex-persistedstate --save
// store/index.ts
import { InjectionKey } from "@vue/runtime-core"
import { createStore, Store, useStore as baseUseStore } from "vuex"
// vuex持久化插件
import createPersistedState from "vuex-persistedstate"
import { store as name, NameState } from "./moudles/name/index"
//定义RootState接口，将所有模块类型放入
export interface RootState {
name: NameState // 模块
count: number // 自身state
}
// 定义key，将其传入带vue.use中
export const key: InjectionKey<Store<RootState>> = Symbol()
export const store: Store<RootState> = createStore({
state: {
count: 28,
},
modules: { name },
plugins: [
createPersistedState({
paths: ["name"],
}),
],
})
// 通过封装后的方法在vue文件中调用
export function useStore() {
return baseUseStore(key)
}
3、modules/name/index.ts
// modules/name/index.ts
import { Module } from "vuex"
import { RootState } from "@store/index"
// 定义模块自身的接口
export interface NameState {
authorName: string
}
// 第一个泛型参数为当前的state类型定义, 第二个泛型参数为顶级state的类型定义
// 只要定义了state的类型，在所有使用state的地方均会自动推断
export const store: Module<NameState, RootState> = {
namespaced: true,
state: (): NameState => ({
authorName: 'lcy'
}),
mutations: {
changeName(state: NameState, name: string) {
state.authorName = name
},
},
}
4、文件中使用xxx.vue
<script setup lang="ts">
import { useStore } from "@store/index";
import { computed } from "vue";
const store = useStore();
const vuexMoudlesTest = computed(() => store.state.name.authorName);
const count = computed(() => store.state.count);
const changeName = ()=>{
store.commit('name/changeName','兄弟，牛逼！')
}
</script>
<template>
<div>authorName:{{ vuexMoudlesTest }}</div>
<div>count:{{ count }}</div>
<button @click="changeName">changeName</button>
</template>
四、整合element-plus
# NPM
$ npm install element-plus --save
# Yarn
$ yarn add element-plus
# pnpm
$ pnpm install element-plus
按需导入：自动导入
npm install -D unplugin-vue-components unplugin-auto-import
// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default {
plugins: [
// ...
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
}
使用element-plus提供的tree-shaking开箱即用包
npm i unplugin-element-plus -D
// vite.config.js
// elementPlus提供的开箱即用的tree shaking功能
import ElementPlus from 'unplugin-element-plus/vite'
plugins: [
...
ElementPlus()
],
五、别名配置
//vite.config.ts
...
const { resolve } = require("path") //必须要引入resolve
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
...
],
// 配置别名
resolve: {
alias: {
"@": resolve(__dirname, "src"),
"@store": resolve(__dirname, "src/store"),
},
},
})
// tsconfig.json
{
"compilerOptions": {
...
"paths": {
"@/*":["src/*"],
"@store/*":["src/store/*"],
}
},
...
}
六、Normalize.css 的安装使用
（1）对于普通的 H5 项目，我们可以到其官网下载最新的 Normalize.css，然后在页面中引入使用。
（2）对于 Vue.js 项目，可以先进入项目文件夹中执行如下命令安装：
npm install --save normalize.css
（3）然后在 vue 的主文件中引入即可：
import 'normalize.css/normalize.css'
七、Vue jsx支持
仅限于在单文件组件中去解析jsx，和后缀名为tsx或jsx的解析不是一回事儿
npm i @vitejs/plugin-vue-jsx --dev
八、mock数据
1、安装依赖
// 开发时依赖
npm i vite-plugin-mock -D
// 运行时依赖
npm i mockjs -S
2、vite.config.ts配置
// vite.config.ts
......
// 数据mock配置
import { UserConfigExport, ConfigEnv } from 'vite'
import { viteMockServe } from 'vite-plugin-mock'
// https://vitejs.dev/config/
export default ({ command }: ConfigEnv): UserConfigExport => {
return {
plugins: [
......
viteMockServe({
// ↓解析根目录下的mock文件夹
mockPath: "mock",
localEnabled: command === 'serve',
supportTs: true, // 打开后，可以读取 ts 文件模块。 请注意，打开后将无法监视.js 文件。
watchFiles: true, // 监视文件更改 更改mock的时候，不需要重新启动编译
}),
],
......
}
}
3、定义mock接口
// test.ts
import { MockMethod } from 'vite-plugin-mock'
export default [
{
url: '/api/login',
method: 'post',
timeout: 2000,
response: ({ body }) => {
console.log(body);
if (body.name === 'lcy' && body.password==='lcy66666') {
return {
code: 200,
data: { },
msg: '登录成功'
}
} else {
return {
code: 0,
data: { },
msg: '用户名或密码错误'
}
}
},
},
] as MockMethod[]
4、使用
fetch("/api/login", {
method: "POST",
body: JSON.stringify(ruleForm),
})
.then(res => res.json())
.then(res => {
if (res.code === 200) {
router.replace("/home");
} else {
ElMessage.error(res.msg);
}
});
提供CDN加速