其他分享
首页 > 其他分享> > vite+vue3+ts项目搭建

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也需要使用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