vue怎么引入和配置使用element-ui框架

 时间:2024-10-14 00:02:10

1、第一步,利用vue-cli脚手架工具创建一个vue项目,创建好的文件目录,如下图。

vue怎么引入和配置使用element-ui框架

2、第二步,找到官方文档,找到使用npm安装的方法,然后打开命令行工具,指定到项目路径,输入【npm i element-ui -S】,如下图

vue怎么引入和配置使用element-ui框架vue怎么引入和配置使用element-ui框架

3、第三步,安装好,如下图【element-ui】后,在项目中【src】目录下找到【main.门钙蹲茌js】,在一下位置添加【import ElementUI from 'element-ui';】【import 'element-ui/lib/theme-chalk/index.css';】,详细如下图

vue怎么引入和配置使用element-ui框架

4、第四步,引入后,在【main.js】下面写多以下代码【Vue.use(ElementUI);】,意思是,vue使用了element-ui,详细如下图

vue怎么引入和配置使用element-ui框架

5、第五步,可以使用element-ui里面的组件了,在element-ui官网随便找一个按钮的样式,复制代码进去页面就可以使用了,如下图

vue怎么引入和配置使用element-ui框架

6、第六步,在页面中复制代码,如下图

vue怎么引入和配置使用element-ui框架

7、第七步,使用【npm run dev】运行项目,然后就可以查看详细页面效果了,如下图

vue怎么引入和配置使用element-ui框架
  • 如何使用table-layout 属性
  • IP地址分类与IP数据包的组成 的探究
  • C#编程:怎么根据位数用0填充一个数字输出
  • css如何给元素添加背景
  • 艾尔登法环怎么骑马
  • 热门搜索
    尼泊尔旅游季节 港澳旅游注意事项 舟山普陀山旅游攻略 去西安旅游攻略 合肥到黄山旅游攻略 澳大利亚新西兰旅游 去哪儿玩旅游网 三门峡旅游网 旅游作文100字 浙江旅游政务网