--- theme: fancy --- ## 一、所需技术栈 **vue3官方文档：** **项目构建工具vite：** **适用于vue3的移动端ui组件库Vant3：** **一般用vw做长度单位做移动端适配：** **css预处理器：**（随便选，都差不多，就是语法不一样） **状态管理工具：**（推荐第二个，算是vuex的新版本） vuex pinia（vuex5） **路由vue-router：** **http库axios：** **vscode插件 Vue - Official**（格式化，代码提示，代码高亮等） vscode左侧商店搜索volar 下载，可能需要重启编辑器生效 ![image.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/e94887b345894c8f9599aba4682d2837~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgX0p1ZGU=:q75.awebp?rk3s=f64ab15b&x-expires=1774399114&x-signature=exsK8OWHzopwxRYmkkpEvtShdXw%3D) **VueDevtools插件：** 谷歌浏览器的VueDevtools插件需要翻墙到谷歌应用商店下载 Edge的VueDevtools插件不用翻墙就能进商店下载 ![image.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/2a8712b63d0444f8a36136d33d6fa69c~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgX0p1ZGU=:q75.awebp?rk3s=f64ab15b&x-expires=1774399114&x-signature=Hk9BUbkFSW3puT2MxcF3nGeM5lA%3D) 或者使用vite的VueDevtools插件：将会内嵌在页面中: ![image.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/84524d2216384d0dbcfc06115869c7af~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgX0p1ZGU=:q75.awebp?rk3s=f64ab15b&x-expires=1774399114&x-signature=tmsX04eh4Pr%2Fnl1BoqV9MVz5iO8%3D) ## 二、搭建步骤 ### 1、node安装并配置node环境变量 ### 2、使用vite初始化项目 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4c949ffeab0840288472bbd06cc8652c~tplv-k3u1fbpfcp-watermark.image#?w=527\&h=191\&s=39275\&e=png\&b=032456) ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/93f9de4b64614f0dace82076dc125d09~tplv-k3u1fbpfcp-watermark.image#?w=451\&h=148\&s=50635\&e=png\&b=032455) ### 3、安装依赖包，启动项目 control + shift + \~ 在vscode中打开项目根目录的终端 npm install 安装项目所需的包：安装成功后项目中会多一个node\_modules的文件夹里面是项目所需的包（我用的pnpm更快点，如要使用，需要先npm install -g pnpm） ![image.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/0b0ff734bc6d4d1cbf11583bd3623000~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgX0p1ZGU=:q75.awebp?rk3s=f64ab15b&x-expires=1774399114&x-signature=chf4ZRX1AHnMzZ1pJjsxC27GhZ8%3D) 终端中 npm run dev 启动项目 ![image.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/5dd6968f9f414dbebe5c26cd2e027a07~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgX0p1ZGU=:q75.awebp?rk3s=f64ab15b&x-expires=1774399114&x-signature=o%2BMeVrcSx7OtnJ3JzzD%2BMjVAUBo%3D) 打开链接看初始页面： ![image.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/de8a495077434e1d869e278b82fc7fa1~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgX0p1ZGU=:q75.awebp?rk3s=f64ab15b&x-expires=1774399114&x-signature=xKEibsejrZ7SSMFnyQsHOXah7Gc%3D) ### 4、vw适配 1vw就是视口宽度的1% ![image.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/a974e24f14ed4443bcac42f7eadd88ea~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgX0p1ZGU=:q75.awebp?rk3s=f64ab15b&x-expires=1774399114&x-signature=1GnQnSmOcUBnBBY8MtSqZlVcIkw%3D) `postcss-px-to-viewport-8-plugin`这个包就是为了将项目中的px都转换成vw 配置前项目中style.css里的button的圆角 border-radius: 8px; 到浏览器中查看也是8px ![image.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/2f33c7ee215c467bb604cb1a4e9ea771~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgX0p1ZGU=:q75.awebp?rk3s=f64ab15b&x-expires=1774399114&x-signature=HtiVi1A9R9LFdM7dydbwVDrl2sA%3D) ![image.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/8c831f3ddc6143a799acfa4dcebc6b27~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgX0p1ZGU=:q75.awebp?rk3s=f64ab15b&x-expires=1774399114&x-signature=mSxolryuDgv1SkW9RF%2BLlDKlvIE%3D) 安装 ```javascript pnpm install postcss-px-to-viewport-8-plugin --save-dev ``` 然后在vite.config.js中： ```javascript // vite.config.js import { defineConfig } from "vite"; import vue from "@vitejs/plugin-vue"; import postcsspxtoviewport8plugin from "postcss-px-to-viewport-8-plugin"; // https://vite.dev/config/ export default defineConfig({ plugins: [vue()], css: { postcss: { plugins: [ postcsspxtoviewport8plugin({ unitToConvert: "px", viewportWidth: 375, unitPrecision: 5, // 单位转换后保留的精度 propList: ["*"], // 能转化为vw的属性列表 viewportUnit: "vw", // 希望使用的视口单位 fontViewportUnit: "vw", // 字体使用的视口单位 selectorBlackList: [], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。 minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换 mediaQuery: true, // 媒体查询里的单位是否需要转换单位 replace: true, // 是否直接更换属性值，而不添加备用属性 exclude: [/node_modules\/ant-design-vue/], // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件 include: [], // 如果设置了include，那将只有匹配到的文件才会被转换 landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape) landscapeUnit: "vw", // 横屏时使用的单位 landscapeWidth: 1024, // 横屏时使用的视口宽度 }), ], }, }, }); ``` 配置成功后浏览器的8px 变成了2.13333vw ( 8 / 375 )\*100： ![image.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/4b9a9270d5c94c45a113d099ba194379~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgX0p1ZGU=:q75.awebp?rk3s=f64ab15b&x-expires=1774399114&x-signature=aLSg3rQvHMDaVMA3wrhBCBtzDgM%3D) ### 5、集成css预处理器less ```javascript npm install less ``` 安装成功后在每个.vue文件的style标签里加属性 lang='less' 就可以在里面以less的语法写样式了 ![image.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/9e23acfe26af4976b819d3a95f468c0d~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgX0p1ZGU=:q75.awebp?rk3s=f64ab15b&x-expires=1774399114&x-signature=4kNjjgciDOFuOuPIYFhIubDCp%2Fw%3D) ![image.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/1b20989476d54e66bc349dfd1cc9d0e4~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgX0p1ZGU=:q75.awebp?rk3s=f64ab15b&x-expires=1774399114&x-signature=Hq%2FWs%2B6HmFDj7sNNQyafz2nP%2BGQ%3D) ### 6、集成vue-router ```javascript pnpm install vue-router ``` 项目根目录中新建router文件夹专门配置路由： ```javascript // src/router/index.js import { createRouter, createWebHashHistory } from "vue-router"; const routes = [ { path: "/", name: "home", component: () => import("../views/home.vue"), }, ]; const router = createRouter({ history: createWebHashHistory(), routes, }); export default router; ``` main.js（项目入口文件）中引入router.js ```javascript import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; createApp(App).use(router).mount('#app'); ``` 项目根目录中新建views文件夹专门写页面： ```javascript // src/views/home.vue ``` app.vue中写入一下代码： ```javascript

