1.vue3-vant-h5-template移动端模板

作者: 静昕妈妈芦培培 | 来源:发表于2023-05-03 14:30 被阅读0次

移动端基本模板
汽车租赁服务类网站织梦模板(带手机移动端)
免费织梦企业网站网站源码下载
模板数据接口设计（移动端操作接口）
移动端index页面模板
校园跑腿移动端模板
移动端页面模板示例
移动端vue项目模板
制作个人简历模板网页效果 | 码云端的开源项目
2016-11-29演示计划

1.创建项目

创建项目之前首先确保你安装了最新版本的 Node.js

image.png

创建项目,在命令行中运行以下命令

npm init vue@latest

image.png

执行如下命令进入项目更目录并按照依赖

cd vue3-vant-h5-template
npm install

image.png

执行下面命令运行项目

npm run dev

image.png

2.安装vant

vant官网：https://vant-contrib.gitee.io/vant/#/zh-CN

image.png

2.1在现有项目中使用 Vant 时，可以通过 npm 进行安装：

# Vue 3 项目，安装最新版 Vant
npm i vant --save

2.2按需引入组件

在基于 vite 的项目中使用 Vant 时，可以使用 unplugin-vue-components 插件，它可以自动引入组件，并按需引入组件的样式。

安装插件

# 通过 npm 安装
npm i unplugin-vue-components -D

配置插件

如果是基于 vite 的项目，在 vite.config.js 文件中配置插件：

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { VantResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers:[VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

使用组件

完成以上两步，就可以直接在模板中使用 Vant 组件了，unplugin-vue-components 会解析模板并自动注册对应的组件。

<template>
  <van-button type="primary" />
</template>

引入函数组件的样式

Vant 中有个别组件是以函数的形式提供的，包括 Toast，Dialog，Notify 和 ImagePreview 组件。在使用函数组件时，unplugin-vue-components 无法自动引入对应的样式，因此需要手动引入样式。

// main.ts
import { createApp } from "vue";
import App from "./App.vue";

import "./assets/main.css";

//引入vant中函数式组件的样式
// Toast
import "vant/es/toast/style";
// Dialog
import "vant/es/dialog/style";
// Notify
import "vant/es/notify/style";
// ImagePreview
import "vant/es/image-preview/style";


createApp(App).mount("#app");

你可以在项目的入口文件或公共模块中引入以上组件的样式，这样在业务代码中使用组件时，便不再需要重复引入样式了。

// ./src/components/HelloWorld.vue
<script setup lang="ts">
import { showToast, showDialog, showNotify, showImagePreview } from "vant";

defineProps<{
  msg: string;
}>();

const testShowToast = () => {
  showToast("测试showToast");
};
const testShowDialog = () => {
  showDialog({ message: "测试showDialog" });
};
const testShowNotify = () => {
  showNotify({ message: "测试showNotify" });
};
const testShowImagePreview = () => {
  showImagePreview(['https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg']);
};
</script>

<template>
  <div>
    <van-button type="primary" @click="testShowToast">showToast</van-button>
    <van-button type="success" @click="testShowDialog">showDialog</van-button>
    <van-button type="default" @click="testShowNotify">showNotify</van-button>
    <van-button type="warning" @click="testShowImagePreview">showImagePreview</van-button>
  </div>
</template>

<style scoped>
</style>

3.浏览器适配

Viewport 布局

Vant 默认使用 px 作为样式单位，如果需要使用 viewport 单位 (vw, vh, vmin, vmax)，推荐使用 postcss-px-to-viewport 进行转换。

postcss-px-to-viewport 是一款 PostCSS 插件，用于将 px 单位转化为 vw/vh 单位。

3.1安装

npm install postcss-px-to-viewport -D

3.2在项目根目录下添加postcss.config.js文件

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 375,
    },
  },
};

Tips: 在配置 postcss-loader 时，应避免 ignore node_modules 目录，否则将导致 Vant 样式无法被编译。

