使用背景
平时工作都是用的vue2,感觉vue2刚用熟悉一些和平时技术也没有使用vue3也就没有特意去了解,最近 面向百度编程 时候看到vue3越来越多了,恰巧需要写个几页的h5页面,正好尝试用一下。
初始化项目
1. 创建项目
官方文档 https://cn.vuejs.org/
环境需要node 16以上,我直接去node官网下载最新的重新安装了一下。
创建项目指令
npm init vue@latest
✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
只选择了vueRouter和pinia🍍,正好连菠萝也一起看下。 文件创建完成。
有一个疑惑 文档中说 reactive 使用在(对象、数组和 Map、Set 这样的集合类型),但是vantUI里面单选框组件绑定的数组是用 ref 声明的,我改成reactive直接用不了了,没有找到为什么。
安装使用的工具。
1. sass必须安装
指令
cnpm install sass -D
配置 , 到vite.config.js
文件添加
css: {
// css预处理器
preprocessorOptions: {
scss: {
charset: false,
//需要在assets下创建对应的文件global.scss
additionalData: '@import "./src/assets/global.scss";',
},
},
},
2. UI 库 VantUI
官网 https://vant-contrib.gitee.io/vant/#/zh-CN
步骤完全按照一步一步走,页面少直接使用了全局注册组件。
使用时候注意:npm i vant -S
安装好之后一直认为是最新版本,但是使用时候api老是发现使用不了,后来才发现不是最新的4.0.0
版本而是上一个3.6.6
版本😂。使用提示组件时候 Toast 虽然在全局注册了,但是必须在组件内部注册才能用,找了好久才发现问题;按需引入应该没有这个问题。
3. 页面适配 amfe-flexible postcss-px2rem-exclude
指令
npm i amfe-flexible postcss-px2rem-exclude -S
main.js
import 'amfe-flexible'
配置 vite.config.js
import postCssPx2rem from 'postcss-px2rem-exclude'
css: {
postcss: {
plugins: [
postCssPx2rem({
remUnit: 75, //这个尝试改了下发现没什么变化。
remPrecision: 2,
exclude: /node_modules|folder_name/i //排除掉安装包。
})
]
},
// css预处理器
preprocessorOptions: {
........
},
},
设计图按照款750的来
开始用的的是 postcss-px2rem
vantUI的组件都变得扁了。找了好久发现了能使用的办法
参考文档 https://blog.csdn.net/AK852369/article/details/105843245/