如何新建一个vue+vant移动端项目并完成移动端适配

如何新建一个vue+vant移动端项目并完成移动端适配

如何新建一个vue+vant移动端项目并完成移动端适配

默认已经安装好了node和vue cli。

vant官方文档:https://youzan.github.io/vant/#/zh-CN/home

npm install -g @vue/cli

1.新建项目（安装速度慢，可使用taobao的仓库加速）

#创建你的项目
vue init webpack 你的项目名
cd 你的项目名
#安装依赖
npm install
#运行
npm run dev

依次指定项目名称、项目描述、作者等信息

2.vant的安装和引入

Ctrl+C后输入Y,可以停止命令行，然后输入

npm i vant -S

安装自动按需引入组件

npm i babel-plugin-import -D

修改.babelrc文件

['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']

main.js引入需要组件

import { Button } from 'vant';

Vue.use(Button);

在HelloWorld.vue修改内容如下

    <van-button type="primary">主要按钮</van-button>
    <van-button type="info">信息按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="warning">警告按钮</van-button>
    <van-button type="danger">危险按钮</van-button>

 运行vue，打开浏览器：http://localhost:8080/#/ 按F12(笔记本可能需要按Fn)打开开发者工具，点击图示位置，切换为手机浏览模式

3.移动端适配

修改根目录，index.html，设置屏幕宽度位20rem,可根据项目需求自定义

<script>
   function gethtmlfontsize(){
    // 三个步骤:
    // 1.获取html的宽,
    let htmlwidth=document.documentElement.clientWidth || document.body.clientWidth;//有些浏览器documentElement获取不到,那就使用后面的body
    console.log(htmlwidth);    
    // 2.htmlDom
    let htmlDom=document.getElementsByTagName("html")[0]
    console.log(htmlDom);
    //3.设置根元素样式
    htmlDom.style.fontSize=htmlwidth/20+'px';
}
// 调用一次
gethtmlfontsize();
// 添加监听事件(resize是监听的意思)
window.addEventListener('resize',gethtmlfontsize)
</script>

 完整代码

 HelloWorld.vue中测试，新增一个div标签，设置背景颜色和宽度，示例设置div宽度位10rem,既屏幕宽度的一半

打开浏览器，修改设备，如图所示

如何新建一个vue+vant移动端项目并完成移动端适配相关教程

1. 如何用c 语言写一个 定时器
   

   如何用c 语言写一个 定时器 1.代码分析 2.代码 #include stdio.h#include time.h#include conio.h#ifndef CLOCKS_PER_SEC#define CLOCKS_PER_SEC 1000#endifint main( void ){clock_t start;long count = 1;start = clock();while(1){if((clock() - start) ==

2. 如何在 Flutter 项目中实现操作引导
   

   如何在 Flutter 项目中实现操作引导 作者：何凯俊 github 不要冒然评价我，你只知道我的名字，却不知道我的故事，你只是听闻我做了什么，却不知我经历过什么。 俗话说得好，产品有三宝，弹窗浮层加引导。 上图截图自我司 App 晓黑板中的口算模块，相信每个 Ap

3. 7天带你搞定一个图表框架echarts（二）
   

   7天带你搞定一个图表框架echarts（二） 第一步是要引用Echarts，第二部是在html中创建一个的容器，具体见上篇文章。 var myChart = echarts.init(document.getElementById('main')); var option = { //提示框组件 //trigger:表示触发类型，item数据项图形触发

4. Python Kivy安装及使用PyCharm进行简单测试（讲解如何参照kivy官
   

   Python Kivy安装及使用PyCharm进行简单测试（讲解如何参照kivy官方说明安装测试） 有相当一部分人喜欢用某度搜索，而不是首先查看官网的说明，造成走很多弯路或在搜索出来的其他人的参考下不能顺利进行，因此本文章介绍参照Kivy官方说明在Windows上安装稳定版

5. Leetcode116:填充每个节点的下一个右侧节点指针
   

   Leetcode116:填充每个节点的下一个右侧节点指针 二叉树问题最重要的就是把题目内容泛化到对每个单独节点的处理，如果一个个遍历每个节点的话，没有办法处理5，6两个节点之间的指针，因此可以同时遍历两个节点，让六个节点而不是三个节点为“一组”。 class So

6. 如何求有序数列的第2500个数的值
   

   如何求有序数列的第2500个数的值 ??一个有序数列，数列中的每一个值都被2或者3或者5所整除，1是这个序列的第一个元素。求第2500个数的值是多少？ ??最简单的方法就是用一个计数器来记录满足条件的整数的个数，然后从1开始遍历整数，如果当前遍历的数能被2或者

7. 关于libevent在windows进行x64的编译，留作一个简单的记录
   

   关于libevent在windows进行x64的编译，留作一个简单的记录 软件版本 ：libevent-2.1.11-stable.tar.gz libevent目录下: Makefile.nmake LIBFLAGS=/nologo 此行修改成 LIBFLAGS=/nologo /MACHINE:X64 buffer.c #define EVBUFFER_MAX_READ4096修改成 ,此处修改

8. [亲测有效]win10如何快速有效的去除快捷方式箭头
   

   [亲测有效]win10如何快速有效的去除快捷方式箭头 首先强烈建议 不要用删除注册表IsShortcut键值的做法来删除快捷方式箭头 ，这样会导致出现很多问题。 包括Win+X菜单打不开，右击计算机图标点击管理报错，应用无法固定到任务栏等。 目前我这个方案应该是比较