如何在vue项目中引入Element UI组件

如何在vue项目中引入Element UI组件

该实例只详细介绍了如何在vue项目中引入Element UI组件，下面是对vue初始化项目的简单介绍。

> npm i -g vue-cli

> mkdir my-project && cd my-project

> vue init webpack

利用vue-cli脚手架初始化项目

安装element-ui组件

查看配置文件package.json，是否有element-u组件的版本号

在node_modules中也可以查看，所有安装的源文件可以在这里面找到

在main.js中引入

以下代码便完成了 Element 的引入

import ElementUI from 'element-ui'

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

Vue.use(ElementUI)

当然也可以按需引入Element UI组件

1）先安装 babel-plugin-component

{

"presets": [

["es2015", { "modules": false }]

],

"plugins": [["component", [

{

"libraryName": "element-ui",

"styleLibraryName": "theme-chalk"

}

]]]

}

2）修改.babelrc

3）在 main.js 中引入你所需要的组件

在创建的组件使用element的组件

查看效果

可以看到我们成功的使用了element组件