1、安装loader模块
请确保vue2.0的项目在安装element-ui之前已经安装了style-loader、css-loader、file-loader等loader模块。如果没有安装过以上三个loader模块的话,可以用下面三个命令安装:
npm install style-loader -D
npm install css-loader -D
npm install file-loader -D
2、安装 Element-UI 模块
使用命令:npm install element-ui --save安装Element-UI 模块
注:为啥是-S,而不是-D或者-g呢?
原因:npm install ** -g为全局安装,全局安装的包为命令行使用,所以这里不使用npm install ** -g;npm install ** -S (即npm install ** -save) 与 npm install ** -D (即 npm install ** -save-dev)都是本地安装,但两者有区别,用这两个命令下载的包会分别写入到项目的package.json文件中的dependencies和devDependencies中去,而devDependencies的包是在项目开发过程中使用,而dependencies中的包会一直跟着项目到生产环境使用的。所以我们这里使用的命令是-S。
3、将element-ui引入vue项目中
打开项目文件中src文件夹下的main.js文件,添加以下三条:
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(ElementUI)
4、下面可以在.vue文件里用element-ui组件了
例如:
<template>
<div class="hello">
<el-radio v-model="radio" label="1">备选项</el-radio>
<el-radio v-model="radio" label="2">备选项</el-radio>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
radio: '1'
};
}
}
</script>
显示内容为: