标签：vue router ts axios vue3 import vite

# **大反派项目说明**
## **一、项目搭建与配置引入**
用到的库：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
来源： https://www.cnblogs.com/y-shmily/p/16607635.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。