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
以上，所需的工具就已经安装完成了
## **一、项目搭建与配置引入**
用到的库：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