Vue3-Vite-TS-AntD项目搭建
vue3使用vite和ts创建项目
技术栈
- 编程语言:TypeScript 4.x + JavaScript
- 构建工具:Vite 2.x
- 前端框架:Vue 3.x
- 路由工具:Vue Router 4.x
- 状态管理:pinia
- UI 框架:ant design vue 3.x
- CSS 预编译: Less/Sass/Stylus
- HTTP 工具:Axios
项目规范结构
├── publish/
└── src/
------├── assets/ // 静态资源目录
------├── layout/ // 外层框架目录
------├── common/ // 通用类库目录
------├── components/ // 公共组件目录
------├── router/ // 路由配置目录
------├── store/ // 状态管理目录
------├── style/ // 通用 CSS 目录
------├── utils/ // 工具函数目录
------├── api/ // 用于存储所有的api
------├── views/ // 页面组件目录
------├── App.vue
------├── main.ts
------├── shims-vue.d.ts
├── tests/ // 单元测试目录
├── index.html
├── tsconfig.json // TypeScript 配置文件
├── vite.config.ts // Vite 配置文件
└── package.json
一、vite环境搭建,构建vite-vue-ts项目
1、安装vite环境
npm init @vitejs/app
或者
yarn create @vitejs/app
2、使用vite初始化vite+vue+ts的项目
npm init @vitejs/app project-name
或者
yarn create @vitejs/app project-name
3、选择项目类型为vue+ts
注意下面图片中的:project-name(项目的名字),select-a-framework(所需要使用的技术栈),select-a-variant(所需要使用的语言类型)
4、如此一来,项目初始化完成,我们会得到一个文件结构如下图的项目:
5、执行npm install来安装依赖,安装完成后项目就创建完成了,执行npm run dev,项目启动。
6、修改配置
- 1、 根目录 vite.config.ts
Vite 配置文件 vite.config.ts 位于根目录下,项目启动时会自动读取。这里先做一些简单配置,例如:设置 @ 指向 src 目录、 服务启动端口、打包路径、代理等。更多配置还得去官网 vite
path模块是node中的一个核心模块,需要安装让 TypeScript 支持 node.js 的依赖包—— @types/node,如果编辑器提示 path 模块找不到,则可以安装一下 @types/node --> npm install @types/node -D
npm install @types/node -D
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
// 如果编辑器提示 path 模块找不到,则可以安装一下 @types/node -> npm i @types/node -D
import { resolve } from 'path';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': resolve(__dirname, 'src') // 设置 `@` 指向 `src` 目录
}
},
base: './', // 设置打包路径
server: {
port: 4000, // 设置服务启动端口号
open: true, // 设置服务启动时是否自动打开浏览器
cors: true // 允许跨域
// 设置代理,根据我们项目实际情况配置
// proxy: {
// '/api': {
// target: 'http://xxx.xxx.xxx.xxx:8000',
// changeOrigin: true,
// secure: false,
// rewrite: (path) => path.replace('/api/', '/')
// }
// }
}
})
- 2、 根目录 tsconfig.json
加上 “paths”: { “@/“:[”./src/”]} 这个配置,用于配置绝对路径的,ts和vue3组合时绝对路径需要这么配置
{
"compilerOptions": {
"target": "esnext",
"useDefineForClassFields": true,
"module": "esnext",
"moduleResolution": "node",
"strict": true,
"jsx": "preserve",
"sourceMap": true,
"resolveJsonModule": true,
"isolatedModules": true,
"esModuleInterop": true,
"lib": ["esnext", "dom"],
"skipLibCheck": true,
"paths": {
"@/*":[
"./src/*"
]
}
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"references": [{ "path": "./tsconfig.node.json" }]
}
二、集成路由Vue Router
1、安装支持 Vue3 的路由工具 vue-router@4
npm install vue-router@4
或者
yarn add vue-router@4
2、在src下新建一个router文件夹,作为vue-router的配置目录。此目录下再新建index.ts文件,编辑内容如下:
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
import Home from '@/views/home.vue';
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: "/home",
name: "home",
component: () => import("../views/home.vue"), // 懒加载组件
},
];
const router = createRouter({
history: createWebHistory(),
routes
})
export default router;
3、在main.ts中引入vue-router
import { createApp } from 'vue';
import App from './App.vue';
import router from "./router";
const app = createApp(App);
app.use(router);
app.mount('#app');
4、在App.vue中使用vue-router ( 引入< router-view /> )
<template>
<router-link to="/">页面A</router-link>
<router-link to="/test">页面B</router-link>
<router-view />
</template>
<script setup lang="ts">
</script>
<style>
</style>
5、加入router后,页面代码内容如下所示:
三、集成状态管理工具 Pinia
关于pinia的具体使用,可观看我的另一篇文章Pinia的基础使用
1、安装支持 Vue3 的状态管理工具 pinia@next
npm install pinia@next
或者
yarn install pinia@next
2、在 src 下创建 store 目录,然后在 store 目录里新建 index.ts 文件:
//src/store/index.ts
import { defineStore } from "pinia" // 定义容器
// id:必须的,保证在Store中唯一, 两种写法
// export const piniaStore1 = defineStore('userId', {});
// export const piniaStore2 = defineStore({id: 'userId',});
export const piniaStore = defineStore('userId', {
// 1.必须是箭头函数: 为了在服务器端渲染的时候避免交叉请求导致数据状态污染
// 2.TS 类型推导, 结合了TS
state: () => {
return {
count: 0,
count2: 2
}
},
// 用来封装计算属性 有缓存功能 类似于computed
getters: {
getNum(state) {
return state.count;
},
getNum2(state) {
return state.count2;
}
},
// 编辑业务逻辑 类似于methods
actions: {
updateCount() {
this.count ++;
},
updateCount2(data: number) {
this.count2 = data;
}
}
})
3、在 main.ts 文件中挂载 Pinia 配置
import { createApp } from 'vue';
import App from './App.vue';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import router from "./router";
import { createPinia } from 'pinia'
const app = createApp(App);
const pinia = createPinia();
app.use(Antd);
app.use(router);
app.use(pinia);
app.mount('#app');
4、加入pinia后的项目结构图
5、页面上使用
四、集成HTTP 工具 Axios ( 此处的封装代码不准确,用的是js )
1、安装 axios
npm install axios
或
yarn add axios
2、再次封装 Axios,在src下面创建uils文件,在创建一个axios.js文件
import axios from "axios";
const token = window.localStorage.getItem('id_token');
// 创建 axios 实例
const service = axios.create({
baseURL: window.location.origin, // process.env.VUE_APP_BASEURL
timeout: 30 * 1000, // 设置请求超时时间
headers: {
// IE中存在GET请求缓存问题,禁用请求缓存
"Cache-Control": "no-cache",
"Authorization": 'Bearer ' + token,
},
});
// 请求错误
const err = (error) => {
const ret = {};
if (error.response) {
if (error.response.status === 401) {
window.location.href = window.location.origin;
} else if (
error.response.status === 403 ||
error.response.status === 404 ||
error.response.status === 405 ||
error.response.status === 500
) {
ret.error = error.response;
return Promise.reject(ret);
}
ret.error = error.response;
}
return Promise.reject(ret);
};
// 请求拦截器
service.interceptors.request.use((config) => {
return config;
}, err);
// 响应拦截器
service.interceptors.response.use((response) => {
const { config } = response
if (response.data) {
// response.data.msg = i18n.t(`exception.${response.data.code}`)
}
const { raw } = config
return raw ? response : response.data;
}, err);
export { service as axios };
3、使用 Axios,在src下面新建api文件夹将所有的api请求放在这里统一管理,示列代码
import { axios } from "@/utils/request.js";
export const fdsApi = {
// 获取上传链接
getUploadUrl(fileName) {
return axios({
url: "/api/test/getFileUploadUri",
method: "get",
params: {
fileName,
},
});
},
getDownloadUrl(objectName) {
return axios({
url: '/miracletest/api/test/getDownloadPresignedUri',
method: 'get',
params: {
objectName
}
})
}
};
五、集成CSS 预编译器 Less/Sass/Stylus
1、安装less/sass/stylus
npm i less -D
或
npm i sass -D
或
npm i stylus -D
2、使用
<style lang='less' scoped>
.home {
margin-top: 100px;
color: red;
}
</style>
六、集成UI 框架ant Design Vue
1、安装ant Design Vue UI库
npm install ant-design-vue@next --save
或
yarn add ant-design-vue@next
2、全局引入:main.ts
import { createApp } from 'vue';
import App from './App.vue';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import router from "./router";
import store from './store';
const app = createApp(App);
app.use(Antd);
app.use(router);
app.use(store);
app.mount('#app');
3、引用antd组件
如下图所示,是我引用antd的组件搭建的一个后台系统框架
更多推荐
所有评论(0)