vue2.0项目中引入element-ui

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)


引入element-ui.jpg
4、下面可以在.vue文件里用element-ui组件了

例如:


显示内容为:


.vue文件中引入组件.jpg

你可能感兴趣的:(vue2.0项目中引入element-ui)