基于element-ui的框架(一)环境搭建

一 、创建项目

命令 :  1  vue init webpack my-element  //创建vue 项目

               2  cd my-element                         

               3 cnpm i element-ui -S              //安装elementui的依赖

               4 npm run dev                           //运行测试


二、使用webstorm开发

            1 导入项目


   2 创建npm 方便开发测试

以后点击右上绿色按钮就可以运行了


三、使用elementUI组件


框架结构


1 compnents里面存放组件

2 datas 存放测试数据

3 libs存放引入资源 js,css,img,字体等

4 routers存放路由配置

5 views存放页面 




一、引入elementUI

import ElementUIfrom 'element-ui' // 引入elementUI组件

import 'element-ui/lib/theme-chalk/index.css'//引入elementUI样式

二、路由配置


三、编写home页面






运行测试如下:



以上仅仅是粗略的测试使用elementUI 组件,后期会详细设计页面并实现!

推荐阅读更多精彩内容