使用Vue + element + sass开发前端的已有组件和自定义组件vue属于一种mvvm开发模式，也就是数据驱动

vue属于一种mvvm开发模式，也就是数据驱动渲染页面。

前期准备

安装nodejs 下载地址
安装vue-cli脚手架

npm install -g @vue/cli
# OR
yarn global add @vue/cli

初始化项目

vue create hello-world

引入依赖

npm install node-sass sass-loader css-loader -save

Element-UI 它是一款ui组件，在vue的基础上，结合sass开发的一套具有自有样式的组件库

设计原则：

一致性 Consistency 与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
反馈 Feedback 控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
效率 Efficiency 简化流程：设计简洁直观的操作流程；清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
可控 Controllability 用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。

官网地址

其中element自带的组件在普通开发中是能够满足所有需求的一款ui库，不管是通过npm安装

npm i element-ui -S

还是通过cdn的引入的

<!-- 引入样式 --> 
<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>

都是相当容易入手

比如：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
    <el-button @click="visible = true">Button</el-button>
    <el-dialog :visible.sync="visible" title="Hello world">
      <p>Try Element</p>
    </el-dialog>
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return { visible: false }
      }
    })
  </script>
</html>

基础组件(basic)：

Layout 布局

<el-row>
  <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
</el-row>
<el-row>
  <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>

Container 布局容器

<el-container>
  <el-header>Header</el-header>
  <el-main>Main</el-main>
</el-container>

<el-container>
  <el-header>Header</el-header>
  <el-main>Main</el-main>
  <el-footer>Footer</el-footer>
</el-container>

<el-container>
  <el-aside width="200px">Aside</el-aside>
  <el-main>Main</el-main>
</el-container>

Color 色彩主色调(Brand Color)

Typography 字体

font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;

Border 边框 Icon 图标
Button 按钮

<el-row>
  <el-button>默认按钮</el-button>
  <el-button type="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
</el-row>

<el-row>
  <el-button plain>朴素按钮</el-button>
  <el-button type="primary" plain>主要按钮</el-button>
  <el-button type="success" plain>成功按钮</el-button>
  <el-button type="info" plain>信息按钮</el-button>
  <el-button type="warning" plain>警告按钮</el-button>
  <el-button type="danger" plain>危险按钮</el-button>
</el-row>

<el-row>
  <el-button round>圆角按钮</el-button>
  <el-button type="primary" round>主要按钮</el-button>
  <el-button type="success" round>成功按钮</el-button>
  <el-button type="info" round>信息按钮</el-button>
  <el-button type="warning" round>警告按钮</el-button>
  <el-button type="danger" round>危险按钮</el-button>
</el-row>

<el-row>
  <el-button icon="el-icon-search" circle></el-button>
  <el-button type="primary" icon="el-icon-edit" circle></el-button>
  <el-button type="success" icon="el-icon-check" circle></el-button>
  <el-button type="info" icon="el-icon-message" circle></el-button>
  <el-button type="warning" icon="el-icon-star-off" circle></el-button>
  <el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row>

Link 文字链接

<div>
  <el-link href="https://element.eleme.io" target="_blank">默认链接</el-link>
  <el-link type="primary">主要链接</el-link>
  <el-link type="success">成功链接</el-link>
  <el-link type="warning">警告链接</el-link>
  <el-link type="danger">危险链接</el-link>
  <el-link type="info">信息链接</el-link>
</div>

表单组件(form)：

Radio 单选框

<template>
<!--单选-->
  <el-radio v-model="radio" label="1">备选项</el-radio>
  <el-radio v-model="radio" label="2">备选项</el-radio>
<!--单选组-->
<el-radio-group v-model="radio">
    <el-radio :label="3">备选项</el-radio>
    <el-radio :label="6">备选项</el-radio>
    <el-radio :label="9">备选项</el-radio>
</el-radio-group>
</template>

<script>
  export default {
    data () {
      return {
        radio: '1'
      };
    }
  }
</script>

Checkbox 多选框

与单选使用方法一样

Input 输入框

<el-input v-model="input" placeholder="请输入内容"></el-input>

InputNumber 计数器

<el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>

Select 选择器

