引用测试自己的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设置的预设(一直回车)，也可以选“手动选择特性”来选取需要的特性。

image

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

运行 yarn serve

image

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

进入src>main.js

image

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

yran add vue-wheel

image

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

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

image

打开网址。结果报错。

image

因为组件使用的是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

image

完成

image