Vue项目7：Vue项目整合Element UI

本博文主要介绍如何在Vue Cli项目中使用Element UI，主要包括两大步骤：一、创建Vue项目； 二、使用Element UI

 

一、创建Vue项目

1.创建Vue项目

打开cmd命令窗口，进入工作目录，例如：F:\Study\elmentUI\demo

输入如下命令创建项目，项目名称为：vueaddelement

vue init webpack vueaddelement

创建过程如下：

F:\Study\elmentUI\demo>vue init webpack vueaddelement

? Project name vueaddelement
? Project description A Vue.js project
? Author xxx <xxx@xxx.com>
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "vueaddelement".


# Installing project dependencies ...

等待创建完成后，进入项目目录

cd vueaddelement

2.启动项目

npm run dev

3.修改src/App.vue

用VScode编辑器打开工程文件夹（vueaddelement），修改src/App.vue，注释掉<template>里的<HelloWorld/>，即第四行代码变成<!-- <HelloWorld/> -->。

4.浏览器查看效果

地址栏输入：http://localhost:8080/

 

5.添加一个新的组件ElementTest

在component目录下新建ElementTest.vue文件，代码如下：

<template>
<div id="useElement">
<h1>Element test</h1>
</div>
</template>

<script>
export default {
name: 'ElementTest',
data () {
return {
msg: 'Vue add Element'
}
}
}
</script>

<style scoped>

</style>

6.修改App.vue

<script>里添加 import ElementTest from './components/ElementTest'， components里添加ElementTest组件；<template>里添加<ElementTest/>。App.vue完整代码如下：

<template>
<div id="app">
<img src="./assets/logo.png">
<!-- <HelloWorld/> -->
<ElementTest/>
</div>
</template>

<script>
import HelloWorld from './components/HelloWorld'
import ElementTest from './components/ElementTest'

export default {
name: 'App',
components: {
HelloWorld, ElementTest
}
}
</script>

<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

7.浏览器效果

 

 

二、使用Element UI

Element官方文档地址：https://element.eleme.cn/#/zh-CN/component/installation

1.安装Element

运行如下命令安装Element

npm i element-ui -S

2.使用 Element UI

1）修改main.js

引入element-ui和相关css

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

使用Element UI

Vue.use(ElementUI);

保存。

main.js完整代码：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false

Vue.use(ElementUI);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

2）修改ElementTest.vue

在<template>的div标签里添加element的button和dialog，代码如下：

    <el-button @click="visible = true">Click Me</el-button>
    <el-dialog :visible.sync="visible" title="Hello world">
      <p>Try Element:{{msg}}</p>
    </el-dialog>

在data()里添加

visible: false,

ElementTest.vue完整代码如下：

<template>
  <div id="useElement">
    <h1>Element test</h1>
    <el-button @click="visible = true">Click Me</el-button>
    <el-dialog :visible.sync="visible" title="Hello world">
      <p>Try Element:{{msg}}</p>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'ElementTest',
  data () {
    return {
      msg: 'Vue add Element',
      visible: false,

    }
  }

}
</script>

<style scoped>

</style>

3.浏览器效果

点击Click Me按钮，出现如下Hello world对话框

看到对话框，说明在Vue项目里成功整合了Element UI。

接下来可以按照Element官网进一步学习Element知识。

 

 

完成！ enjoy it!