<el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
 </el-select>
 <!--其中el-option与el-select属于关联使用组件，需要一起使用方可生效-->

Cascader 级联选择器

<div class="block">
  <span class="demonstration">默认 click 触发子菜单</span>
  <el-cascader
    v-model="value"
    :options="options"
    @change="handleChange"></el-cascader>
</div>
<div class="block">
  <span class="demonstration">hover 触发子菜单</span>
  <el-cascader
    v-model="value"
    :options="options"
    :props="{ expandTrigger: 'hover' }"
    @change="handleChange"></el-cascader>
</div>

经过以上的举例，可以看出所有element的组件，都是以el为首的element自定义的组件名命名来做为渲染页面的载体，后续组件为便不一一介绍，只做简单列出

Switch 开关
Slider 滑块
TimePicker 时间选择器
DatePicker 日期选择器
DateTimePicker 日期时间选择器
Upload 上传
Rate 评分
ColorPicker 颜色选择器
Transfer 穿梭框 Form 表单

数据组件(data):

Table 表格
Tag 标签
Progress 进度条
Tree 树形控件
Pagination 分页
Badge 标记
Avatar 头像

提醒组件(Notice)

Alert 警告
Loading 加载
Message 消息提示
MessageBox 弹框
Notification 通知

导航(Navigation)

NavMenu 导航菜单
Tabs 标签页
Breadcrumb 面包屑
PageHeader 页头
Dropdown 下拉菜单
Steps 步骤条

其他(Others)

Dialog 对话框
Tooltip 文字提示
Popover 弹出框
Popconfirm 气泡确认框
Card 卡片
Carousel 走马灯
Collapse 折叠面板
Timeline 时间线
Divider 分割线
Calendar 日历
Image 图片
Backtop 回到顶部
InfiniteScroll 无限滚动
Drawer 抽屉

自定义组件，业务需求组件

header组件增加logo，系统名，用户名，登出等
sideBar组件针对的添加了动态菜单引入，主体色控制，全局控制属性，收缩展开
icon组件增加自定义iconfont字体图标组件
layout布局已实现的是上中下结构，和上左右结构
时间轴组件满足业务需求的组件，可二次开发
echarts组件图表组件，引入echarts的一层包装
动态表单项关于单选框组的封装

代码规范

开发组件中name：不允许任何组件存在同名，命名规则为首字母大写相关英文单词。
路由修改，一级路由采用驼峰命名方法，(比如： fileManage)

2.1 二级路由所有采用小写方式命名。

2.2 多级无需展示的路由中，采用如下形式，其中关联路由需要添加meta属性， title 和 activeMenu为必填项，activeMenu规则参考 3
```
*hidden：true, meta: { icon：'icon-star', *title: '随访详情', noCache: true, *activeMenu: '/fileManagement/medicalfollow' },
```
meta中activeName 为该菜单关联的上级菜单的全路径path。
所有文件命名采用主命名，及功能性全称，子级菜单采用功能延续性命名，比如：
```
一级菜单：药品管理（drugManange），二级菜单： 药品管理（drug）
```
注意，所有路由命名中不允许name属性有相同值，在子级路由命名规则中，比如detail会用到很多，那么这样的情况，name的命名规则为：上级路由主体-当前路由名称，举例：

档案管理(fileManange) --> 建档筛查(screen) --> 筛查详情(detail)
    筛查详情中路由采用
    {
        path: 'detail',
        name: 'screen-detail',
        meta: {title: '筛查详情', activeMenu: 'fileManange/screen'}
        ...
    }

使用sass用法，用来写代码样式，其中变量命名需用'$--'; 公共样式必须引用主文件样式文件统一更改，不允许使用单个颜色。函数方法用 @mixin，使用时用 @include 条件方法使用@if

样式举例： Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器，例如：

#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

编译为：

#main p {
  color: #00ff00;
  width: 97%; }
  #main p .redbox {
    background-color: #ff0000;
    color: #000000; }

统一工作

使用vue + element项目，不允许使用layui等相关ui交叉使用。

缺陷

不能与jq项目混合开发，dom节点不统一，在开发过程中引用jq不仅耗性能，而且不易与代码维护，打包压缩文件也存在不可预期的效果。