Vue移动端的UI库，其实网上推荐的排行榜上看起来都好，尤其是Vuetify 特别有眼缘,因为看到了三个字“易上手”。
但是因为之前系统的Django开发，便于企业微信中访问选用了WEUI，所以还是继续使用WEUI的方案。
1.安装
PS C:\website\myproject> npm install weui.js weui -S
npm warn deprecated balajs@0.1.9: The library is renamed https://www.npmjs.com/package/tsimmes
added 4 packages, and audited 963 packages in 1m
113 packages are looking for funding
run `npm fund` for details
4 moderate severity vulnerabilities
To address issues that do not require attention, run:
npm audit fix
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
PS C:\website\myproject>
2.main.js中引用
import weui from 'weui.js'
import 'weui'
createApp(App).use(router).mount('#app')
不知道如何添加Protype，于是拆成两句：
const app = createApp(App).use(router)
--Vue3已经不用Protype，需要使用
app.config.globalProperties.$weui = weui
app.mount('#app')
3.新建登录页面LoginView
--添加引用
import Login from '../views/loginView.vue'
--添加路由：
{
path:'/login',
name:'login',
component: Login
//component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
}
--LoginView页面内容
<form autocomplete="off" @submit.prevent="submitForm">
<div class="weui-form">
<div class="weui-flex js_category" aria-haspopup="true" aria-expanded="false">
<p class="weui-flex__item">用户登录</p>
</div>
<div class="weui-cells">
<label for="js_input1" class="weui-cell weui-cell_active" id="js_cell">
<div class="weui-cell__hd"><span class="weui-label">用户名</span></div>
<div class="weui-cell__bd weui-flex">
<input id="js_input1" class="weui-input" type="text" placeholder="请输入用户账户" maxlength="30" />
</div>
</label>
<label for="js_input2" class="weui-cell weui-cell_active">
<div class="weui-cell__hd"><span class="weui-label">密码</span></div>
<div class="weui-cell__bd weui-flex">
<input id="js_input2" class="weui-input" type="password" placeholder="请输入密码" />
</div>
</label>
</div>
<div class="weui-form__opr-area">
<button class="weui-btn weui-btn_primary" type="submit" id="showTooltips">确定</button>
</div>
</div>
</form>
<script>
export default {
data() {
return {
username:''
}
},
methods:{
submitForm()
{
this.$router.push('/home')
}
}
}
</script>
按登录按钮能够跳转到主页面
4.遇到的错误问题处理
错误1： 访问http://localhost:8080/login 的错误处理，error Component name "check" should always be multi-word vue/multi-word-component-names
创建视图及组件时需要用组合词才可以，不能用check,需要用到checkView 之类的命名方式。
错误2：ERROR in [eslint]
C:\....\main.js
4:8 error 'weui' is defined but never used no-unused-vars
原因是申明了没有用，可以通过以下代码取消对应的语句的语法检查
//eslint-disable-next-line
--加在报错代码之前
错误3：
Module build failed (from ./node_modules/pug-plain-loader/index.js):
Error: C:\....\views\loginView.vue:2:1
1|
> 2| <div id="container"><div class="uploader"><div class="weui_cells_title">上传</div>
-------^
unexpected token "indent"
原因是从从Django的模板html页面拷贝过来的，vue里面的语法检查通不过导致，将缺少的元素</div>补上就ok了。
错误4：WEUI显示效果无，感觉css不生效，甚至在index.html中引入文件，也没有效果。
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
原因是我从原来Django项目模板中拷贝过来的html内容有问题，最后还是从\node_modules\weui\dist\example 里面找到example,从里面拷贝了html内容，搞定，可能CSS class名不同。
5.设置启动页面--设置程序启动跳转到login页面
App.vue
<template>
<div>
<router-view></router-view>
</div>
</template>
<script>
import Login from './views/loginView.vue'
export default
{
components:{
//eslint-disable-next-line
Login
}
}
</script>
至此，打开页面后打开登录页面，用户登录后跳转到主页，磕磕碰碰把WEUI搞定。
