今天就跟大家聊聊有關(guān)使用vite怎么搭建一個(gè)vue3應(yīng)用，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

創(chuàng)新互聯(lián)是一家專注于網(wǎng)站制作、做網(wǎng)站與策劃設(shè)計(jì),宜城網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:宜城等地區(qū)。宜城做網(wǎng)站價(jià)格咨詢:028-86922220

Vue的優(yōu)點(diǎn)

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)址/tupian/20230522/ cli

因?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

2.創(chuàng)建項(xiàng)目

既然我們都使用了 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)不是只能存在一個(gè)根節(jié)點(diǎn)了。

//就是這個(gè)地方 雖然Vetur插件會報(bào)錯(cuò) 但是不影響使用
<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>

4.添加路由 Vue-Router

由于我們用的是 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 一波還不行咩

附件:
官方例子地址
/tupian/20230522/vue-router-4-reproduction-hb9lh><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 目錄下新建一個(gè) router 文件夾,然后在文件夾下面添加一個(gè) index.js 文件
在文件里面添加以下內(nèi)容

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

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

同時(shí)在 src 下新建一個(gè) views 的文件夾,添加一個(gè) HelloWorld.vue 的文件
加入以下代碼,因?yàn)槭浅跻?。我就不嘗試其他的 API 了,先跑個(gè)效果

<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)得到我們想要的東西了

5.添加狀態(tài)管理 Vuex

又是由于我們用的是 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)建一個(gè)實(shí)例
然后我們也照著寫一個(gè)

在 src 目錄下新建一個(gè) store 目錄然后添加一個(gè) index.js 文件.寫入以下內(nèi)容

import { createStore } from "vuex";

export const store = createStore({
 state() {
  return {
   author: "Asiter",
   describe: "一個(gè)貼膜的少年",
  };
 },
});

回到我們的 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 這個(gè)文件
改造一下

<template>
 <div>helloWord!weclome to Vue3.0.Asiter</div>
</template>

<script>
export default {
 mounted() {
  console.log("這個(gè)男人是誰:>> ", this.$store.state.author);
  console.log("他怎么樣:>> ", this.$store.state.describe);
 },
};
</script>

啟動服務(wù)器
打開控制臺
重新在地址欄輸入http://192.168.1.233:3000/#/weclome
看到了打印信息

這個(gè)男人是誰:>> Asiter
他怎么樣:>> 一個(gè)貼膜的少年

看完上述內(nèi)容，你們對使用vite怎么搭建一個(gè)vue3應(yīng)用有進(jìn)一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

文章名稱：使用vite怎么搭建一個(gè)vue3應(yīng)用-創(chuàng)新互聯(lián)
文章網(wǎng)址：http://jinyejixie.com/article48/jjdhp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、定制開發(fā)、品牌網(wǎng)站建設(shè)、做網(wǎng)站、網(wǎng)站制作、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)