element-ui查询样式_elementUI二次开发 01 快速搭建及项目结构

    目前，vue的生态圈非常繁荣，有CoreUI-Free-Bootstrap-Admin-Template，vue-admin，ivew，vue-material，vuetify，Keen-UI等vue框架，不需要从头搭建项目。

    element UI是一套比较优秀的前端框架。Element是 “饿了么” 出品的一套 Vue.js 后台管理界面的组件库，并且配有强大的学习文档。

官网地址 : https://element.eleme.cn/#/zh-CN
源码地址：https://github.com/PanJiaChen/vue-element-admin
使用指南：https://element.eleme.cn/#/zh-CN/component/installation

1. element-UI搭建

1.1 源码下载

    • 到github网站下载最新的源码文件到本地。

    • 或者Git命令克隆项目

> git clone https://github.com/PanJiaChen/vue-element-admin.git

1.2 项目运行

    • 到项目路径

> cd vue-element-admin

    • 安装依赖

> npm install

    • 运行

> npm run dev

2. element-UI 技术架构

    2.1 项目结构

├── build // 构建相关
├── mock // 项目mock 模拟数据
├── plop-templates // 自动创建项目文件
├── public               // 静态文件目录，类似static
│ ├── favicon.ico // favicon图标
│ └── index.html // html模板
├── src // 源代码
│ ├── api // 所有请求
│ ├── assets // 主题、字体等静态资源
│ ├── components // 全局公用组件
│ ├── directive // 全局指令
│ ├── filtres // 全局 filter
│ ├── icons // 项目所有 svg icons
│ ├── layout // 布局(菜单栏、导航栏、主页面等)
│ ├── router // 路由
│ ├── store // Vuex，全局状态管理
│ ├── styles // 全局样式
│ ├── utils // 全局公用方法
│ ├── vendor // 公用vendor
│ ├── views // view
│ ├── App.vue // 页面入口
│ ├── main.js // 程序入口、加载组件、初始化等
│ ├── permission.js // 权限管理
│ └── setting.js // 定义全局状态
├── tests // 测试文件夹
├── .editorconfig // 代码风格，如缩进等
├── .env.development // 开发环境下的配置文件
├── .env.production // 生产环境下的配置文件
├── .env.staging // 模拟环境下的配置文件
├── .eslintignore // eslint语法检测忽略文件
├── .eslintrc.js // eslint语法规则配置项
├── .gitignore // git忽略项
├── .travis.yml // git的Travis行为
├── babel.config.js // Babel 配置项
├── jest.config.js // Javascript单元测试的工具
├── jsconfig.json // 表示该目录是JavaScript项目的根目录
├── LICENSE // MIT许可证
├── package.json // 包管理
├── plopfile.js // 模板工具
├── postcss.config.js // 给postcss用的，在stylus-loader编译成css之后，在通过postcss优化css
└── vue.config.js // 可选的配置文件，vue cli3.0配置其他参数使用

3. element-UI 主要组件

    3.1 路径别名 alias

    当项目逐渐变大之后，文件与文件直接的引用关系会很复杂，这时候就需要使用alias 了。有的人喜欢alias 指向src目录下，再使用相对路径找文件。

configureWebpack: {name: name,
    resolve: {
      alias: {'@': resolve('src')
      }
    }
  },

      设定文件为vue.config.js，设定@代表src目录，所以：

import Layout from '@/layout' 即import Layout from 'src/layout'。

    3.2 组件开发 components

    这里的 components 放置的都是全局公用的一些组件，如上传组件，富文本等等，element UI已经提供了很多组件。

    一些页面级的组件建议还是放在各自views文件下，方便管理，导入即可。

    3.3 页面开发 views

    • layout布局

    • 页面级别

    功能页面都放在views目录下，按照功能设置目录，vue的页面都是以.vue结尾，该文件分为这几部分：

    放置的是视图信息 view。