vue+weui 手机端项目

vue+weui 手机端项目

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

1. 用脚手架创建vue项目
2. 再visCode中安装 ESLint 插件 （这个不是每次都安装，安装一次就行，他是visCode的插件）
3. 然后配置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;
}