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

一、搭建

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' }]
            },
            ...
        }
    },

required：表单必填项
mes