``` ![image.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/8dc2381026454c63bf3abf0719b65c6d~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgX0p1ZGU=:q75.awebp?rk3s=f64ab15b&x-expires=1774399114&x-signature=Z9titIx9AmL8jkSOYHC4QmBRs%2F4%3D) 测试效果： ![image.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/26e711dc6069499582163261f4c9d2a2~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgX0p1ZGU=:q75.awebp?rk3s=f64ab15b&x-expires=1774399114&x-signature=jkwGdy5UUaRvlhmNgrQVQnEsPhk%3D) vue-router将home.vue的模板内容编译到了app.vue的router-view的位置。 ### 7、集成ui框架vant ```javascript npm install vant ``` 入口文件main.js中全局引入（也可以局部引入，局部引入打包后体积更小，首屏加载更快） ```javascript import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; import Vant from 'vant'; import 'vant/lib/index.css'; createApp(App).use(router).use(Vant).mount('#app'); ``` app.vue中写vant组件: ![image.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/a013baa0b5e549808d6f275fff6c54e6~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgX0p1ZGU=:q75.awebp?rk3s=f64ab15b&x-expires=1774399114&x-signature=at1N0tKUpPdzkOKT3LK6aP%2FN5GU%3D) 效果： ![image.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/d66033d63ea944e482c4c71d9a20cde9~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgX0p1ZGU=:q75.awebp?rk3s=f64ab15b&x-expires=1774399114&x-signature=FI2izWBGHX5NlFjraMl3Ry8g2A0%3D) ### 8、集成axios，并设置请求拦截器 axios 就是用promise的写法封装了ajax ，用起来更方便 ```javascript npm install axios ``` src/api文件夹内新建request.js 封装axios请求 request.js可以参考：根目录新建一个api文件夹专门写各个接口函数 ```javascript // src/api/request.js import request from './request' export const login = params => request({ url: '/sm/auth/login', params, loading: false, method: 'POST' }) ``` login.vue页面中发请求 ```javascript // src/views/login/index.vue ``` ### 9、集成状态管理工具pinia ```javascript npm install pinia ``` 入口文件main.js中引入pinia 并用app.use()来注册 ```javascript // main.js import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; import { createPinia } from 'pinia'; createApp(App).use(router).use(createPinia())mount('#app'); ``` 新建一个store文件夹专门存储应用的状态以下是一个登录存储用户信息的demo: ```javascript // src/store/user.js import { defineStore } from 'pinia'; import { getSession, setSession, removeSession } from '@/utils/session'; export const useUserStore = defineStore('user', { state: () => ({ userInfo: getSession('userInfo') || null, token: getSession('token') || '', }), actions: { setUserInfo(userInfo) { this.userInfo = userInfo; setSession('userInfo', userInfo); }, setToken(token) { this.token = token; setSession('token', token); }, clearLogInfo() { this.userInfo = null; this.token = ''; removeSession('userInfo'); removeSession('token'); }, }, }); ``` 新建一个文件夹utils ```javascript // src/utils/session.js export const getSession = (key) => { return JSON.parse(sessionStorage.getItem(key)) || ''; }; export const setSession = (key, data) => { sessionStorage.setItem(key, JSON.stringify(data)); }; export const removeSession = (key) => { sessionStorage.removeItem(key); }; ``` 登陆界面： ```javascript ```