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

相关推荐
_233335 分钟前
vue3二次封装element-plus表格,slot透传,动态slot。
前端·vue.js
Dobby_051 小时前
【Go】C++ 转 Go 第(一)天:环境搭建 Windows + VSCode 远程连接 Linux
linux·运维·c++·vscode·golang
小叮当⇔2 小时前
PYcharm——获取天气
ide·python·pycharm
浪裡遊2 小时前
MUI组件库与主题系统全面指南
开发语言·前端·javascript·vue.js·react.js·前端框架·node.js
tianyuanwo2 小时前
VSCode高效使用完全指南:提升开发效率的系统化实践
ide·vscode·编辑器
小蕾Java2 小时前
PyCharm 2025:最新使用图文教程!
ide·python·pycharm
梵得儿SHI4 小时前
Vue 开发环境搭建全指南:从工具准备到项目启动
前端·javascript·vue.js·node.js·pnpm·vue开发环境·nvm版本管理
peachSoda75 小时前
自定义配置小程序tabbar逻辑思路
javascript·vue.js·微信小程序·小程序
fruge5 小时前
Vue 3 完全指南:响应式原理、组合式 API 与实战优化
javascript·vue.js·ecmascript
paopaokaka_luck5 小时前
基于SpringBoot+Vue的数码交流管理系统(AI问答、协同过滤算法、websocket实时聊天、Echarts图形化分析)
vue.js·人工智能·spring boot·websocket·echarts