vite+vue3+ts项目搭建
一、项目搭建与配置引入
用到的库：vue3 ts vite less pinia vue-router axios element-plus
1.创建项目
yarn create vite
运行完成以后 输入项目名称和使用框架就创建好了
2.添加各种依赖
创建项目是就引入了vue3 ts vite了，就不用了我们自己装了
需要装的命令都来跑一跑
---------------------------------------------------------------------------------------------------------------------------------------------
less引入
yarn add less
vite自带了less-leader，所以不用再装了，现在直接就能用了，使用就直接在styl加个lang="less" 就能直接写less了
---------------------------------------------------------------------------------------------------------------------------------------------pinia引入
yarn add pinia
src目录下建一个stores文件夹，里面写你需要的各个状态管理器文件
例如，新建一个index.ts
src/stores/index.ts
import { defineStore } from "pinia"
export const useStore = defineStore('main', {
state: () => ({
// 这里面存数据
counter: 0,
}),
actions: {
// 这里面存方法集
increment() {
this.counter++
},
randomizeCounter() {
this.counter = Math.round(100 * Math.random())
},
},
})
main.ts也需要使用
import { createApp } from 'vue'
import { createPinia } from "pinia";
import App from './App.vue'
const app = createApp(App)
app.use(createPinia())
app.mount('#app')
使用stores
<script setup lang="ts"> import HelloWorld from './components/HelloWorld.vue'; import { useStore } from './stores'; // 因为是直接在stores下面创建的index.ts所以后面的index.ts可以省略，其他文件的就需要把*****.ts写出来 const stores = useStore() console.log(stores.$state); const ChangeMsg = ()=>{ stores.ChangeMsg() } </script> <template> <HelloWorld :msg="stores.$state.msg" /> <button @click="ChangeMsg">改变</button> </template> <style lang="less" scoped> </style>
如此这般,pinia的引入与使用就告一段落啦
pinia使用问题出现：在router里面使用pinia会报错，分析异常的地址：https://stackoverflow.com/questions/70710965/vue-cant-access-pinia-store-in-beforeenter-vue-router
原因：由于在router阶段pinia还未被实例化，所以pinia在现目前是不存在的，所以去取值也是会报错的
解决方案：将pinia创建的实例导出去，然后挂在到APP上，这样你再router的时候也能调用到pinia里面的东西了；pinia只会构建一个实例，你后面定义的其他store也是在这个实例上面的，所以不用担心你创建的其他store取不到（我自己通过看这些解析自己分析的，可能不太准确，有什么都可以在评论区指出，欢迎指错，大家一起学习）
改造pinai的index.ts
src/stores/index.ts
import { createPinia } from "pinia";
const pinia = createPinia();
export default pinia;
在main.ts中导入pinia
省略了一些其他的代码，直接添加进去就好
src/main.ts
// …… import pinia from './stores';// …… app.use(pinia);
router中使用
src/router/index.ts
import pinia from "../stores"; import { useHeadLoading } from "../stores/useHeadLoading"; const headLoadingStores = useHeadLoading(pinia) console.log(headLoadingStores.counter);
useHeadLoading这个文件我就没有改了，就是上文那个src/stores/index.ts这个里面的东西，改了个名字，根据自己的需求进行开发更改就好了
---------------------------------------------------------------------------------------------------------------------------------------------
2022-9-5我的node版本又改成了V16.17.1,前面用的v18.7.0有问题，我用nvm装的，npm直接token报错，无语，降了版本就行了
vue-router引入
yarn add vue-router
同上面pinia的使用差不多
src目录下建一个router文件夹,新建一个index
src/router/index.ts
import { createRouter, createWebHistory } from "vue-router";
const router = createRouter({
history: createWebHistory("/"),
routes: [
//基础路由规则
{
path: "/",
name: "home",
component: () => import("../views/Home/index.vue"),
},
{
path: "/404",
name: "404",
component: () => import("../views/404/index.vue"),
},
{
path: "/:pathMatch(.*)",
redirect: "/404",
},
],
});
export default router;
main.ts中也需要调用
import router from './router';
app.use(router)
路由需要注意，需要显示的子路由需要添RouterView，如果不添加这个东西，路由里的组件是不会被渲染的
---------------------------------------------------------------------------------------------------------------------------------------------axios引入与封装
yarn add axios
yarn add qs
除了安装axios还得装一个QS用来处理我们post提交的数据
新建一个存放请求的目录，封装axios请求
src/request/http.js
import axios from "axios"; import qs from "qs"; axios.defaults.baseURL = "你的请求通用地址/"; // 请求地址 //post请求头 axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded;charset=UTF-8"; //设置超时 axios.defaults.timeout = 10000; axios.interceptors.request.use( (config) => { return config; }, (error) => { return Promise.reject(error); } ); axios.interceptors.response.use( (response) => { if (response.status == 200) { return Promise.resolve(response); } else { return Promise.reject(response); } }, (error) => { console.log("请求错误！"); } ); export default { post(url, data) { return new Promise((resolve, reject) => { axios({ method: "post", url, data: qs.stringify(data), }) .then((res) => { resolve(res); }) .catch((err) => { reject(err); }); }); }, get(url, data) { return new Promise((resolve, reject) => { axios({ method: "get", url, params: data, }) .then((res) => { resolve(res); }) .catch((err) => { reject(err); }); }); }, };
封装请求API
api.ts
// 引入封装好的http import http from "./http"; // 封装各种请求 const post = (url:string, data = {}) => http.post(url, Object.assign(data)); const get = (url:string, params = {}) => http.get(url, Object.assign(params)); // 接口说明 // post示例 // const GetSettings = data => post('GetSettings', data) // get示例 // const GetSettings = params => get('GetSettings', params) // 使用说明 // GetSettings({ Did: 4 }).then((res) => { // console.log(res); // }); // 常用接口封装 // 获取配置信息 // {} export const GetSettings = (params:any) => get("getrouters", params);
---------------------------------------------------------------------------------------------------------------------------------------------
element-plus引入与使用
官网安装教程<https://element-plus.org/zh-CN/guide/installation.html>
安装：
yarn add element-plus
我是用的按需自动引入，官网的快速开始也有介绍
安装插件
npm install -D unplugin-vue-components unplugin-auto-import
vite.config.ts中配置。别直接复制，看清楚咯，把这里面需要的添加进去就好了
// vite.config.ts import { defineConfig } from 'vite'
import vue from "@vitejs/plugin-vue";
import AutoImport from 'unplugin-auto-import/vite' import Components from 'unplugin-vue-components/vite' import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' export default defineConfig({ plugins: [ vue(), AutoImport({ resolvers: [ElementPlusResolver()], }), Components({ resolvers: [ElementPlusResolver()], }), ], })
注意事项：node版本如果低了，这个自动引入会报错的，我用的node版本是：v18.7.0
2022-10-26 nvm需要版本更新1.19才不会出现npm报token .错误
以上，所需的工具就已经安装完成了
TS 数据类型定义并使用
直接使用自带类型
const msg = ref<string>(); const type = ref<boolean>(); const pageIndex = ref<number>(); const color = ref<string[]>([]); const Myobj = ref<{ name: string, age: number, like: string[] }>()
略微复杂的数据类型就先定义一个数据类型
interface Man { name: string, age: number, like: string[] } const kild = ref<Man>() const kilds = ref<Man[]>([])
注意，数据在定义的时候需要在后面跟一个空数组，不然赋值的时候会报错
复用数据类型操作方法
新建TS类型文件
src/types/tower.d.ts
export interface InfoItem {
title: string;
Cover: string;
}
组件内调用类型
import { ref } from 'vue';
import { InfoItem } from "./types/tower";
const info = ref<InfoItem[]>([])
let item: InfoItem = {
title: '你好',
Cover: 'img'
}
info.value.push(item)
console.log(info.value);
如果遇到报错波浪线或者类型不提示，请重启vscode，这是vscode的一个BUG，目前还没有新的版本更新去解决他
如果没有提示或者其他报错，请看一下tsconfig.json里面的include是不是匹配了你自定义类型的位置
以上，模板框架就搭完了，然后就根据需求去晚上网页和功能吧
