02.vue3之移动H5开发

前端 > 项目 app

发布时间 : 2025-03-20 20:12

阅读 :

相关概念解读
一、环境准备
二、项目创建
三、项目开发步骤

一、环境准备

安装 Node.js：版本18.3+

二、项目创建

npm create vue@latest

三、项目开发步骤

1.冗余代码删除

2.样式初始化

样式安装包

npm install normalize.css # css初始化-默认设置
npm install sass -D # 安装sass

reset.scss：初始化样式

/* 重置样式 */
@import 'normalize.css/normalize.css';
:root {
  --primary-color: #1989fa;
  --safe-area-inset-bottom: env(safe-area-inset-bottom);
}

/* 添加项目自定义重置规则 */
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  margin: 0;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

html {
  font-size: 14px;
  overflow: hidden;
  height: 100%;
}

body {
  overflow: auto;
  height: 100%;
  -webkit-overflow-scrolling: touch;
}

#app {
  height: 100%;
  width: 100%;
}

variables.scss：主题全局样式

// 主题颜色
$primary-color: #1989fa;
$success-color: #07c160;
$danger-color: #ee0a24;

main.js：全局引入初始化样式

import './assets/reset.scss'

vite.config.js：引入变量

css: {
    preprocessorOptions: {
      scss: {
        // 注入全局变量
        additionalData: `@use "@/assets/variables.scss" as *;`
      }
    }
}

3.引入vant

安装vant(4.9.19)

npm i vant

引入

// 方式一：全局引入所有组件(main.js中)
import Vant from 'vant';
import 'vant/lib/index.css';
app.use(Vant);

// 方式二：按需引入
// 安装：
npm i @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D
// vite.config.js
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from '@vant/auto-import-resolver';

export default defineConfig({
  plugins: [
    vue(), // Vue 文件解析，模板编译，样式处理(含CSS、SCSS、LESS 等预处理器的使用)，模块热更新等
    vueDevTools(),
    AutoImport({
      resolvers: [VantResolver()],
      imports: ['vue', 'vue-router'], 
    }),
    Components({
      resolvers: [VantResolver()],
      dirs: ['src/components'], // 全局引入组件目录
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        // 注入全局变量
        additionalData: `@use "@/assets/variables.scss" as *;`
      }
    }
  }
})

移动端适配

// 1.安装
npm install postcss-pxtorem autoprefixer postcss-loader --save-dev
npm install amfe-flexible --save

// 2.新建postcss.config.cjs文件
<!-- px转成rem -->
const autoprefixer = require('autoprefixer')
const pxtorem = require('postcss-pxtorem')

module.exports = () => {
  return {
    plugins: [
      autoprefixer({
        overrideBrowserslist: ['last 10 versions']
      }),
      pxtorem({
        rootValue: 37.5,
        propList: ['*'],
        exclude: /node_modules/,
        minPixelValue: 2 // 最小转换的像素值
      })
    ]
  }
}

// 3.main.js引入amfe-flexible
import 'amfe-flexible/index.js'

// 4.index.html
<meta name="viewport" content="width=device-width, initial-scale=1.0">改为
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<!-- maximum-scale=1.0：禁止用户手动放大页面（安卓）user-scalable=no：禁用双指缩放（iOS 专属）-->

// 5.reset.scss
body {
  font-size: 14px !important;
}

<!-- 注意 -->
（1）package.json 中设置了 type: "module"：Node.js 会认为所有的.js文件都是ESM模块，因此你只能使用 import 和 export
（2）删除 type: "module"：来使项目默认使用 CommonJS 模块系统
（3）CommonJS: 采用 require 来导入模块，采用 module.exports 来导出模块。ESM: 采用 import 和 export 来导入和导出模块。
（4）.cjs 文件会被当作 CommonJS 模块处理，而 .mjs 文件会被当作 ESM 模块处理

02.vue3之移动H5开发

相关概念解读

一、环境准备

二、项目创建

三、项目开发步骤

1.冗余代码删除

2.样式初始化

3.引入vant