vue移动端项目概述学习总结

最新推荐文章于 2024-07-23 08:21:53 发布

dell_wu_gao_jian

最新推荐文章于 2024-07-23 08:21:53 发布

阅读量2.4k

点赞数

分类专栏：浏览器兼容性 echarts 我的博客文章标签： webpack 小程序 html

本文链接：https://blog.youkuaiyun.com/dell_wu_gao_jian/article/details/121489477

版权

浏览器兼容性同时被 3 个专栏收录

3 篇文章

订阅专栏

echarts

2 篇文章

订阅专栏

我的博客

1 篇文章

订阅专栏

本文总结了Vue移动端项目的开发流程，包括安装环境、创建项目、数据管理及 vant 组件库的使用。重点讲解了如何利用lib-flexible和postcss-pxtorem实现响应式布局，以及组件间数据传递、dayjs处理时间的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开发前准备
1、安装node.js、git、码云、visual studi等开发所需要的软件。
2、安装vue脚手架

npm install @vue/cli -g   安装脚手架工具

3、创建项目

vue create hello-world

window系统，winpty vue.cmd create hello-world

4、线上数据传递到码云数据库中
git clone + 码云中ssh的地址 -------- git status 查看工作目录和暂存区的情况 -------- git add . 对指定文件进行跟踪 ---------- git commit -m ‘消息’ 将暂存区的改动提交到本地的版本库 --------git remote add origin （你的远程仓库地址地址） -------- git push -u origin master -f

5、安装组件库vant

npm i vant -S

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

注意：
（1）使用lib-flexible动态设置rem的基准值（html标签字体的大小）,
根据不同型号的手机，自动设置html字体的大小

npm i amfe-flexible
import 'amfe-flexible'

（2）postcss-pxtorem 是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位.

npm install postcss-pxtorem@5.1.1  -D

在项目的根目录下创建postcss.config.js文件。

module.exports = {
    plugins: {
      'autoprefixer': {
        browsers: ['Android >= 4.0', 'iOS >= 8']
      },
      'postcss-pxtorem': {
        rootValue: 37.5,
        propList: ['*']
      }
    }
  }

6、知识点。
1、

  //手机号验证规则
    mobile: [{require: true,message: '请输入手机号'}, {pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]14[57])[0-9]{8}$/, message: '请输入正确的手机号'}],
  // 验证码验证规则
    code: [{require: true,message: '请输入验证码'}, {pattern: /^\d{6}$/,message:'验证码错误'}]

2、组件中使用v-model传参

<profile-birthday v-model="profile.birthday"></profile-birthday>

子组件中会在props中接收profile.birthday的数据，用value值接收，
同时子组件会向父组件传递一个input方法，可以将子组件的数据更新在父组件之上。

 props: {
        value: {
            type: String,
            required: true
        }
    },

3、使用dayjs来处理时间逻辑上，来搭配vue的过滤器使用
// 初始化dayjs相关配置

import Vue from 'vue'
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
import relativeTime from 'dayjs/plugin/relativeTime'


// 配置使用处理相对时间
dayjs.extend(relativeTime)

// 配置使用中文语音包
dayjs.locale('zh-cn')

Vue.filter('relativeTime', value => {
    return dayjs(value).from(dayjs())
})

Vue.filter('dateTime', value => {
    return dayjs(value).format('MM-DD HH:mm')
})