vue+weui 手机端项目

俩个地址
https://weui.io/
https://github.com/Tencent/weui/wiki?tdsourcetag=s_pctim_aiomsg
weui.js实现静态功能
weui.js

用脚手架创建vue项目
再visCode中安装 ESLint 插件（这个不是每次都安装，安装一次就行，他是visCode的插件）
然后配置visCode设置的配置文件

{
"liveServer.settings.donotShowInfoMsg": true,
"workbench.colorTheme": "Visual Studio Light",
"editor.fontSize": 22,
"liveServer.settings.donotVerifyTags": true,
"liveServer.settings.port": 5500,
"files.autoSave": "off",
// 配置 eslint
"editor.codeActionsOnSave": {"source.fixAll.eslint": true
},
"eslint.format.enable": true,
//autoFix默认开启，只需输入字符串数组即可
"eslint.validate": ["javascript","vue","html"
],
"[vue]": {"editor.defaultFormatter": "dbaeumer.vscode-eslint"
}
// "vetur.format.defaultFormatter.js": "vscode-typescript"
}

此时，编写 vue 文件时
编写时，就会自动的按照eslint标准语法进行检测，并标注错误
保存代码时，会自动按照 eslint 语法要求对代码进行修复

2.2 初始化项目结构

删除 views 目录下的 home.vue和about.vue
删除components目录下的HelloWord.vue
在components目录下创建login目录
在login目录下创建index.vue
在路由文件中，编写代码

import Vue from 'vue'
import VueRouter from 'vue-router'
/*** 1、@ 表示src 目录的别名* 2、如果组件名称为index.vue，则可以省略组件名称
*/
import Login from '@/components/login'
Vue.use(VueRouter)
const routes = [
{path: '/login',name: 'login',component: Login
}
]
const router = new VueRouter({
routes
})
export default router

2.3 组件库

这里建议使用 weui 作为移动端开发的组件库
github 地址
https://github.com/search?q=weui
需要使用 weui和weui.js

2.4 项目中使用weui组件库

在public目录下新建lib目录
在lib目录下，新建weui目录
将weui.css、weui.min.css、weui.js、weui.min.js 拷贝到 lib 目录下
再将weui.css、weui.min.css拷贝到 assets目录下
在public目录下的index.html中加入如下代码，引入weui.js

在main.js 中引入 weui.css

// 在入口文件中引入的css，在任何组件中都可以使用其中的样式
import './assets/weui.css'

在login/index.vue中加入如下代码，进行测试

<template>
<div><a href="javascript:" class="weui-btn weui-btn_primary"
@click="handleClick">页面主操作</a>
</div>
</template>
<script>
export default {
2.5 登录功能
效果展示
data () {return {msg: 'hello'}
},
methods: {handleClick () {weui.toast('操作成功', 3000)}
}
}
</script>

2.5 登录功能

效果展示图

模板

<template><div class="page">
<div class="close" @click="close"></div>
<div class="weui-form"><div class="weui-form__text-area"><h2 class="weui-form__title">手机号登录</h2></div><div class="weui-form__control-area"><div class="weui-cells__group weui-cells__group_form"><div class="weui-cells weui-cells_form"><div class="weui-cell weui-cell_active"><div class="weui-cell__hd"><label class="weui-label">手机号</label></div><div class="weui-cell__bd"><input class="weui-input" type="number" pattern="[0-9]{11}" placeholder="请输入手机号" /></div></div><div class="weui-cell weui-cell_active weui-cell_vcode"><div class="weui-cell__hd"><label class="weui-label">验证码</label></div><div class="weui-cell__bd"><input class="weui-input" type="text" pattern="[0-9]*" placeholder="输入验证码" maxlength="6"/></div><div class="weui-cell__ft"><button class="weui-btn weui-btn_default weui-vcode-btn" @click="getCode">获取验证码</button></div></div></div><div class="weui-cells__tips"><a class="weui-link" href="javascript:">收不到验证码</a></div></div></div><div class="weui-form__tips-area"><label id="weuiAgree" for="weuiAgreeCheckbox" class="weui-agree"><input id="weuiAgreeCheckbox" type="checkbox" class="weui-agree__checkbox"/><span class="weui-agree__text">阅读并同意<a href="javascript:">《相关条款》</a></span></label></div><div class="weui-form__opr-area"><a class="weui-btn weui-btn_primary weui-btn_disabled" href="javascript:" id="showTooltips">确定</a></div></div></div>
</template>

样式

.close{
width: 25px;
height: 25px;
position: absolute;
top: 25px;
left: 25px;
background-image: url(../../assets/images/cuo.jpg);
background-size:100%;
}
.weui-cells__group_form .weui-cell__hd {padding-right: 10px;
}

vue+weui 手机端项目相关推荐

vue 限制手机端访问
vue 限制手机端访问 APP.vue页面 mounted() {var str = navigator.userAgentvar ipad = str.match(/(iPad).*OS\s([\d ...
springboot+vue练手小项目[前台搭建+后台编写]（非常详细）
[ springboot+vue练手小项目 ] 技术栈: springboot+vue3+element-plus +Mybaties-plus+hutool +mysql8 项目介绍 :最近刚学了s ...
vue手机端项目php,MintUI基于Vue.js移动端组件库详解
Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.接下来通过本文给大家分享Mint UI 基于 Vue.js 移动端组件库,需要的朋友参考下吧,希望能帮助到大家. 官网 ...
vux 组件打造手机端项目
其实,我用vux组件的过程是这样的,哇!太方便了!!功能好全!!太简单了!!然后,就各种"跳坑".以下排坑环节. 1.安装vux:cnpm i -S vux; 比较顺利吧. 2 ...
云-移动手机端项目总结
移动端网页的坑坑洼洼 1,flex伸缩布局的坑 flex布局是我在移动端用得最多的一种布局技巧,可成想,在不同的手机浏览器中,它的表现却没那么尽如人意. 先推荐一个可以自动转换css代码的插件(可以兼 ...
springboot+vue练手级项目，真实的在线博客系统
文章目录 spring boot 练手实战项目说明基础知识面试准备 1. 工程搭建 1.1 新建maven工程 1.1.2遇到的bug 1.2 配置 1.3 启动类 2. 首页-文章列表 2.1 ...
vue页面手机端开发总结
当图片的某元素是一张图片,可不设置宽高,将样式设置为如下,这样图片就会撑起来页面,避免一些宽高在不同机型不协调的问题. display: block; width: 100%; 需要条件判断显示不同的 ...
vue慧招网手机端项目记录
2019独角兽企业重金招聘Python工程师标准>>> 1.全局安装node.js,检查是否安装成功 2.安装git 3.安装vue,检查是否安装成功 4.安装vue-cli,检查是 ...
vue手机端项目自适方案
lib-flexible解决移动端自适应花了一个多小时终于解决了这个问题,最近总是在研究如何做好自适应,搜了很多方法,但是总是感觉不尽人意,比如以实际尺寸除以75得出rem,或者是那种px乘以二的, ...

vue+weui 手机端项目

vue+weui 手机端项目

2.2 初始化项目结构

2.3 组件库

2.4 项目中使用weui组件库

2.5 登录功能

vue+weui 手机端项目相关推荐

最新文章

热门文章