时间:2021-05-18
提示: VUE3.0目前还没有官方的翻译文档。但是已经有人翻译了。得到了尤雨溪大佬的点赞,这里附上网址https://v3.cn.vuejs.org/
因为要使用 vue3 必须要求 cli 的版本比较高,必须要高于 4.5.X
所以没有安装的 cli 的就直接安装最新版就行了,已有的可以升级或者卸载后重新安装
最好是全局安装
既然我们都使用了 VUE3,不妨来试试最新的 vite 构建工具。
没准可以给你打开新世界的大门
3. 查看项目
VUE3.0 相比 VUE2.0 来说可以说的是简洁了不少
而且 main.js 改动也是非常明显
VUE3.0
import { createApp } from "vue";import App from "./App.vue";import "./index.css";createApp(App).mount("#app");VUE2.0
import Vue from "vue";import App from "./App";Vue.config.productionTip = false;new Vue({ el: "#app", components: { App }, template: "<App/>",});其次我们目光放到 App.vue 上,最明显的事情就是 template 节点内不是只能存在一个根节点了。
//就是这个地方 虽然Vetur插件会报错 但是不影响使用<template> <img alt="Vue logo" src="./assets/logo.png" /> <HelloWorld msg="Hello Vue 3.0 + Vite" /></template><script>import HelloWorld from './components/HelloWorld.vue'export default { name: 'App', components: { HelloWorld }}</script>由于我们用的是 VUE3.0,所以我们VUE-ROUTER也要对应版本为 4.X.
npm install vue-router@next -S附件:
npm install vue-router 会下到 3.0 的版本
所以我们需要 npm install vue-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
篇幅问题我只粘贴主要部分
<script> const { createRouter, createWebHistory, createWebHashHistory } = VueRouter const { createApp } = Vue const Home = { template: `<div>home</div>`, } const Foo = { template: '<div>foo</div>' } const Bar = { template: '<div>bar</div>' } const router = createRouter({ history: createWebHistory(), routes: [ { path: '/', component: Home }, { path: '/foo', component: Foo }, { path: '/bar', component: Bar }, ], }) const app = createApp({}) app.use(router) window.vm = app.mount('#app')</script>这些就是官方例子,我们发现路由的创建有点不同了。
vue2.0 里面是用 mode 来控制路由模式的参数
但是在 vue3 里面通过 createRouter 来创建路由实例
history 属性来当控制路由模式的参数
顾名思义
createWebHistory 方法返回的是 History 模式
createWebHashHistory 方法返回的是 Hash 模式
所以我们尝试添加进去
先在 src 目录下新建一个 router 文件夹,然后在文件夹下面添加一个 index.js 文件
在文件里面添加以下内容
同时在 src 下新建一个 views 的文件夹,添加一个 HelloWorld.vue 的文件
加入以下代码,因为是初见。我就不尝试其他的 API 了,先跑个效果
然后改造一下我们的 App.vue
<template> <router-view></router-view></template><script>export default { name: "App", components: {},};</script>最后修改一下我们的最重要的 main.js 文件配置好 router
import { createApp } from "vue";import App from "./App.vue";import "./index.css";import router from "./route";createApp(App) .use(router) .mount("#app");启动项目,在地址栏输入http://192.168.1.233:3000/#/weclome
发现得到我们想要的东西了
又是由于我们用的是 VUE3.0,所以我们Vuex也要对应支持的版本
截至到今天.已经更新到了 4.0.0-beta.4
附件:
附上 github 地址https://github.com/vuejs/vuex/releases
然后接着看官方的案例https://github.com/vuejs/vuex/tree/v4.0.0-beta.4
import { createStore } from "vuex";export const store = createStore({ state() { return { count: 1, }; },});和 router 一样,对比 VUE2 来说也是改了写法,先从 vuex 内用 createStore 创建一个实例
然后我们也照着写一个
在 src 目录下新建一个 store 目录然后添加一个 index.js 文件.写入以下内容
import { createStore } from "vuex";export const store = createStore({ state() { return { author: "Asiter", describe: "一个贴膜的少年", }; },});回到我们的 main.js,修改一下。添加 vuex
import { createApp } from "vue";import App from "./App.vue";import "./index.css";import router from "./route";import { store } from "./store";createApp(App) .use(router) .use(store) .mount("#app");回到一开始我们 views 下的 HelloWorld.vue 这个文件
改造一下
启动服务器
打开控制台
重新在地址栏输入http://192.168.1.233:3000/#/weclome
看到了打印信息
这个男人是谁:>> Asiter
他怎么样:>> 一个贴膜的少年
初期项目就到这里了,vue3 还是有很多很好玩的地方的。下次我们就来看看 VUE3 的亮点 Composition API 的使用。(最近原神玩的肝有点痛)
到此这篇关于用vite搭建vue3应用的实现方法的文章就介绍到这了,更多相关vite搭建vue3内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
前言vue-next是Vue3的源码仓库,Vue3采用lerna做package的划分,而响应式能力@vue/reactivity被划分到了单独的一个packa
Vue.js作者尤雨溪就Vue3支持IE11的计划提交了新提案。提案摘要:Vue3将不会支持IE11原定投入Vue3IE11支持的精力将投入给2.7,移植3.x
vue3修改link中标签默认icon,vue3初次使用的时候不好好阅读配置难免会遇到一些坑,本人在项目完结的时候打算把浏览器的导航小icon图标给替换了,可是
1.使用版本vite:2.0ant-design-vue:2.0.0-rc.8vue:3.0.52.安装vite插件yarnaddvite-plugin-sty
最近在重新看vue3的rfcs,发现一个细节,原话如下:propsthatstartwithonarehandledasv-onbindings,witheve