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中加入如下代码，进行测试

2.5 登录功能

效果展示图

模板

样式

.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;
}