引用测试自己的vue组件

--基于parcel

假设用户使用vue cli

关于旧版本

Vue CLI的包名称由vue-cli改成了@vue/cli。如果你已经全局安装了旧版本的vue-cli(1.x或2.x),你需要先通过npm uninstall vue-cli -g或yarn global remove vue-cli卸载它。

npm install -g @vue/cli
# or
yarn global add @vue/cli复制代码

可以使用npm命令来安装,但是我发现npm老是报错,所以改用yarn来安装

npm install yarn

npm和yarn不能混着用

$ vue --version //3.7.0

运行以下命令来创建一个新项目:

vue create hello-world

你会被提示选取一个预设。你可以选默认的包含了基本的Babel + ESLint设置的预设(一直回车),也可以选“手动选择特性”来选取需要的特性。


根据提示进入 hello-world cd hello-world

运行 yarn serve


打开网址,得到了我们的第一个vue-app。

进入src>main.js


在hello-world文件夹安装自己的组件,不能使用淘宝镜像,因为只上传到了npm平台

yran add vue-wheel


这个警告只是说hapi组件被弃用了

下载完成之后就可以在mian.js引用

打开网址。结果报错。


因为组件使用的是import语法,而node是不支持的

我们应该用babel把它转换成,可以执行的js

在组件目录内运行 npm parcel build index.js --no-minify

把package.json内入口文件index.js改为dist/index.js  同时升级版本号

在引用目录内,重装组件  yarn add vue-wheel 

运行 yran serve

结果成功

在app.vue内引入组件,技术有限,手动引入css


完成



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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值