vue vant项目,vue3 vant
本文主要介绍vue3.0 vant3.0快速构建项目的实现，通过实例代码详细介绍，具有一定的参考价值。感兴趣的朋友可以参考一下。
一、项目建设情况。vue3体验vant介绍2020年9月18日，vue.js 3.0正式发布。看网上关于3.0的教程还不够完整，但实际上最新版本的vuecli已经支持vue3.0项目的快速构建。本文将向您展示vue3.0有哪些新的变化，以及如何快速构建vue3.0项目。
目录
1.首先nodejs的安装不用我多说，官网nodejs的地址。
2.既然vuecli最新版本可以快速构建3.0，那么如何升级到最新版本呢？官网vue-cli的地址，不知道vue-cli版本的执行命令。
Vue版本或vue -V
特别注意：
节点版本要求
Vue CLI 4.x需要Node.js v8.9或更高版本(建议使用v10或更高版本)。您可以使用n、nvm或nvm-windows在同一台计算机上管理多个版本的Node。
安装了vue-cli的bosses执行命令：
国家预防机制更新-g @vue/cli
vue-cli执行命令未安装：
npm安装-g @vue/cli
在这里，我推荐你去官网看文件。官网已经详细介绍了安装、更新和查看版本。
安装最新版本的vuecli后，执行以下命令：
Vue创建hello-world(这是您自己项目的名称)
你可以看到有以下选项：(忽略第二个vue3-test)
这里可以看到vue 3项目已经有选项了，然后选择最后一个，手动选择特性。
第一个选项是选择vue的版本，必须选择。其他路线，vuex等。可以根据自己的需求选择。
选择第一项时，会提示您选择vue的版本。在这里，选择第二个。
这里是路由是否使用历史模式，需要后端配合。我不选择这里。
根据自己的需求和爱好选择css语言等配置。
根据自己的需要在项目后创建cd项目名称，并使用npm run serve启动项目！
一、项目的搭建
vant简介：
首先进入vant的官网：vant的官网地址。不知道细心的大佬们有没有在版本号找到新版本。
没错，这就是为vue3量身定制的vant3，把版本切换到3，然后看文档。
推荐在这里点播介绍：
配置完成后，最好重启项目，以免配置失效。
在这里找到任何按钮。
main.js更新了在vue3.0中创建vue实例和挂载的例子，这里使用的不是new Vue，而是createApp:
从“vue”导入{ createApp }
从导入应用程序。/App.vue
从导入路由器。/路由器
从导入存储。/商店
从导入http。/utils/http ；//这里是我自己打包的axios。
从“vant”导入{ Button }；
const app=createApp
//vue3.0不能再像以前一样在vue原型对象上挂载公共方法属性。
//在这里，您可以在第二个参数中编写公共方法属性，该参数是一个对象
//组件的注册由调用。使用链条。
app(App，{ http })。使用(按钮)。使用(存储)。使用(路由器)。挂载(#app)
清空Home.vue中不必要的例子
以下是我认为最方便使用的例子：
模板
div class=home
{ { num } }-{ { active num } }-{ { ref data } }
！vant组件的使用-
van-button size= large type= primary @ click= change num change num/van-button
Van-button type=成功 @ click=路由器推送路由跳转/van-button
/div
/模板
脚本
//哪些模块需要按需引入
从“vue”导入{ toRefs，reactive，onMounted，getCurrentInstance，watch，computed，ref }；
导出默认值{
姓名：家，
//与vue2.0相同接受父组件传递的值和main.js传递的值
道具：[http]，
//必须写入安装程序
设置(道具、上下文){
//这里的ctx和vue2的这个差不多
const { CTX }=getCurrentInstance()；
//路由这个。$路由器
const路由器=ctx。$路由器；
//main.js传入的封装axios
const http=ctx.http
//我个人还是不建议这么写，因为每次创建新的响应式数据都要用ref包装，很麻烦。
constrafdata=ref( 1212 )//ref包成为响应对象。
//个人觉得这样写比较舒服，类似vue2里的数据
Const state=reactive({//函数接收普通对象，返回响应数据对象。
数字：0，
});
//计算属性个人喜欢写在对象中，因为这样可以看得更清楚，防止计算属性方法混淆，难以区分。
const computedData={
//写计算属性的时候别忘了引入computed。
active num:computed(()=state . num * 2)
}
//方法我个人喜欢写在对象里面，因为这样可以看得更清楚，而且计算属性的方法也很难区分。
常量方法={
changeNum: ()={
state.num
ref包装的数据必须用。价值。
refData.value
},
routerPush() {
//路由跳转
router.push({
名称：“测试”，
});
},
//网络请求
异步getUserInfo() {
尝试{
let { data }=await http . get( http://localhost:3000/xiaochengxu/)；
console.log(数据)；
} catch(错误){
console.log(错误)；
}
},
};
//挂载的vue 3，和vue2一样，去掉了boforcreate和create两个生命周期。安装是这两个生命周期之间的新生命周期。
onMounted(()={
methods . get userinfo()；
});
//手表的使用
手表(()=state.num，value={
Console.log(num change ，值)
})
//必须将其返回到模板中才能使用
返回{
.toRefs(state)，//可以直接把responsive对象当做普通对象使用，不需要state.num。
.方法，//解构赋值
.计算数据，
refData
};
},
};
/脚本
如果不知道torefs，ref，isref，reactive等的用法建议。在这里，请看这篇文章，介绍也很详细。我只是用我觉得比较方便的。
关于vue3.0 vant3.0快速构建项目实施的这篇文章到此为止。更多关于vue3.0 vant3.0建设项目的信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。