1.node.js环境配置(使用nvm管理node版本)
nvm下载地址 Releases · coreybutler/nvm-windows · GitHub
使用教程:Nvm,Nrm使用教程_小满zs的博客-CSDN博客
2.使用vite创建vue3项目
npm init vue@latest
sass安装命令
vue add style-resources-loader
npm install node-sass sass-loader sass -D
vue 3.x - 安装scss/sass - 面包_girl - 博客园
3.结合使用element-plus和axios
一个 Vue 3 UI 框架 | Element Plus(可按需引入)
npm install element-plus --save
axios
axios拦截器 api/index.ts
import axios from "axios";
//创建axios实例
const service = axios.create({
baseURL: "https://yingdie-net-new.windoent.com",
timeout: 5000,
headers: {
"Content-type": "application/json;charset=utf-8"
}
});
//请求拦截
service.interceptors.request.use((config) => {
if (localStorage.getItem('token')) {
// @ts-ignore
config.headers.token = localStorage.getItem('token')
}
return config;
})
//响应拦截
service.interceptors.response.use((res) => {
const code: number = res.data.code;
if (code != 0) {
return Promise.reject(res.data);
}
return res.data;
}, (error => {
console.log(error)
}))
export default service;
api/api.ts
import service from "./index";
export function getMainBanner() {
return service({
url: '/other/mainbanner/cachelist',
method: 'get'
})
}
4.自动引入插件 unplugin-auto-import/vite 使用教程GitHub - antfu/unplugin-auto-import: Auto import APIs on-demand for Vite, Webpack and Rollup
5.学习笔记
.小满zs的博客_CSDN博客-Vue3,typeScript,前端领域博主6666
6.pinia持久化本地插件
Basic usage | Pinia Plugin Persist
7.练习小项目代码地址:https://gitee.com/zkkgreate/vite-ts-vue3
—————————————华-丽-分-割-线————————————————————
vue3整合Vant手机端开发
Vant 3 - Mobile UI Components built on Vue
1.引入vant
2.使用postcss和lib-flexible适配