Element是基于Vue的网站组件库,用于快捷构建网页
像上面这样的样式
官网地址
安装
npm i element-ui -S
装包命令
npm install babel-plugin-component -D
安装好之后会在package.json里面显示版本
在node_modules中会自动初始化一个 element-ui文件夹 ,所有安装的源文件都在这里
引入
然后在官网复制一些样式,运行一下
javascript
<el-row>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>
App.vue
javascript
<template>
<div id="app">
<h3>Chemo</h3>
<hr />
<router-view />
<el-row>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>
</div>
</template>
报错
如果出现这个错误
在babel.config.js里面修改代码(直接复制就OK)
javascript
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset',
["@babel/preset-env", { "modules": false }]
],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
运行
然后重新运行就好了