从新建vue项目到引入组件Element流程

本文详细介绍了如何从零开始创建一个Vue项目,并成功引入Element UI组件库,包括环境配置、常见错误处理及版本兼容性问题解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

从新建vue项目到引入组件Element
以及Error when rendering component报错解决
一、新建项目
1.打开cmd,运行:vue init webpack Vue-Demo
这里写图片描述
2.运行:cd Vue-Demo进入这一级
3.运行:npm install
4.运行:npm run dev
如果浏览器打开之后,没有加载出页面,说明本地的8080 端口被占用,需要修改一下配置文件 config/index.js
这里写图片描述
解释:1.将 build 的路径前缀修改为 ’ https://blog.youkuaiyun.com/lzc4869/article/details/ ‘(原本为 ’ / ‘),是因为打包之后,外部引入 js 和 css 文件时,如果路
径以 ’ / ’ 开头,那么在本地是无法找到对应文件。所以如果需要在本地打开打包后的文件,
就得修改文件路径。
2.将端口号改为不常用的端口。

显示页面如下:
这里写图片描述
项目新建完成。

二、引入Element

1.打开cmd,在当前目录中运行:npm i element-ui -S
这里写图片描述
2.src/main.js(红色的)

3.然后在.vue文件里就直接可以用了
例如:在src/components/Hello.vue做一下修改

运行:npm run dev

你将看到如下页面:

这里写图片描述
成功的引入了Element!!
更多样式请参考:http://element.eleme.io/#/zh-CN/component/layout


原因如下:
Vue 2.1.5 将 _h 重命名为 _c,而 Element 目前发的版本都是用以前的 compiler 编译的,
导致新版 runtime 无法运行 Element。目前的解决方案是锁定 Vue 的版本为 2.1.4
锁定vue相关版本
npm remove vue #卸载相关的版本

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值