1、打开element ui官方文档
进入组件导航栏下的安装目录
输入如下命令,进行element ui安装【在本节仅介绍实现全局引用,不介绍局部引用】
npm i element-ui -S
在my-app【打开vscode终端,进入创建vue-cli的文件下进入安装】
如图所示,正在下载
下载完成之后显示如图
打开package.json验证是否安装成功:发现depandencies中可查询到 element-ui的版本号,成功
2、在element-ui官网中进入组件导航栏下的快速上手,查找引入element中的完整引入
将所缺代码写入已创建vue-cli文件夹下的main.js文件中
import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import App from './App.vue'; Vue.use(ElementUI); new Vue({ el: '#app', render: h => h(App) });
引入后如图所示
3、写入element ui组件进行测试【为了方便起见,本处在App.vue组件中进行添加】
注意App.vue的原生样式要去除【否则可能会对样式产生影响】
①去除前
②去除后
将原先引入的HelloWorld组件注释
引入element ui的el-button组件(代码如下:详情见官方文档)
<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的代码段如图所示
3、启动项目,检验element -ui是否引入成功
进入指定目录,输入如下命令
npm run serve
正在启动
启动成功
打开项目,发现element ui已经被成功使用