用vite搭建vue3应用的实现方法

2023-07-05 07:38:03 82

一,安装

提示:VUE3.0目前还没有官方的翻译文档。但是已经有人翻译了。得到了尤雨溪大佬的点赞，这里附上网址https://v3.cn.vuejs.org/

1.安装cli

因为要使用vue3必须要求cli的版本比较高,必须要高于4.5.X
所以没有安装的cli的就直接安装最新版就行了,已有的可以升级或者卸载后重新安装
最好是全局安装

//全局安装
npminstall-g@vue/cli
#OR
yarnglobaladd@vue/cli
//全局卸载
npmuninstall-gvue-cli
#OR
yarnglobalremovevue-cli
//升级cli
npmupdate-g@vue/cli
#OR
yarnglobalupgrade--latest@vue/cli
//查看本机cli版本
vue--version

2.创建项目

既然我们都使用了VUE3,不妨来试试最新的vite构建工具。
没准可以给你打开新世界的大门

//新建项目
npminitvite-appasiterVue3
//进入目录
cdasiterVue3
//安装依赖
npminstall
//运行
npmrundev

3.查看项目

VUE3.0相比VUE2.0来说可以说的是简洁了不少
而且main.js改动也是非常明显

import{createApp}from"vue";
importAppfrom"./App.vue";
import"./index.css";

createApp(App).mount("#app");

importVuefrom"vue";
importAppfrom"./App";
Vue.config.productionTip=false;

newVue({
el:"#app",
components:{App},
template:"",
});

其次我们目光放到App.vue上,最明显的事情就是template节点内不是只能存在一个根节点了。

//就是这个地方虽然Vetur插件会报错但是不影响使用

4.添加路由Vue-Router

由于我们用的是VUE3.0,所以我们VUE-ROUTER也要对应版本为4.X.

npminstallvue-router@next-S

附件:

npminstallvue-router会下到3.0的版本
所以我们需要npminstallvue-router@next-S进行安装
这里附上github地址https://github.com/vuejs/vue-router-next/releases
截至到今天2020年10月14日,版本已经是v4.0.0-beta.13

安装好后,不会用怎么办。让我们来看看官方的例子先
不会用,我直接CV一波还不行咩

附件:
官方例子地址
https://codesandbox.io/s/vue-router-4-reproduction-hb9lh?file=/index.html

篇幅问题我只粘贴主要部分

这些就是官方例子,我们发现路由的创建有点不同了。
vue2.0里面是用mode来控制路由模式的参数
但是在vue3里面通过createRouter来创建路由实例
history属性来当控制路由模式的参数

顾名思义
createWebHistory方法返回的是History模式
createWebHashHistory方法返回的是Hash模式

所以我们尝试添加进去
先在src目录下新建一个router文件夹,然后在文件夹下面添加一个index.js文件
在文件里面添加以下内容

import{createRouter,createWebHashHistory}from"vue-router";

exportdefaultcreateRouter({
history:createWebHashHistory(),
routes:[
{
path:"/weclome",
component:()=>import("../views/HelloWorld.vue"),
},
],
});

同时在src下新建一个views的文件夹,添加一个HelloWorld.vue的文件
加入以下代码,因为是初见。我就不尝试其他的API了,先跑个效果

然后改造一下我们的App.vue

最后修改一下我们的最重要的main.js文件配置好router

import{createApp}from"vue";
importAppfrom"./App.vue";
import"./index.css";
importrouterfrom"./route";
createApp(App)
.use(router)
.mount("#app");

启动项目,在地址栏输入http://192.168.1.233:3000/#/weclome
发现得到我们想要的东西了

5.添加状态管理Vuex

又是由于我们用的是VUE3.0,所以我们Vuex也要对应支持的版本
截至到今天.已经更新到了4.0.0-beta.4

附件:
附上github地址https://github.com/vuejs/vuex/releases

npmivuex@next-S

然后接着看官方的案例https://github.com/vuejs/vuex/tree/v4.0.0-beta.4

import{createStore}from"vuex";

exportconststore=createStore({
state(){
return{
count:1,
};
},
});

和router一样,对比VUE2来说也是改了写法,先从vuex内用createStore创建一个实例
然后我们也照着写一个

在src目录下新建一个store目录然后添加一个index.js文件.写入以下内容

import{createStore}from"vuex";

exportconststore=createStore({
state(){
return{
author:"Asiter",
describe:"一个贴膜的少年",
};
},
});

回到我们的main.js,修改一下。添加vuex

import{createApp}from"vue";
importAppfrom"./App.vue";
import"./index.css";
importrouterfrom"./route";
import{store}from"./store";
createApp(App)
.use(router)
.use(store)
.mount("#app");

回到一开始我们views下的HelloWorld.vue这个文件
改造一下

启动服务器
打开控制台
重新在地址栏输入http://192.168.1.233:3000/#/weclome
看到了打印信息

这个男人是谁:>>Asiter
他怎么样:>>一个贴膜的少年

6.总结

初期项目就到这里了,vue3还是有很多很好玩的地方的。下次我们就来看看VUE3的亮点CompositionAPI的使用。(最近原神玩的肝有点痛)

到此这篇关于用vite搭建vue3应用的实现方法的文章就介绍到这了,更多相关vite搭建vue3内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。