前言
elementUI 是我感觉还不错的一个前端框架,它构建了很多快速搭建板块,比如 导航栏 、分页、
表格、时间/日期选择器等很多项目中常用的模块,可以快速应用开发。
安装
官方推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用。
npm i element-ui -S
也可以通过 unpkg.com/element-ui获取到最新版本的资源,在页面上引入 js 和 css 文件即可开始使用。
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
开始:构建项目
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 引入路由
App.vue 首页引用router-view
elementUI 引用表单
验证登录
简单的页面这样就完成了!