# vue3项目搭建 **Repository Path**: NanChen042/vue3-project-construction ## Basic Information - **Project Name**: vue3项目搭建 - **Description**: vue3+TS+Pinia+Vite基本构建 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 3 - **Forks**: 4 - **Created**: 2022-07-19 - **Last Updated**: 2023-12-20 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Vue 3 + TypeScript + Vite + Vant3 (H5端) 该模板将帮助您开始使用Vue 3、Vite3.0中的TypeScript以及Pinia、Vant3进行开发。该模板使用Vue3,请查看文档了解更多教程。 ## 推荐的IDE设置 - [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) ## 键入支持。TS中的vue导入 因为TypeScript无法处理的类型信息。vue导入,默认情况下,它们填充为通用vue组件类型。在大多数情况下,如果您不真正关心模板之外的组件道具类型,那么这很好。然而,如果你想得到实际的道具类型。vue导入,您可以通过以下步骤启用Volar的接管模式: 1.运行扩展:从VS代码的命令调色板中显示内置扩展,查找TypeScript和JavaScript语言功能,然后右键单击并选择禁用(工作区)。默认情况下,如果禁用默认的TypeScript扩展,则接管模式将自动启用。 2.通过从命令调色板运行Developer:Reload window重新加载VS代码窗口。 # 安装 如果想一步一步安装可以参考以下文档,都有详细的解释 #轻量级pnpm 稍微解释一下 pnpm的原理在于不会傻瓜式的无脑存储相应的副本,而是进行差异文件的比对,只会增加变化了的文件,相当于这些多个项目相同的部分都共享了一个版本的依赖。 这样的话,硬盘空间可以得到大量的缩减,同时加快了安装速度。看个图 ![pnpm](./src/assets/image/MDImg/pnpm.png) 说白了就是会比npm加载速度快很多 比如说安装一个依赖,就可以使用 ``` npm install pnpm -g ``` 你会发现比npm快的多的多。 ``` pnpm install ``` ## 一、安装vite 搭建vite ```javascript yarn create vite ``` 安装依赖 ```javascript npm i ``` 启动项目 ```javascript yarn dev ``` 选择Vue3+TS的版本即可 ********************************** ## 二、安装pinia ```js npm add pinia@next ``` ### 挂载Pinia main.ts ```TS import { createApp } from 'vue' import './style.css' import App from './App.vue' import {createPinia} from 'pinia' const pinia = createPinia() const app = createApp(App) // 挂载到 Vue 根实例 app.use(pinia) createApp(App).mount('#app') ``` ### 局部引入Pinia ```TS import { defineStore } from 'pinia' ``` 下面可以看个使用例子: 1. 可以在对应的src下创建store/module/useCountStore.ts文件 2. 具体内容如下: useCountStore.ts ```TS import { defineStore } from 'pinia' //定义容器 //参数1:容器的id,必须唯一,将来pinia会把所有的容器挂载到根容器 //参数2:选项对象 //返回值是一个函数,调用得到容器实列 export const useMainStore=defineStore('main',{ //state类似于组件的data,用来存储全局状态的 //state必须是函数:这样是为了在服务端渲染的时候避免交叉请求导致的数据状态污染 //必须是箭头函数,这是为了TS更好的类型推导 state:()=>{ return{ count:100, foo:'ber', arr:[1,2,3] } }, //getters 类似于组件的computed,用来封装计算属性,有缓存功能 //和vuex中的getters没有区别 getters:{ // 方式一:这里的state就是上面的state状态对象,使用参数可自动推到出返回值的类型 count10(state){ return state.count+20 }, //方式二:getters也可使用this //直接使用this,ts不会推导出返回值是什么类型,所以要手动标明返回值的类型 /* count10():number{ return this.count+20 }, */ // 方式三:传递参数,但不使用参数,直接用this,获取值也可,自动推出返回值类型(不推荐使用) /* count10(state){ return this.count+20 } */ }, //类似于组件的methods, 封装业务逻辑,修改state actions:{ //注意不能使用箭头函数定义actions:因为箭头函数绑定外部this,会改变this指向 //actions就是 通过this返回当前容器实例 // 这里的actions里的事件接受参数 // 这里的num:number为自定义参数,需要声明参数类型 changeState(num:number){ // this.count++; this.count+=num this.foo='hello!' this.arr.push(4) // 同理,actions里也可使用$patch this.$patch({}) this.$patch(state=>{}) //在此注意:patch和普通多次修改的区别在原理上的区别是 // 1.涉及到数据响应式和视图更新,多次修改,修改几次视图就更新就更新几次 // 2.patch 批量修改 视图只更新一次,更有利于性能优化 } } }) //使用容器中的state //修改 state //容器中的actions的使用 ``` 数据写好之后在组件中使用即可 ```html ``` 写完后就可以使用了,具体使用教程可以参考官方文档[Pinia官网](https://pinia.vuejs.org/) ******************************** ## 三、安装vant3 ```JavaScript // 两种都可以 npm i vant npm i vant@next -s ``` ### 安装插件 ``` # 通过 npm 安装 npm i unplugin-vue-components -D # 通过 yarn 安装 yarn add unplugin-vue-components -D # 通过 pnpm 安装 pnpm add unplugin-vue-components -D ``` 这个插件可以自动按需引入组件 ### 基于vite项目配置插件 在vite.config.ts中配置 ``` import vue from '@vitejs/plugin-vue'; import Components from 'unplugin-vue-components/vite'; import { VantResolver } from 'unplugin-vue-components/resolvers'; export default { plugins: [ vue(), Components({ resolvers: [VantResolver()], }), ], }; ``` ### 引入组件 在mian.ts中引入vant组件 ``` import { createApp } from 'vue'; import { Button } from 'vant'; const app = createApp(); app.use(Button); ``` **************************************************************** ## 四、安装router4 ```js npm install vue-router ``` ![router文件路径](./src/assets/image/MDImg/router.jpg) router/index.ts配置内容如下: ```TS import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router' import Home from '../view/Home.vue'; const routes: Array = [ { path: '/', name: 'index', component: Home, }, ] const router = createRouter({ history: createWebHistory(), routes }) export default router; ``` ### main.ts配置项 ```ts import App from './App.vue' import router from './router/index' app.use(router).mount('#app') ``` App.vue ![router](./src/assets/image/MDImg/router.png) ************* ## 五、安装axios ``` npm install axios pnpm install axios ``` 这个封装可供参考 ![axios](./src/assets/image/MDImg/axios.jpg) ![axios2](./src/assets/image/MDImg/request.ts.png) ```TS import axios from 'axios' // import { ElMessage } from 'element-plus' // import { getToken } from '@/utils/auth' export const request =(options:any)=> { return new Promise((resolve, reject) => { // create an axios instance const service = axios.create({ // baseURL: process.env.BASE_API, // api 的 base_url baseURL: '/api', timeout: 80000 // request timeout }) // request interceptor service.interceptors.request.use( (config:any) => { let token:string =''//此处换成自己获取回来的token,通常存在在cookie或者store里面 if (token) { // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改 config.headers['X-Token'] = token config.headers.Authorization = + token } return config }, error => { // Do something with request error console.log("出错啦", error) // for debug Promise.reject(error) } ) // response interceptor service.interceptors.response.use( (response:any) => { return response.data }, error => { console.log('err' + error) // for debug if(error.response.status == 403){ // ElMessage.error('错了') console.log('错了'); }else{ // ElMessage.error('服务器请求错误,请稍后再试') console.log('服务器请求错误,请稍后再试'); } return Promise.reject(error) } ) // 请求处理 service(options) .then((res) => { resolve(res) }) .catch((error) => { reject(error) }) }) } export default request ``` service.ts ![alt](./src/assets/image/MDImg/jiekou.png) ```ts import {request} from '../request'; // 调用测试 export function getTest(params:any) { return request({ url: '/xxxx',//此处为自己请求地址 method: 'get', data:params }) } ``` 之后在页面中调用 ```ts // 接口引入地址 import { getTest} from "../utils/api/service"; /* 调用接口 */ getTest('放入params参数').then(response => { console.log("结果", response); }) .catch(error => { console.log('获取失败!') }); ``` ****** ## 六、适配方案 ### postcss-pxtorem插件 用来将px转换成rem适配(意思就是你只需要填写对应的px值,就可以在页面上自动适配,不需要自己手动转rem。 ``` npm install postcss-pxtorem ``` 网上有很多人说这个需要新建什么postcss.config.ts文件。在vite中是自带了这种写法,所以只需要直接在vite.config.ts中填写相关配置就可以了。 *** ### amfe-flexible插件 设置基准值 ``` npm i -S amfe-flexible ``` 这两个插件是必备的,下面给出配置项 ```ts import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import Components from 'unplugin-vue-components/vite'; import { VantResolver } from 'unplugin-vue-components/resolvers'; import postcssImport from "postcss-pxtorem" // https://vitejs.dev/config/ export default defineConfig({ plugins: [ vue(), Components({ resolvers: [VantResolver()], }), ], server:{ host: '0.0.0.0' }, // 适配 css: { postcss: { plugins: [ postcssImport({ // 这里的rootValue就是你的设计稿大小 rootValue: 37.5, propList: ['*'], }) ] } } }) ``` 效果图: ![效果图](./src/assets/image/MDImg/wanzhengtu.png)