vue3.0+vant新建项目

一、项目初始化

---

1.nodejs的安装不用我多说了吧，nodejs官网地址。

2.vue-cli最新版已经可以快速搭建3.0了，那怎么升级到最新版呢？vue-cli官网地址，不知道vue-cli版本的执行命令vue --version 或 vue -V
已经安装vue-cli的同学们执行命令:npm update -g @vue/cli
未安装vue-cli 执行命令：npm install -g @vue/cli
特别注意：Node 版本要求

Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。你可以使用 n，nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。
3.安装完最新版vue-cli后，执行命令：

vue create xxxxx(这是你自己要取的项目名称)

可以看见图1

图1

由图1我们选择选择最后一项Manually select features（手动选择）

图2

这个是我基本配置,其他的ts、router，vuex等根据自己项目需求进行选择。

图3

    

图4

图3当选择第一项后 就会提示选择vue的版本，这里选第二个3.x，图4是否路由使用history模式，需要后端配合，不然会出现/404，根据自身项目需求而定，我这里不选择。

图5 图6

由上图1和图2，根据自己需求爱好选择css语言、eslint等配置

图7

根据自己需求创建完项目后，cd 到项目名目录下 ，直接npm run serve 启动当前项目

二、vue3+vant引入使用

---

vant的引入：进入vant的官网选择3x，官网已经出来了vant3，然后按照文档

图8 图9

这里我推荐你们按需引入：

图10

这样配置好以后我们最好重启一下项目，避免配置不生效。

图11

打开项目中的main.js中发现和我们vue2.0+的版本还是有些区别了 ，这里不再是使用new Vue 而是使用createApp了其实都差不多吧。
下面参考一个列子吧:

图12 图13

好了、对3.0不熟悉的api、torefs ，ref，isref，reactive等的大家自行百度或者参考官网吧。