# **大反派项目说明**
## **一、项目搭建与配置引入**
用到的库：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也需要使用pania
```
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>
```
如此这般,pania的引入与使用就告一段落啦
**vue-router引入**
yarn add vue-router
同上面pania的使用差不多
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 AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
// ...
plugins: [
// ...
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
})
```
注意事项：node版本如果低了，这个自动引入会报错的，我用的node版本是：v18.7.0
以上，所需的工具就已经安装完成了
搜索
复制
标签：vue,router,ts,axios,vue3,import,vite From： https://www.cnblogs.com/y-shmily/p/16607635.html