Element-UI与Vue项目的整合

创建Element-UI项目

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

https://element.eleme.cn/#/zh-CN

在这里提供两种创建的方式，一种手动命令，一种图形化的方式

基于命令行手动创建

• 安装依赖包 npm i element-ui -S
• 导入Element-UI相关资源

//打开src目录下的main.js

//导入组件库
import ElementUI from 'element-ui'
//导入组件相关样式
import 'element-ui/lib/theme-chalk/index.css'
//配置Vue插件
Vue.use(ElementUI)

• 配置完之后在App.vue的根组件中引入element-ui的样式

<template>
  <div id="app">
    <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>

    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

• 运行 npm run serve 运行项目

引入成功！

基于图形化界面自动安装

• 运行vue ui 命令，打开图形化界面

• 通过Vue项目管理器，进入具体的项目配置面板

• 点击插件----> 添加插件，进入插件查询面板

• 搜索vue-cli-plugin-element 并安装

• 配置插件，实现按需导入，从而减少打包后项目的体积

引入成功!