# vue **Repository Path**: MarkPolaris/vue ## Basic Information - **Project Name**: vue - **Description**: vue练习 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 0 - **Created**: 2019-08-13 - **Last Updated**: 2022-09-11 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # shop ## Project setup ``` npm install ``` ### Compiles and hot-reloads for development ``` npm run serve ``` ### Compiles and minifies for production ``` npm run build ``` ### Run your tests ``` npm run test ``` ### Lints and fixes files ``` npm run lint ``` ### Customize configuration See [Configuration Reference](https://cli.vuejs.org/config/). ### 目录结构 1. public: 放一些静态资源 2. src: + assets: 资源文件 + components: 公共组件 + view: 视图模块 + App.vue: 应用程序入口 + main.js: 程序入口 + router.js: 路由 + 组件vue ### 安装组件 ``` npm i element-ui -S ``` 1. 登录 数据绑定，双向 路由跳转, 两种方式 ``` this.$router.push(/about); ``` ``` this.$router.push({name: 'about'}); ``` 界面展示
1.登录界面 ![输入图片说明](https://images.gitee.com/uploads/images/2019/0813/083155_00e8b0b0_1775424.png "屏幕截图.png") 2.主页面 ![输入图片说明](https://images.gitee.com/uploads/images/2019/0813/083443_2b15fb84_1775424.png "屏幕截图.png") 2. 数据校验 >加在form上 ``` :rules="rules" ``` >在data中定义规则 ``` rules: { username: [{required: true, message: "请输入用户名", trigger: "blur"}] } ``` >添加props ``` ``` >事件中添加 ``` this.$refs.form.validate(valid =>{ if(valid){} } ``` 3.表格设计 >表头固定:
只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。 >固定列
固定列需要使用fixed属性，它接受 Boolean 值或者leftright，表示左边固定还是右边固定。 ``` ```