一,安裝

提示: vue3.0目前還沒有官方的翻譯文件。但是已經有人翻譯了。得到了尤雨溪大佬的點贊，這裡附上網址https://v3.cn.vuejs.org/

1.安裝 cli

因為要使用 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
//檢視本機cli版本
vue --version

2.建立專案

既然我們都使用了 VUE3,不妨來試試最新的 vite 構建工具。
沒準可以給你開啟新世界的大門

//新建專案
npm init vite-app asiterVue3
//進入目錄
cd asiterVue3
//安裝依賴
npm install
//執行
npm run dev

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>

4.新增路由 Vue-Router

由於我們用的是 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 檔案
在檔案裡面新增以下內容

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

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

同時在 src 下新建一個 views 的資料夾,新增一個 HelloWorld.vue 的檔案
加入以下程式碼,因為是初見。我就不嘗試程式設計客棧其他的 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");

啟動專案,在位址列輸入http://192.168.1.233:3000/#/weclome
發現得到我們想要的東西了

5.新增狀態管理 Vuex

又是由於我們用的是 VUE3.0,所以我們Vuex也要對應支援的版本
截至到今天.已經更新到了 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 內用 createStore 建立一個例項
然後我們也照著寫一個

在 src 目錄下新建一個 store 目錄然後新增一個 index.js 檔案.寫入以下內容

import { createStore } from "vuex";

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

程式設計客棧

回到我們的 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</divwww.cppcns.com>
</template>

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

啟動伺服器
開啟控制檯
重新在位址列輸入http://192.168.1.233:3000/#/weclome
看到了列印資訊

這個男人是誰:>> Asiter
他怎麼樣:>> 一個貼膜的少年

6.總結

初期專案就到這裡了,vue3 還是有很多很好玩的地方的。下次我們就來看看 VUE3 的亮點 Composition API 的使用。(最近原神玩的肝有點痛)

到此這篇關於用vite搭建vue3應用的實現方法的文章就介紹到這了,更多相關vite搭建vue3內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！