别急，你以为就这样完事了吗，并没有。上面只是对设计稿尺寸为 375 的进行转换( vant 设计稿尺寸是 375 🤦♂️)，但是我们大部分设计稿尺寸都是 750 ，所以需要额外对 750 尺寸的进行处理。
由于 postcss-px-to-viewport 没有提供类似 postcss-pxtorem 中 rootValue({ file }) {} 的方法，即便使用 module.exports = (param) => {} 这种方式导出postcss配置，也拿不到当前转换文件的信息(备注：以前我记得是可以拿到的，现在拿不到了)，所以无法根据文件路径动态设置 viewportWidth，
有一种hack方式：通过多次 pxToViewport() 处理不同文件来设置viewportWidth😎

// postcss.config.js
const path = require('path');
const pxToViewport = require('postcss-px-to-viewport');
module.exports = {
  plugins: [
    pxToViewport({ // vant
      viewportWidth: 375,
      propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
      selectorBlackList: ['aaaa'],// 指定不转换为视窗单位的类名，
      exclude: [/^(?!.*node_modules\/vant)/],// 设置忽略文件，用正则做目录名匹配
      //include: [/node_modules\/vant/],
    }),
    pxToViewport({ // 非vant
      viewportWidth: 750,
      exclude: [/node_modules\/vant/],
    })
  ]
}

第一个处理 vant 的 pxToviewport 为什么不用include选项呢？

因为 postcss-px-to-viewport v1.1.1 不支持 include 配置项，v1.2.0 开始加入include，但是并没有发布到npm仓库🤦♂️,
然后运行项目，你会发现报如下警告：

bb5224bc4782023d86e9681d7ddaec5.png

原因是 postcss-px-to-viewport 不支持 postcss 8.x ，而vite内置postcss 8.x，所以使用postcss-px-to-viewport会抛出警告🤦♂️

