vue项目导入elementui_vue项目中引入element-ui框架的流程和注意事项

最近开始着手创建vue web项目,安装流程(连接)搭建好了环境,然后想使用element-ui框架的时候竟然发现出了错。如果你也有这样的问题,请继续看下去吧。

一、安装element-ui

安装官方element-ui文档的安装方法安装。在npm中输入如下命令:

npm i element-ui -S

安装成功后就会发现就你的项目依赖目录下多了一个【element-ui】文件夹。因为文件太多了有点难找,直接搜就能搜出来,如果没有可以再执行一下上面的命令,因为我第一次也没安装成功呢。

如图:

二、引入

引入文件到相应的文件当中去,不过一般都是在main.js中全局引入,这样其他的文件不用多次引入也可以直接使用了。如图,是我在初次新建main.js中新增的语句,是引入element-ui的关键。

三、使用

到element-ui中复制一段html代码块过来测试一下,开始我是直接放在index.html中,发现是不行的,出错了。这就是我想说的重点,之所以出错是找不到模版吧。所以一定是要模版.vue后续的文件。所以我把代码复制到项目自带的测试文件【HelloWorld】中就可以了。

四、创建模版vue文件

上面的例子是拿项目原来就有的测试文件来用了,那怎么自己快速创建项目vue模版文件呢?

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值