您好,登錄后才能下訂單哦!
今天就跟大家聊聊有關(guān)使用vite怎么搭建一個vue3應(yīng)用,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。
Vue具體輕量級框架、簡單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢,Vue中頁面使用的是局部刷新,不用每次跳轉(zhuǎn)頁面都要請求所有數(shù)據(jù)和dom,可以大大提升訪問速度和用戶體驗(yàn)。
提示: VUE3.0目前還沒有官方的翻譯文檔。但是已經(jīng)有人翻譯了。得到了尤雨溪大佬的點(diǎn)贊,這里附上網(wǎng)址https://v3.cn.vuejs.org/
因?yàn)橐褂?vue3 必須要求 cli 的版本比較高,必須要高于 4.5.X
所以沒有安裝的 cli 的就直接安裝最新版就行了,已有的可以升級或者卸載后重新安裝
最好是全局安裝
//全局安裝 npm install -g @vue/cli # OR yarn global add @vue/cli //全局卸載 npm uninstall -g vue-cli # OR yarn global remove vue-cli //升級cli npm update -g @vue/cli # OR yarn global upgrade --latest @vue/cli //查看本機(jī)cli版本 vue --version
既然我們都使用了 VUE3,不妨來試試最新的 vite 構(gòu)建工具。
沒準(zhǔn)可以給你打開新世界的大門
//新建項(xiàng)目 npm init vite-app asiterVue3 //進(jìn)入目錄 cd asiterVue3 //安裝依賴 npm install //運(yùn)行 npm run dev
3. 查看項(xiàng)目
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 節(jié)點(diǎn)內(nèi)不是只能存在一個根節(jié)點(diǎn)了。
//就是這個地方 雖然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也要對應(yīng)版本為 4.X.
npm install vue-router@next -S
附件:
npm install vue-router
會下到 3.0 的版本
所以我們需要 npm install vue-router@next -S
進(jìn)行安裝
這里附上 github 地址https://github.com/vuejs/vue-router-next/releases
截至到今天 2020 年 10 月 14 日,版本已經(jīng)是 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>
這些就是官方例子,我們發(fā)現(xiàn)路由的創(chuàng)建有點(diǎn)不同了。
vue2.0 里面是用 mode 來控制路由模式的參數(shù)
但是在 vue3 里面通過 createRouter 來創(chuàng)建路由實(shí)例
history 屬性來當(dāng)控制路由模式的參數(shù)
顧名思義
createWebHistory 方法返回的是 History 模式
createWebHashHistory 方法返回的是 Hash 模式
所以我們嘗試添加進(jìn)去
先在 src 目錄下新建一個 router 文件夾,然后在文件夾下面添加一個 index.js 文件
在文件里面添加以下內(nèi)容
import { createRouter, createWebHashHistory } from "vue-router"; export default createRouter({ history: createWebHashHistory(), routes: [ { path: "/weclome", component: () => import("../views/HelloWorld.vue"), }, ], });
同時在 src 下新建一個 views 的文件夾,添加一個 HelloWorld.vue 的文件
加入以下代碼,因?yàn)槭浅跻?。我就不嘗試其他的 API 了,先跑個效果
<template> <div>helloWord!weclome to Vue3.0.Asiter</div> </template>
然后改造一下我們的 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");
啟動項(xiàng)目,在地址欄輸入http://192.168.1.233:3000/#/weclome
發(fā)現(xiàn)得到我們想要的東西了
又是由于我們用的是 VUE3.0,所以我們Vuex也要對應(yīng)支持的版本
截至到今天.已經(jīng)更新到了 4.0.0-beta.4
附件:
附上 github 地址https://github.com/vuejs/vuex/releases
npm i vuex@next -S
然后接著看官方的案例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 內(nèi)用 createStore 創(chuàng)建一個實(shí)例
然后我們也照著寫一個
在 src 目錄下新建一個 store 目錄然后添加一個 index.js 文件.寫入以下內(nèi)容
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 這個文件
改造一下
<template> <div>helloWord!weclome to Vue3.0.Asiter</div> </template> <script> export default { mounted() { console.log("這個男人是誰:>> ", this.$store.state.author); console.log("他怎么樣:>> ", this.$store.state.describe); }, }; </script>
啟動服務(wù)器
打開控制臺
重新在地址欄輸入http://192.168.1.233:3000/#/weclome
看到了打印信息
這個男人是誰:>> Asiter
他怎么樣:>> 一個貼膜的少年
看完上述內(nèi)容,你們對使用vite怎么搭建一個vue3應(yīng)用有進(jìn)一步的了解嗎?如果還想了解更多知識或者相關(guān)內(nèi)容,請關(guān)注億速云行業(yè)資訊頻道,感謝大家的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。