vite+vue3.0+pinia+ts创建项目

1.通过vite创建vue3.0+ts项目yarncreatevite//输出项目名项目名：?vite-project//选择使用技术栈？选择一个框架：?-使用箭头键。返回提交。Vanilla?VueReactPreactLitSvelteOthers//选择使用js还是ts还是nuxt？选择一个变体：?-使用箭头键。返回提交。JavaScript?TypeScriptCustomizewithcreate-vue↗Nuxt↗//ProjectcreatedsuccessfulScaffoldingprojectin/Users/zhengjunjun/Desktop/vuelearning/Calendar-Vue3.0...Done.现在运行：cdCalendar-Vue3.0//进入项目目录yarn//下载依赖项yarndev//启动项目?288.94秒完成。注意：yarncreatevite可能会报错Thereappearstoatroublewithyournetworkconnection.Retrying...，如果出现这个错误时当前使用的镜像是npm镜像，可以切换到淘宝镜像，重新执行命令2.配置项目启动端口和自动打开浏览器项目默认启动端口为http://localhost:5173/，改为http://localhost:3000/在项目中找到vite配置文件vite.config.ts，配置import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'//https://vitejs.dev/config/exportdefaultdefineConfig({plugins:[vue()],//默认配置服务r:{host:'0.0.0.0',//解决vite使用--host暴露port:3000,//设置端口号open:true//服务启动后自动打开浏览器}})配置别名：找到项目配置vite配置文件vite.config.tsinimport{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'import{resolve}from'path'//编辑器提示路径模块无法找到。只需下载yarnadd@types/node--dev//https://vitejs.dev/config/exportdefaultdefineConfig({plugins:[vue()],resolve:{alias:{'@':resolve(__dirname,'src')//配置别名：指向'src'目录}},server:{host:'0.0.0.0',//解决vite使用--host暴露端口:3000,//设置端口numberopen:true//服务启动后自动打开浏览器}})配置CSS预编译器Sass并直接下载loader//下载sass和sass-loaderyarnaddsasssass-loader--save-devconfigurevue-routerinstallationyarnaddvue-router@4--save创建src/router/index.ts文件，配置路由{路径：'/'，名称：'day'，组件：()=>import('@/views/Day/index.vue')//使用路由懒加载优化访问性能},{path:'/year',name:'year',component:()=>import('@/views/Year/index.vue')}]constrouter=createRouter({//history:createWebHistory(),//使用历史模式history:createWebHashHistory(),//使用哈希模式路由})exportdefaultrouterinsrcIntroducerouterin/main.ts//使用路由器，在main.ts中导入import{createApp}from'vue'import'@/styles/index.scss'importAppfrom'./App.vue'importrouterfrom'@/router/index'createApp(App).use(router).mount('#app')配置piniainstallyarnaddpinia--savecreatesrc/stores/index.tsfile,configurepiniaimport{defineStore}from'pinia'exportconstuseMainStore=defineStore({id:'main',state:()=>({count:0}),getters:{double:(state)=>state.count*2},actions:{增量(){this.count++}},persist:{enabled:true//这个配置表示存储有效，存储整个store}})介绍routerimport{createApp}from'vue'insrc/main.tsimport{createPinia}from'pinia'importpiniaPluginPersistfrom'pinia-plugin-persist'//pinia数据持久化importAppfrom'./App.vue'importrouterfrom'@/router/index'constapp=createApp(App)constpinia=createPinia()//pinia防止页面刷新数据丢失pinia.use(piniaPluginPersist)app.use(router)app.use(pinia)app.mount('#app')在组件中使用store数据配置axios安装yarnaddaxios--save创建src/request/request.ts文件封装axiosimportaxios,{AxiosInstance,AxiosRequestConfig,AxiosResponse}from'axios'enumRequestEnums{TIMEOUT=20000,SUCCESS=200}constAxios:AxiosInstance=axios.create({baseURL:import.meta.env.VITE_APP_BASE_API,超时:RequestEnums.TIMEOUT})Axios.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded'Axios.interceptors.request.use((config:AxiosRequestConfig)=>{returnconfig},(error)=>{returnPromise.reject(error)})Axios.interceptors.response.use(function(response:AxiosResponse){constdata=response.dataif(data){returndata||{}}else{returnresponse}},function(error){returnPromise.reject(error)})exportdefaultAxios创建src/request/index.ts文件封装get、post请求import{AxiosRequestConfig}from'axios'importservicefrom'./request'//数据返回的接口结果{message?:stringresultCode?:number|string}//请求响应参数，包括datainterfaceResultDataextendsResult{data:T}//getrequestconstget=(url:string,params:object={},config?:AxiosRequestConfig):Promise>=>{returnnewPromise((resolve,reject)=>{service.get(url,{params:params,...config}).then((response)=>{resolve(response)}).catch((err)=>{reject(err)})})}//post请求constpost=(url:string,data:object={},config?:AxiosRequestConfig):Promise>=>{returnnewPromise((resolve,reject)=>{service.post(url,data,config).then((response)=>{resolve(response)},(err)=>{reject(err)})})}export{get,post,formData}3.解决配置项目遇到的问题[ts]Warning:E??rrorwhenimportingfilescannotfindmodule"xxx"oritscorrespondingthetypedeclaration，配置如下，配置完成后需要重启vscode编辑器才能生效//A将以下配置“compilerOptions”添加到tsconfig.json中的compilerOptions：{...,"baseUrl":"./","paths":{"@/*":["src/*"]//相对位置需要通过配置baseUrl来识别，否则会报错}}//在tsconfig.json中添加如下配置"include"到include:[...,"**/*.ts","**/*.tsx"],