手把手，完整的从0搭建vite-vue3-ts项目框架：配置less+svg+pinia+vant+axios
项目同步git：https://gitee.com/lixin_ajax/vue3-vite-ts-pinia-vant-less.git觉得有帮助的小伙伴请点下小心心哦
项目同步git：https://gitee.com/lixin_ajax/vue3-vite-ts-pinia-vant-less.git 觉得有帮助的小伙伴请点下小心心哦 为避免赘述，过于基础的点会直接省略或贴图，比如创建文件夹/文件的路径/路由一类 配置相应功能，也尽量只贴相关代码，并不代表整个 ...
项目同步git：https://gitee.com/lixin_ajax/vue3-vite-ts-pinia-vant-less.git
觉得有帮助的小伙伴请点下小心心哦
为避免赘述，过于基础的点会直接省略或贴图，比如创建文件夹/文件的路径/路由一类
配置相应功能，也尽量只贴相关代码，并不代表整个文件内容
我会尽量把每一步都记录下来，让跟随文档操作的朋友也能还原项目
项目不尽完美，但是主体功能应该都可以有所参考
一.本地初始环境
二.使用vite脚手架，创建vue3+ts
yarn create vite
输入项目名，回车确认
选择Vue和TypeScript
文件目录如下，项目创建成功！
三.启动项目：根据提示进入项目运行项目，或自行使用编码器输入指令进行启动
浏览器打开地址，运行成功！
四.必备依赖
ThispackagecontainstypedefinitionsforNode.js(http://nodejs.org/)
yarn add@types/node-S-D
五.配置路径别名@
1.位置：直接改写vite.config.ts--顺便就添加alias
//vite.config.tsimportvuefrom"@vitejs/plugin-vue";import{resolve}from"path";functionpathResolve(dir:string){returnresolve(process.cwd(),".",dir);}//https://vitejs.dev/config/exportdefault()=>{return{resolve:{alias:[{find:"@",replacement:pathResolve("src"),},{find:"views",replacement:pathResolve("src/views"),},],},plugins:[vue()],};};
2.位置：tsconfig.json--修改baseUrl及paths
//tsconfig.json
{
"compilerOptions": {
......
"baseUrl": "./",
"paths": {
"@/*": ["src/*"],
"views/*": ["src/views/*"],
"components/*": ["src/components/*"],
"assets/*": ["src/assets/*"]
}
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"references": [{ "path": "./tsconfig.node.json" }]
}
六.配置vue-router
yarn add vue-router-S
推荐一个很好的插件nprogress【进度条】
yarn add@types/nprogress nprogress-D
main.ts引入router
//main.tsimport{createApp}fromvueimport./style.cssimportAppfrom./App.vueimportrouterfrom"./router";constapp=createApp(Appasany);app.use(router)app.mount(#app)
src下创建router文件夹，项目往往需要模块化，所以代码尽量不要杂糅在一起
/router/index.ts
/router/index.tsimport{createRouter,createWebHashHistory,RouteRecordRaw}from"vue-router";importNProgressfrom"nprogress";import"nprogress/nprogress.css";constmodules:any=import.meta.glob("./modules/**/*.ts",{eager:true});constroutes:Array<RouteRecordRaw>=[];for(constkeyinmodules){routes.push(...modules[key].default);}constrouter=createRouter({history:createWebHashHistory(),//history 模式则使用 createWebHistory()routes,});router.beforeEach(async(_to,_from,next)=>{NProgress.start();next();});router.afterEach((_to)=>{NProgress.done();});exportdefaultrouter;
/router/typings.d.ts 路由meta格式受控
/router/typing.d.tsimport"vue-router";declaremodule"vue-router"{interfaceRouteMeta{//optionstitle?:string;//every route must declareshow?:boolean;//}}
然后就是test下随便创建一个路由，对应的，views下创建相应的vue文件，App.vue给上router-view
test/index.ts
app.vue
test/index.vue
查看页面
页面正确显示，路由部署成功！
七.配置css预处理：less
yarn add less less-loader-D
为了配置全局的less样式文件，同时引入fs模块
yarn add fs-D
进入项目根目录的配置文件
位置：vite.config.ts -- css
//vite.config.tsimportvuefrom"@vitejs/plugin-vue";import{resolve}from"path";importfsfromfsfunctionpathResolve(dir:string){returnresolve(process.cwd(),".",dir);}//https://vitejs.dev/config/exportdefault()=>{constlessResources:Array<String>=[]fs.readdirSync(src/assets/styles).map((dirname)=>{if(fs.statSync(`src/assets/styles/${dirname}`).isFile()){lessResources.push(`@import"src/assets/styles/${dirname}";`)}})return{......,//csscss:{preprocessorOptions:{less:{charset:false,additionalData:lessResources.join(),modifyVars:{primary-color:#0080FF,link-color:#0080FF,border-radius-base:4px,},javascriptEnabled:true,},},},};};
这里配置的公共less文件路径为src/assets/styles，创建styles文件夹和index.less文件
进入index.less声明全局样式，测试less配置是否成功
进入test/index.vue使用声明
查看页面
盒子背景颜色改变，less及全局less配置成功！
八.配置svg
yarn add vite-plugin-svg-icons-D
yarn add fast-glob-D
vite.config.ts引入插件
//vite.config.tsimportvuefrom"@vitejs/plugin-vue";import{createSvgIconsPlugin}from"vite-plugin-svg-icons";importpathfrom"path";//https://vitejs.dev/config/exportdefault()=>{return{......,plugins:[vue(),createSvgIconsPlugin({//指定需要缓存的图标文件夹iconDirs:[path.resolve(process.cwd(),"src/assets/icons")],//指定symbolId格式symbolId:"icon-[dir]-[name]",}),],};};
根据config配置创建存放svg的目录文件，并创建SvgIcon组件
SvgIcon组件
//SvgIcon/index.vue<svg aria-hidden="true"class="svg-icon"><use:xlink:href="https://www.cnblogs.com/jing-zhe/archive/2022/11/17/symbolId":fill="color"/>
<button@click="number += 1">{{number}}
<van-button type="primary">vant button
<meta name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"/>
<van-nav-bar safe-area-inset-top/>
<van-number-keyboard safe-area-inset-bottom/>
2.Viewport 布局
postcss-px-to-viewport-8-plugin：postcss-px-to-viewport-8-plugin 是一款PostCSS插件，用于将px单位转化为vw/vh单位。
yarn add postcss-px-to-viewport-8-plugin-D
vite.config.ts中更改配置
//vite.config.tsimportpxtovwfrompostcss-px-to-viewport-8-pluginconstloder_pxtovw=pxtovw({//这里是设计稿宽度 自己修改viewportWidth:375,viewportUnit:vw})exportdefaultdefineConfig({......,css:{postcss:{plugins:[loder_pxtovw]}}})
创建一个types/index.d.ts，用于处理包括postcss-px-to-viewport-8-plugin一类的没有声明文件的依赖
//src/types/index.d.tsdeclaremodule"postcss-px-to-viewport-8-plugin"
刷新页面，F12查看样式
px已被转换，vant ui 及 移动端配置成功！
十一.配置axios
yarn add axios
tsconfig.json：types里加上"vite/client"
//tsconfig.json{"compilerOptions":{......,"types":["vite/client","vite-plugin-svg-icons/client"]},"include":["src/**/*.ts","src/**/*.d.ts","src/**/*.tsx","src/**/*.vue","*.ts",],"exclude":["node_modules","dist"],"references":[{"path":"./tsconfig.node.json"}]}
src下创建axios请求文件
创建axios
//utils/http/axios/index.tsimportaxios,{AxiosInstance,AxiosRequestConfig,AxiosResponse,AxiosError,}from"axios";import{IResponse}from"./type";//如果请求超过 `timeout` 的时间，请求将被中断axios.defaults.timeout=5000;constaxiosInstance:AxiosInstance=axios.create({baseURL:import.meta.env.VITE_APP_API_BASEURL+"",});//axios实例拦截请求axiosInstance.interceptors.request.use((config:AxiosRequestConfig)=>{//配置headersconfig.headers={...config.headers,};returnconfig;},(error:any)=>{returnPromise.reject(error);});//axios实例拦截响应axiosInstance.interceptors.response.use(//请求成功(response:AxiosResponse)=>{returnresponse;},//请求失败(error:AxiosError)=>{const{response}=error;console.error(response,"response error");if(response){returnPromise.reject(response.data);}});constrequest=<T=any>(config:AxiosRequestConfig):Promise<T>=>{constconf=config;returnnewPromise((resolve)=>{axiosInstance.request<any,AxiosResponse<IResponse>>(conf).then((res:AxiosResponse<IResponse>)=>{const{data:{result},}=res;resolve(resultasT);});});};exportfunctionget<T=any>(config:AxiosRequestConfig):Promise<T>{returnrequest({...config,method:"GET"});}exportfunctionpost<T=any>(config:AxiosRequestConfig):Promise<T>{returnrequest({...config,method:"POST"});}exportdefaultrequest;exporttype{AxiosInstance,AxiosResponse};
//utils/http/axios/type.tsexportinterfaceRequestOptions{//Whether to process the request resultisTransformResponse?:boolean;}//返回res.data的interfaceexportinterfaceIResponse<T=any>{code:number|string;result:T;data:T;message:string;status:string|number;}
根目录创建.env.development配置开发请求地址
//.env.development# 开发环境VITE_APP_API_BASEURL=你的请求地址NODE_ENV=development
vite.config.ts配置server
//vite.config.tsserver:{hmr:{overlay:false},//禁用或配置 HMR 连接 设置 server.hmr.overlay 为 false 可以禁用服务器错误遮罩层//服务配置port:3030,//类型： number 指定服务器端口;open:false,//类型： boolean | string在服务器启动时自动在浏览器中打开应用程序；cors:false,//类型： boolean | CorsOptions 为开发服务器配置 CORS。默认启用并允许任何源host:"0.0.0.0",//IP配置，支持从IP启动["/api"]:{target:process.env.VITE_APP_API_BASEURL,changeOrigin:true,rewrite:(path:string)=>path.replace(newRegExp("^/api"),""),},},
创建api存放目录
创建一个api
//api/test/index.tsimport{post}from"@/utils/http/axios";import{IResponse}from"@/utils/http/axios/type";exportinterfaceLoginData{username?:string;password?:string;}enumURL{login="/api/user_center/testLogin",}/*** @description: 用户登录* @params {LoginData} params* @return {Promise}*/constlogin=async(data:LoginData)=>post<IResponse>({url:URL.login,data});export{login};
回到test/index.vue调用api测试axios
//test/index.vue<script setup lang="ts">import{login}from@/api/testlogin({})
