搭建vue3+vite+ts项目

https://cn.vitejs.dev/1，使用vite初始化项目，进入项目安装依赖包npmcreateviterabbit-vue3-ts--templatevue-ts2，目录调整目标：可以调整项目的目录结构，规范开发环境。修改文件main.ts无需修改App.vue删除无用内容删除项目src/components/HelloWorld.vueHelloWorld组件src/assets中不需要的文件/logo.pngvue默认logo新建文件夹utils用于存放工具相关的assets/images用于存放图片相关的assets/styles用于存放style相关的router用于存放路由相关的store用于存放data-relatedviews用于存放页面级组件types用于存放ts的publictypes3.axios包安装：npmaddaxios新建src/utils/request.ts模块，代码如下importaxiosfrom'axios'constinstance=axios.create({baseURL:'http://pcapi-xiaotuxian-front.itheima.net/',timeout:5000})//添加请求拦截器instance.interceptors.request.use(function(config){//在发送请求之前做一些事情returnconfig},function(error){//做一些关于请求错误的事情returnPromise.reject(error)})//添加响应拦截器instance.interceptors.response.use(function(response){returnresponse},function(error){//处理响应错误returnPromise.reject(error)})exportdefaultinstance4.配置路径别名目标：可以配置@path别名，方便导入模块添加配置import{defineConfiginvite.config.ts}from'vite'importvuefrom'@vitejs/plugin-vue'constpath=要求('path')exportdefaultdefineConfig({plugins:[vue()],resolve:{alias:{'@':path.resolve(__dirname,'./src')}}})需要安装类型声明ofnode文件：npmadd@types/node-D修改tsconfig.json，添加如下配置{"compilerOptions":{//..."baseUrl":".","paths":{"@/*":["src/*"]}}}注：修改vite.config.ts文件后，需要重启Stylevariablesrc/assets/styles/variables.less（根据自己项目设置）//theme@xtxColor:#27ba9b;//辅助@helpColor:#e26237;//成功@sucColor:#1dc779;//警告@warnColor:#ffb302;//价格@priceColor:#cf4444;混入src/assets/styles/mixins.less（根据自己项目设置）//鼠标上移阴影animation.hoverShadow(){transition:all0.5s;&:hover{transform:translate3d(0,-3px,0);盒子阴影：03px8pxrgba(0,0,0,0.2);}}自动导入样式可以使用style-resoures-loader在项目中自动导入less变量用mixins修改vite.config.ts文件，添加内容exportdefaultdefineConfig({css:{preprocessorOptions:{less:{additionalData：`@import“@/assets/styles/variables.less”；@import"@/assets/styles/mixins.less";`}}}})重启服务看看效果ResetstylesTarget:abletousefunctionsnormalize.cssresetsstylesinyourproject,normalize.cssisamodernalternativetoCSSresetsinstallnormalize.css:npmaddnormalize.css使用：main.jsimportnormalize.cssimport{createApp}from'vue'importAppfrom'./App.vue'+import'normalize.css'createApp(App).mount('#app')