创建 vue3 记录

qq_35438952

已于 2022-10-18 14:17:04 修改

阅读量393

点赞数

文章标签： javascript vue.js 前端

于 2022-09-27 16:08:26 首次发布

本文链接：https://blog.csdn.net/qq_35438952/article/details/126937557

版权

使用背景

平时工作都是用的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: {
      ........
    },
  },