# Vue+Vite+TDesign

**Repository Path**: suyi-oh/vue-vite-framework

## Basic Information

- **Project Name**: Vue+Vite+TDesign
- **Description**: Vue+Vite+TDesign框架，电脑手机双端适用。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2024-07-03
- **Last Updated**: 2025-05-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 前端框架

## README

# Vue 3 + Vite+TDesign

## 项目搭建

创建项目

~~~SHELL
npm create vite@latest
~~~

进入项目，下载相关依赖

~~~SHELL
npm i
~~~

删除com开头的那个文件，删除assets下的文件，删除style.css，删除main.js文件中的 import 'style.css'，删除App.vue中的内容，并增加如下信息：

~~~vue
<script setup>
import {RouterView} from "vue-router";

</script>

<template>
  <!--路由出口 所有的组件通过路由跳转 在此处显示 -->
  <RouterView/>
</template>

<style scoped></style>
~~~

创建一个vue文件 -- `home.vue`

~~~vue
<template>
	<div>
		首页
	</div>
</template>

<script setup>
</script>

<style>
</style>
~~~

下载vue-router并配置路由

~~~js
<!-- 下载vue-router -->
npm install vue-router@4

<!-- 配置路由 -->
1. 在src下新建包  router，新建文件index.js 添加如下内容：

import {
	createRouter,
	createWebHistory
} from 'vue-router'

import Home from '../views/home.vue'

const router = createRouter({
	history: createWebHistory(import.meta.env.BASE_URL),
	routes: [
		{
			path: "/",
			name: 'home',
			component: Home
		},
	]
})

export default router
~~~

修改main.js文件，将路由安装到vue实例上

~~~js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
//创建vue实例 
const app = createApp(App)//以App组件为默认页面
//将路由以插件的形式安装到vue实例上  this.$router跳转 this.$route获取路由信息
app.use(router)
//将vue实例挂载到index.html中 id=app的元素上 
app.mount('#app')
~~~



此时就可以正常运行了。

## 引入组件库

引入组件库，这里我使用的是`TDesign`

首先，安装TDesign

~~~shell
# 通过npm安装
npm i tdesign-mobile-vue
~~~

再main.js文件中添加如下

~~~js
import TDesign from 'tdesign-mobile-vue';
import 'tdesign-mobile-vue/es/style/index.css';

app.use(TDesign);
~~~

## 配置接口

安装`axios`

~~~shell
npm i axios
~~~

新建`utils`包，新建`http.js`，添加如下内容

~~~js
//导入env.js 服务器地址
import host from './env.js'
import axios from 'axios'
//创建请求实例
const instance = axios.create({
  baseURL: host, //服务器地址
  timeout: 5000 //5s超时时长
})

// 添加响应拦截器
instance.interceptors.response.use(function(response) {
  // 2xx 范围内的状态码都会触发该函数。
  // 对响应数据做点什么
  if (response.status == 200) {
    //获取接口数据
    let rs = response.data;      
    if(rs.code == 200) {
          //将rs封装成promise对象返回
           return Promise.resolve(rs)
    }

    //不正常 弹框提示错误信息
    ElMessage.error(rs.msg)

  }
  return Promise.resolve({});
}, function(error) {
  // 超出 2xx 范围的状态码都会触发该函数。
  // 对响应错误做点什么
  return Promise.reject(error);
});

//对外暴露的请求方法
export default {
  /**
   * get请求
   * @param {*} url 接口的相对地址
   * @param {*} params  请求的参数是一个对象 请求时会将对象中的属性拼接成字符串到地址上
   * @returns
   */
  get(url, params) {
    return instance.get(url, {
      params
    })
  },
  /**
   * post 请求
   * @param {*} url
   * @param {*} data 请求数据
   * @returns
   */
  post(url, data) {
    return instance.post(url, data)
  },
  /**
   * put请求
   * @param {*} url
   * @param {*} data
   * @returns
   */
  put(url, data) {
    return instance.put(url, data)
  },
  /**
   * delete请求
   * @param {*} url
   * @param {*} params
   * @returns
   */
  delete(url, params) {
    return instance.delete(url, {
      params
    })
  }
}

~~~

新建`env.js`，添加如下内容

~~~js
export default "http://192.168.22.61:8081";//服务器地址
~~~

新建`api`包，新建接口JS文件，添加内容如下(根据需求，这只是示例)

~~~js
import http from '../utils/http.js'

export function queryUser(data){
    return http.post("/api/user",data);
}
~~~

## 框架运行
如果您是git拉下来直接要用请看以下步骤
1. 下载相关依赖
~~~js
npm i
~~~
2. 修改`/src/utils/env.js`下的服务器地址


## 参考文档



#### [TDesign文档](https://tdesign.tencent.com/mobile-vue/getting-started)

###