要改用 postcss-px-to-viewport-8-plugin(https://github.com/lkxian888/postcss-px-to-viewport-8-plugin) 替代，既支持 include 配置项，也支持postcss 8.x

image.png

安装：

npm install postcss-px-to-viewport-8-plugin -D

最终完整的postcss.config.js代码为：

// postcss.config.js
const path = require('path');
const pxToViewport = require('postcss-px-to-viewport-8-plugin');
module.exports = {
  plugins: [
    pxToViewport({ // vant
      viewportWidth: 375,
      propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
      selectorBlackList: ['aaaa'],// 指定不转换为视窗单位的类名，
      exclude: [/^(?!.*node_modules\/vant)/],// 设置忽略文件，用正则做目录名匹配
    }),
    pxToViewport({ // 非vant
      viewportWidth: 750,
      exclude: [/node_modules\/vant/],
    })
  ]
}

4.自动添加前缀

autoprefixer是一款自动管理浏览器前缀的插件，它可以解析CSS文件并且添加浏览器前缀到CSS内容里，使用Can I Use（caniuse网站）的数据来决定哪些前缀是需要的

安装

npm i autoprefixer -D

在postcss.config.js中配置

// postcss.config.js
const autoprefixer = require('autoprefixer');
const pxToViewport = require('postcss-px-to-viewport-8-plugin');
module.exports = {
  plugins: [
    autoprefixer({
      overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 35', 'ff > 31', 'ie >= 8']
    }), // 自动为css添加浏览器前缀
    pxToViewport({ // vant
      viewportWidth: 375,
      propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
      selectorBlackList: ['aaaa'],// 指定不转换为视窗单位的类名，
      exclude: [/^(?!.*node_modules\/vant)/],// 设置忽略文件，用正则做目录名匹配
    }),
    pxToViewport({ // 非vant
      viewportWidth: 750,
      exclude: [/node_modules\/vant/],
    })
  ]
}

5.CSS 预处理器less

安装

npm install less -D

安装后直接使用就可以啦

image.png

6.项目规范

6.1集成editorconfig配置

EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格。

在项目根目录创建.editorconfig文件

# http://editorconfig.org

root = true

[*] # 表示所有文件适用
charset = utf-8 # 设置文件字符集为 utf-8
indent_style = space # 缩进风格（tab | space）
indent_size = 2 # 缩进大小
end_of_line = lf # 控制换行类型(lf | cr | crlf)
trim_trailing_whitespace = true # 去除行首的任意空白字符
insert_final_newline = true # 始终在文件末尾插入一个新行

[*.md] # 表示仅 md 文件适用以下规则
max_line_length = off
trim_trailing_whitespace = false

VSCode需要安装一个插件：EditorConfig for VS Code

image.png

6.2. 使用prettier工具（不需要做，创建项目时自动安装了prettier并生成了配置文件）

Prettier 是一款强大的代码格式化工具，支持 JavaScript、TypeScript、CSS、SCSS、Less、JSX、Angular、Vue、GraphQL、JSON、Markdown 等语言，基本上前端能用到的文件格式它都可以搞定，是当下最流行的代码格式化工具。

1.安装prettier

npm install prettier -D

2.在项目根目录创建.prettierrc文件并配置：

useTabs：使用tab缩进还是空格缩进，选择false；
tabWidth：tab是空格的情况下，是几个空格，选择2个；
printWidth：当行字符的长度，推荐80，也有人喜欢100或者120；
singleQuote：使用单引号还是双引号，选择true，使用单引号；
trailingComma：在多行输入的尾逗号是否添加，设置为 none；
semi：语句末尾是否要加分号，默认值true，选择false表示不加；

{
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 80,
  "singleQuote": true,
  "trailingComma": "none",
  "semi": false
}

3.创建.prettierignore忽略文件

/dist/*
.local
.output.js
/node_modules/**

**/*.svg
**/*.sh

/public/*

4.VSCode需要安装prettier的插件

image.png

5.测试prettier是否生效

测试一：在代码中保存代码；
测试二：配置一次性修改的命令；

在package.json中配置一个scripts：

    "prettier": "prettier --write ."

一次性格式化所有编写的js代码，执行npm run prettier

而我们按照之前命令创建项目时其实已经安装了prettier,并且在package.json中自动添加了用来格式化代码的脚本，也自动创建了.prettierrc.json文件

image.png

6.3. 使用ESLint检测

1.在前面创建项目的时候，我们就选择了ESLint，所以Vue会默认帮助我们配置需要的ESLint环境。

2.VSCode需要安装ESLint插件：

image.png

————————————————
版权声明：本文参考CSDN博主「小满只想睡觉」的原创文章，链接：https://blog.csdn.net/xxxzzzqqq_/article/details/129554703

移动端基本模板
汽车租赁服务类网站织梦模板(带手机移动端)
模板名称：汽车租赁服务类网站织梦模板(带手机移动端) 模板介绍： 1、织梦最新内核开发的模板，该模板属于企业通用类...
免费织梦企业网站网站源码下载
模板名称：游戏手游程序开发网站类织梦模板(带手机端)+PC+移动端+利于SEO优化下载地址：http://ww...
模板数据接口设计（移动端操作接口）
接口分析移动端大致需要几个接口获取模板列表接口根据模板表名获取模板字段接口填写完数据需要保存模板数据接口（...
移动端index页面模板
var randomNum...
校园跑腿移动端模板
https://github.com/MAXIAODONGS/runSchool 项目主要包括以下页面首页、跑腿...
移动端页面模板示例
这个模板是在公司项目中使用的，可根据情况自行修改meta标签。
移动端vue项目模板
模板项目技术栈 vue-cli3脚手架 vue-router vuex跨组件通信 rem适配 axios拦截器 t...
制作个人简历模板网页效果 | 码云端的开源项目
制作个人简历模板网页效果文 / 达叔原创制作个人简历模板网页效果 PC 端移动端首先要注册并登陆码云的网站...
2016-11-29演示计划
评估单 1.第一步，创建通用表2.做模板3.移动端调用模板，填写数据保存4.PC端查看数据5.PC端修改数据6.移...