--基于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# oryarn 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
完成