Vue学习笔记：Vue+elementUI 实现简单的表单提交

前言

    elementUI 是我感觉还不错的一个前端框架，它构建了很多快速搭建板块，比如 导航栏 、分页、

   表格、时间/日期选择器等很多项目中常用的模块，可以快速应用开发。

安装

官方推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。    

npm i element-ui -S

也可以通过 unpkg.com/element-ui获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。

---

开始：构建项目

    1.创建一个新的项目

vue init webpack vue-elementUI

或者

vue create vue-elementUI

    2.安装插件和组件

       安装vue-router

npm install vue-router --save-dev

        安装elementUI

npm i element-ui -S

        安装依赖

npm install

        安装SASS 加载器

cnpm install sass-loader node-sass --save-dev

    3.IDEA 打开并启动项目

npm run dev

启动成功

启动成功后idea 打开项目

创建vue页面 登录页和首页

页面

配置路由js

路由配置

//官网拿过来的 elementUI 和css样式  sass-loader 就是加载样式用的

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';   

main.js 引入路由

页面引入router

App.vue 首页引用router-view

标签引用

elementUI 引用表单  

验证登录

登录页

简单的页面这样就完成了！