Vscode+Pycharm+Vue.js+WEUI+django火锅(四）WEUI和Vue整合

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搞定。