Vue3-Vite项目搭建笔记

Vite官网

Vite中文官网

安装Vuter，有代码提示

Vite requires Node.js version 14.18+, 16+

node -v

创建项目

npm create vite@latest

Ok to proceed? (y) y
√ Project name: ... Vue3_mobile
√ Package name: ... vue3-mobile
√ Select a framework: » vue
√ Select a variant: » vue-ts

cd Vue3_mobile
npm install   
npm run dev

或

npm init vite@latest

√ Project name: ... vue_mobile
√ Select a framework: » vue
√ Select a variant: » vue-ts

cd vue_mobile
npm install
npm run dev

几款实用的VUE移动端UI框架

• Vant （有赞）
• NutUI (京东)
• Mint-ui
• Vux （微信风格）
• vonic

vue3+vite的项目如何将打包后的绝对路径改为相对路径

在vue3+vite的项目中，配置文件名为 vite.config.js**，如果没有就在根目录下新建一个，文件名固定为：vite.config.js**，然后在里面加上base属性，设置值为 "./"，如下：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  base: './'
})

如果不是用Vite的，vue cli3.x打包后如何修改生成的静态资源的目录和路径

移动端1px的问题

1px可以不转换为rem

移动端vm与rem适配

1. 将根元素的font-size设置为font-size: 0.13333333vw;
2. 这样就是1rem = 1px；写样式的时候，多少px就写多少rem

参考博客：

最简单的移动端适配方案（vw/rem）

最简单的移动端适配方案(rem+vw)

关于字体的适配-文本字号不建议使用rem

现在绝大多数的字体文件都自带一些点阵尺寸，通常是16px和24px，所以我们不希望出现13px和15px这样的奇葩尺寸。

所以可以使用媒体查询，根据不同的dpr，设置不一样的字体大小

p {
    font-size: 12px; 
    line-height: 1.5;
}
@media(-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){
   p {
      font-size: 24px;
  }
}

@media(-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3){
   p {
      font-size: 36px;
  }
}

github上使用下面这种，但好像不起作用

[data-dpr="2"] p {
    font-size: 24px;
}
[data-dpr="3"] p {
    font-size: 36px;
}

svg的使用

<link rel="icon" type="image/svg+xml" href="/vite.svg" />