vue3.0来了!怎样自己创建一个vue3.0的项目?vue-next项目创建踩坑讲解

话不多说,干货呈上!

首先先找一个空的文件夹然后在文件夹内在官方仓库引入一个vue-next

git clone https://github.com/vuejs/vue-next.git

然后打开刚刚克隆完成的 vue-next 文件夹下下载依赖

npm i

然后进行编译

npm run dev

之后就可以在vue-next/packages/vue/dist下看到生成的vue.global.js文件啦!
然后自己创建一个html文件,将咋们的vue3.0导入进去就可以使用最新的vue3.0啦!
**

首先来个HELLO VUE3.0!

**
引入vue3.0
vue3.0测试
大家可以看到vue3.0时按需引入的,所以语法还是和vue2.0有很大差别的哦!但是相信聪明的大家在有vue2.0的基础上还是可以很快的适应3.0的语法的!(毕竟这砖还是得搬的呀TAT)
如果大家还想看更多的例子可以在
vue-next/packages/vue/examples/composition中查看官方写的例子来学习哟~

大家会不会突然想问这哪里是一个项目呀!这不就是一个引入js文件的demo吗!好了好了别骂了!vue3.0通过vue cli创建项目教程这就来了!
**

vue cli 创建vue3.0项目!

**
首先很重要的一点就是现在一个你想创建vue项目的文件夹下查看你的vue cli的版本!必须要4.0以上才能够创建vue3.0项目

vue -V

如果版本低于4.0则要升级vue脚手架!参考:vue脚手架

npm install -g @vue/cli

更新完脚手架之后再查看版本出现的是:
在这里插入图片描述
你就可以召唤神龙了!!
哦!不 !可以安装vue3.0了!
你就可以在此文件夹下输入你的对象的名字并创建她(我的叫vue3demo)

vue create vue3demo

配置可以自选哟!来来来 36 E …
好了开玩笑!大家默认就好啦也可以自选哦
在这里插入图片描述
当你生成了你的对象的时候(哦不,vue3.0时)别急着马上…她!慢慢来!先看看是不是你想要的vue3.0!在vue3demo/package.json中一看!发现竟然vue的版本还不是3.0!心想上当了呀!别急!因为现在vue cli脚手架还不能直接下载vue3.0我们还需要一一个插件!
在vue3demo文件夹下输入

vue add vue-next

这下再去package.json中一看!终于对了!!!是我理想中的对象!!!
这时输入神秘代码就可以启动她啦!好好享受与vue3.0的二人世界吧!

npm  run serve

在这里插入图片描述
要是有什么疑问可以评论区留言!或私信问我哟~

  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值