登录界面架构设计vue、element UI、less

最新推荐文章于 2024-06-19 23:33:54 发布

xh943426

最新推荐文章于 2024-06-19 23:33:54 发布

阅读量350

点赞数

本文链接：https://blog.csdn.net/xh943426/article/details/108288395

版权

本文档介绍了如何使用vue-cli搭建项目，结合webpack进行打包，选用Element UI作为UI框架，并详细阐述了创建登录界面（loge.vue）的过程，包括在页面中引入UI组件、配置路由和使用less进行样式定制。在表单验证方面，讨论了rules属性的使用方法，如required和message属性，以及如何通过prop属性与rules对应。同时提到了less样式的独立创建和导入。

摘要由CSDN通过智能技术生成

一、搭建

1.安装vue-cli脚手架

npm install -g @vue/cli-init


vue init webpack baoge//创建项目名称

2.安装webback打包工具

 npm install webpack-dev-server -g

3.创建vue webpack包
如果报错，按照提示下载相应的资源包即可

vue init webpack my-pro1

4.下载UI框架

npm i element-ui -S

5.进入到my-pro1文件下，并且运行

cd my-pro1

npm run serve

二、具体实现

在pafe文件下创建登录界面（loge.vue）,参照element ui框架创建界面，在主入口文件index.js下引入，分配路；使用less样式对其修改。
在element UI form表单中可憎将rules属性（验证表单），在对应字段增加prop属性(与rules对应）
rules规则是：

export default {
   
    ...
    data() {
   
        return {
   
            ...
            rules: {
   
                price: [{
    required: true, message: '不能为空', trigger: 'blur' }]
            },
            ...
        }
    },