本博文主要介绍如何在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!