引用测试自己的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
    评论
回答: Vue组件化和模块化开发是Vue.js中的两个重要概念。Vue组件化是将一个复杂的页面分解成多个小的组件,每个组件都是独立的个体,互不影响,这样可以提高代码的可维护性和重用性。我们可以通过Vue.component()方法注册全局组件,也可以通过Vue实例的components选项注册局部组件组件可以包括模板、脚本和样式,并且可以通过props和events实现组件间的通讯,实现更灵活的组件化开发。\[1\]\[2\]\[3\] 而模块化开发是一种将代码分解成独立的模块,每个模块都有自己的功能和责任,可以独立开发、测试和维护。在Vue.js中,我们可以使用ES6的模块化语法来实现模块化开发。通过将代码分解成多个模块,可以提高代码的可读性和可维护性,同时也方便了团队协作和代码复用。模块化开发可以帮助我们更好地组织和管理代码,提高开发效率。 #### 引用[.reference_title] - *1* *2* [vue组件化编程(模块与组件,模块化与组件化,非单文件和单文件组件)](https://blog.csdn.net/weixin_41549971/article/details/131656555)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [Vue学习笔记(二)组件化和模块化](https://blog.csdn.net/qq_41404112/article/details/116759104)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值