vue3.0+vant3.0快速搭建项⽬的实现
⽬录
⼀、项⽬的搭建
⼆、vue3体验+vant引⼊
2020年09⽉18⽇，vue.js 3.0正式发布，去⽹上看了看关于3.0的教程都不够完整，但其实vuecli最新版已经⽀持了vue3.0项⽬的快速搭建，这篇⽂章将带你了解⼀下vue3.0有哪些新的改变以及如何快速搭建vue3.0项⽬。
⼀、项⽬的搭建
1.⾸先，nodejs的安装不⽤我多说了吧，。
2.既然vuecli最新版已经可以快速搭建
3.0了，那怎么升级到最新版呢？，不知道vue-cli版本的执⾏命令
vue --version 或 vue -V
特别注意：
Node 版本要求
Vue CLI 4.x 需要 Node.js v8.9 或更⾼版本 (推荐 v10 以上)。你可以使⽤ n，nvm 或 nvm-windows 在同⼀台电脑中管理多个 Node 版本。
已经安装vue-cli的⽼板们执⾏命令：
npm update -g @vue/cli
未安装vue-cli 执⾏命令：
npm install -g @vue/cli
这⾥还是推荐⼤家去官⽹看⽂档，官⽹对安装更新查看版本这块已经很详细了。
安装完最新版vuecli后，执⾏命令：
vue create hello-world(这是你⾃⼰的项⽬名称)
可以看到有以下选项：(第⼆个vue3-test⽆视即可)
这⾥可以看到已经有vue 3 项⽬的选项了，然后选择最后⼀项Manually select features（⼿动选择）
第⼀个选项是选择vue的版本，⼀定要选，其他的路由，vuex等根据⾃⼰需求进⾏选择。
当选择第⼀项后就会提⽰选择vue的版本，这⾥选第⼆个
这⾥是是否路由使⽤history模式，需要后端配合，我这⾥不选择。
这块根据⾃⼰需求爱好选择css语⾔等配置
根据⾃⼰需求创建完项⽬后cd 项⽬名，同样npm run serve 启动项⽬吧！
⼆、vue3体验+vant引⼊
vant的引⼊：
⾸先进⼊vant的官⽹：vant官⽹地址，不知道⼼细的⽼板们发没发现版本号处有了新的版本
没错，这就是为vue3量⾝定制了vant3，切换版本到3，然后阅读⽂档
这⾥推荐按需引⼊：
配置好以后最好重启⼀下项⽬，避免配置不⽣效。这⾥随便个button按钮
main.js中已经更新了vue3.0创建vue实例及挂载的⽰例，这⾥不再是使⽤new Vue ⽽是使⽤createApp：import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import http from './utils/http';//这⾥是我⾃⼰封装的axios
import { Button } from 'vant';
const app = createApp
//vue3.0不再可以像之前⼀样可以将公共⽅法属性等挂载到vue的原型对象上
//这⾥可以将公共⽅法属性写在第⼆个参数中，参数是⼀个对象
//组件的注册通过.use链式调⽤
app(App, { http }).use(Button).use(store).use(router).mount('#app')
Home.vue中清空不需要的⽰例
这⾥只讲述我认为使⽤最⽅便的⽰例：
<template>
<div class="home">
{{ num }}----{{activeNum}}----{{refData}}
<!-- vant 组件使⽤ -->
<van-button size="large" type="primary" @click="changeNum">changeNum</van-button>
<van-button type="success" @click="routerPush">路由跳转</van-button>
</div>
</template>
<script>
//需要哪些模块按需引⼊
import { toRefs, reactive, onMounted, getCurrentInstance,watch ,computed,ref} from "vue";
export default {
name: "Home",
// 同vue2.0 接受⽗组件传值及main.js 中传的值
props: ["http"],
// 必须写⼊setup⾥
setup(props, context) {
//这⾥的ctx  类似于vue2的this
const { ctx } = getCurrentInstance();
//路由 this.$router
const router = ctx.$router;
//main.js传⼊的封装axios
const http = ctx.http;
// 个⼈还是不推荐这样写因为每次新建⼀个响应式数据就要ref包裹⼀下很⿇烦
const refData = ref('1212')//ref包裹变为响应式对象
// 个⼈觉着还是这样写舒服⼀点类似于vue2中的data
const state = reactive({//函数接收⼀个普通对象，返回⼀个响应式的数据对象
num: 0,
});
//计算属性个⼈喜欢写在对象中因为看得更清晰⼀下防⽌计算属性⽅法等混在⼀起不好区分
const computedData = {
// 计算属性写法别忘记引⼊ computed
activeNum : computed(()=>state.num*2)vue中reactive
}
//⽅法个⼈喜欢写在对象中因为看得更清晰⼀下防⽌计算属性⽅法等混在⼀起不好区分
const methods = {
changeNum: () => {
state.num++;
// ref包裹的数据必须⽤.value获取
refData.value++
},
routerPush() {
//路由跳转
router.push({
name: "test",
});
},
//⽹络请求
async getUserInfo() {
try {
let { data } = ("localhost:3000/xiaochengxu/");
console.log(data);
} catch (error) {
console.log(error);
}
},
};
// 同vue2 的 mounted vue 3 移除了 boforcreate和created两个⽣命周期  setup即为这两个⽣命周期之间的新⽣命周期
onMounted(() => {
});
// watch的使⽤
watch(()=>state.num,value=>{
console.log('num改变',value)
})
//必须返回模板中才能使⽤
return {
...toRefs(state),// 将响应式的对象变为普通对象使⽤时不需要state.num 直接num即可使⽤
...methods,// 解构赋值
..putedData,
refData
};
},
};
</script>
这⾥如果对torefs ，ref，isref，reactive等等不知道⽤法的建议去看，介绍的也很详细，我这⾥只是⽤的⾃⼰认为较为⽅便的写法。
到此这篇关于vue3.0+vant3.0快速搭建项⽬的实现的⽂章就介绍到这了，更多相关vue3.0+vant3.0 搭建项⽬内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。