搭建vue开发环境 + 整合element ui

如果你是新手，只是简单想使用element ui + vue.js,强烈建议不要参考本教程，特别重要，不要耽搁不必要的时间

建议使用：CDN方式

参考demo：https://jsfiddle.net/hzfpyvg6/14/

不参考建议请看吧，新手会耽搁很多时间搞的

环境依赖准备

这里依赖于 node js，与 vue-cli 安装，需要自行安装。自行百度，可根据报错提示信息安装

基础vue环境搭建

• 新建一个工程，取名：vue-element

vue create vue-element

• 选则default方式

创建成功

先测试一下，执行提示命令（这里还没有使用到element ui）

 $ cd vue-element
 $ npm run serve

访问提示地址

  - Local:   http://localhost:8080/

安装成功以后的工程目录

整合element ui

对于初学者执行以下命令，减少不必要的配置

vue add element

选择 Import on demand 选项，选择 zh-CN 选项

执行成功

继续执行命令，安装element依赖库

npm i element-ui -S

因为需要修改文件，我这里将工程导入到 vscode 编辑器进行编辑

重新运行

  - Local:   http://localhost:8080/

多了element ui的元素

自定义element ui的demo

• 修改 main.js 文件

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

• 修改 App.vue 文件

<template>
  <div id="app">
    <first title="这是我的入参，以下是element ui的元素展示"/>
  </div>
</template>

<script>
import first from './components/demo/first.vue'

export default {
  name: 'app',
  components: {
    first
  }
}
</script>

• 新增 first.vue 文件
  

<template>
  <div class="hello">
    <h1>{{ title }}</h1>
    <div>
        <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>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: String
  }
}
</script>

重启，特种重要，不然不会产生main.js新的依赖

测试结果

开始使用element ui吧，这是官网元素，随意测试:
http://element-cn.eleme.io/#/zh-CN/component/rate