學習Vue3.0，先從搭建環境開始

子君發表於2020-08-24
Vue
Bug源測試，上線來幾個。願君多修改，今夜眼難合。

這是小編關於Vue3.0系列文章的第二篇，本文將帶您從零搭建一個基於Vue3.0與vite的Vue3.0開發環境，通過本文的學習，你將學習到以下內容：

  1. 使用vite初始化Vue3.0專案
  2. 配置ts
  3. 配置vue-router
  4. 配置vuex
  5. 使用Vue3.0開發一個TodoList示例
同時本文的內容已錄製為視訊釋出到了B站，可以點選連結跳轉到視訊地址，同時您也可以通過微信搜尋【前端有的玩】關注我的公眾號加我微信好友，手摸手和你一起學習Vue3.0

使用vite初始化專案

vite 介紹

vite是尤大大在今年新鼓搗出來的一個工具，尤大大對vite的描述是這樣的: Vite is an opinionated web dev build tool that serves your code via native ES Module imports during dev and bundles it with Rollup for production. 翻譯成中文就是：Vite 是一個由原生 ES Module 驅動的 Web 開發構建工具。在開發環境下基於瀏覽器原生 ES imports 開發，在生產環境下基於 Rollup 打包。

上面這段話提到了一個關鍵字ES Module,這個是什麼呢？詳細的介紹大家可以訪問 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Modules 進行檢視。此處我們長話短說。在最早的時候，還沒有前端工程化，然後我們寫javascript都是寫到一個檔案，然後通過script標籤去引用，後來隨著前端發展越來越壯大，js之間依賴越來越複雜，這時候就需要有一種可以將JavaScript 程式拆分為可按需匯入的單獨模組的機制來維護這個依賴，隨之就誕生了AMD,CMD等等，而ES Module就是瀏覽器支援的原生模組依賴的功能。

為什麼要用vite

為什麼尤大大要推出vite，在我們使用webpack的時候，每次開發時候啟動專案都需要幾十秒甚至超過一分鐘，比較慢，而且熱更新也比較慢，而vite的主要特點就是快，官網對於vite的特點是這樣描述的

  1. 快速的冷啟動
  2. 即時的模組熱更新
  3. 真正的按需編譯

到底有多快呢，我們先新建一個專案試試

初始化vite專案

  1. 初始化專案, 在工作空間開啟終端視窗，對於window使用者即cmd，然後執行下面命令

    yarn create vite-app my-vue3

    執行之後就會輸出以下內容，可以看到新建專案特別快，僅僅用了1.63s

  2. 初始化完專案，通過cd my-vue3進行到專案裡面，然後再執行yarn安裝依賴（此處建議使用淘寶映象，比較快）
  3. 依賴安裝完需要通過yarn dev啟動專案

    是不是瞬間體驗到了秒啟專案的感覺，啟動之後就可以通過http://localhost:3000來訪問專案了

檢視專案結構

使用vscode開啟專案之後，可以檢視到新建的專案結構與vue-cli4建立的專案結構基本一樣，都是我們很熟悉的App.vue和main.js

檢視main.js檔案內容

開啟main.js

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

createApp(App).mount('#app')

發現建立Vue的方式變了，原來是通過new Vue的方法來初始化Vue，在Vue3.0中，修改為了通過createApp的方式，關於Vue3.0的更多使用方式，我們將在後面的系列文章中逐漸為您帶來講解。

配置typescript

typescript現在已經成為了前端必備技能之一，大量的專案也開始基於typescript進行開發。在使用Vue2.0的時候，因為Vue2.0沒有對typescript進行支援，所以使用ts開發功能顯示有些彆扭。但到了Vue3，其自身原始碼便是基於ts開發的，所以對ts天生有著很好的支援。使用vite配置typescript很簡單，只需要進行以下幾步操作.

  1. 安裝 typescript

    yarn add typescript -D

  2. 初始化tsconfig.json

    # 然後在控制檯執行下面命令
npx tsc --init

  3. 將main.js修改為main.ts,同時將index.html裡面的引用也修改為main.ts, 通過還需要修改App.vue與HelloWorld.vue檔案，修改方式如下

    <!--將 <script> 修改為 <script lang="ts">-->
<script lang="ts">
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

    修改完之後，重啟就可以訪問專案了。雖然這樣配置是可以了，但是開啟main.ts會發現import App from App.vue會報錯: Cannot find module './App.vue' or its corresponding type declarations.,這是因為現在ts還沒有識別vue檔案，需要進行下面的配置:

    1. 在專案根目錄新增shim.d.ts檔案

    2. 新增以下內容

      declare module "*.vue" {
  import { Component } from "vue";
  const component: Component;
  export default component;
}

接下來你就可以開開心心的在元件中使用ts了

配置 vue-router

在Vue2.0中我們路由一般會選擇使用vue-router,在Vue3.0依然可以使用vue-router,不過和Vue3.0一樣當前vue-router的版本也是beta版本，在本文撰寫的時候，版本是4.0.0-beta7

安裝vue-router

因為當前vue-router針對vue3.0的版本還是beta版本，所以不能直接通過yarn add vue-router進行安裝，而是需要帶上版本號

yarn add vue-router@4.0.0-beta.7

配置vue-router

在專案src目錄下面新建router目錄，然後新增index.ts檔案，在檔案中新增以下內容

import {createRouter, createWebHashHistory} from 'vue-router'

// 在 Vue-router新版本中，需要使用createRouter來建立路由
export default createRouter({
  // 指定路由的模式,此處使用的是hash模式
  history: createWebHashHistory(),
  // 路由地址
  routes: []
})

與新的Vue3.0初始化方式發生變化一樣，vue-router的初始化方式也發生了變化，變成了通過createRouter來初始化路由。

將router引入到main.ts中

修改main.ts檔案內容如下

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import router from './router/index'

const  app = createApp(App)
// 通過use 將 路由外掛安裝到 app 中
app.use(router)
app.mount('#app')

配置 vuex

與vue-router一樣，新的vuex當前也處於beta版本，當前版本是4.0.0-beta.4

安裝vuex

yarn add vuex@4.0.0-beta.4

配置vuex

在專案src目錄下面新建store目錄，並新增index.ts檔案，檔案中新增以下內容

import { createStore } from 'vuex'

interface State {
  userName: string
}

export default createStore({
  state(): State {
    return {
      userName: "子君",
    };
  },
});

引入到main.ts中

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import router from './router/index'
import store from './store/index'

const  app = createApp(App)
app.use(router)
app.use(store)
app.mount('#app')

開發TodoList

通過上面的一系列操作，我們的開發環境就已經配置完成了，接下來我們就通過新的開發環境先開發一個TodoList，來驗證一下是否正常。

新增todolist頁面

  1. 首先我們先在src目錄下面新建一個views目錄，然後在其中新建檔案todo-list.vue，併為檔案新增以下內容

    
<template>
  <div class="todo-list">
    <div>
      <label>新增待辦</label>
       <input v-model="state.todo" @keyup.enter="handleAddTodo">
    </div>
    <div>
      <h3>待辦列表({{todos.length}})</h3>
      <ul>
        <li v-for="item in todos" :key="item.id" @click="handleChangeStatus(item, true)">
          <input type="checkbox">
          <label>{{item.text}}</label>
        </li>
      </ul>
    </div>
    <div><h3>已辦列表({{dones.length}})</h3></div>
    <ul>
      <li v-for="item in dones" :key="item.id" @click="handleChangeStatus(item, false)">
          <input type="checkbox" checked>
          <label>{{item.text}}</label>
        </li>
    </ul>
  </div>
</template>
<script lang="ts">
 // 在vue2中 data 在vue3中使用 reactive代替
import { reactive, computed } from 'vue'
import { useRouter } from 'vue-router'
export default {
  // setup相當於vue2.0的 beforeCreate和 created，是vue3新增的一個屬性，所有的操作都在此屬性中完成
  setup(props, context) {
    // 通過reactive 可以初始化一個可響應的資料，與Vue2.0中的Vue.observer很相似
    const state = reactive({
      todoList: [{
        id: 1,
        done: false,
        text: '吃飯'
      },{
        id: 2,
        done: false,
        text: '睡覺'
      },{
        id: 3,
        done: false,
        text: '打豆豆'
      }],
      todo: ''
    })
    // 使用計算屬性生成待辦列表
    const todos = computed(() => {
      return state.todoList.filter(item => !item.done)
    })

    // 使用計算屬性生成已辦列表
    const dones = computed(() => {
      return state.todoList.filter(item => item.done)
    })

    // 修改待辦狀態
    const handleChangeStatus = (item ,status) => {
      item.done = status
    }
    
    // 新增待辦
    const handleAddTodo = () => {
      if(!state.todo) {
        alert('請輸入待辦事項')
        return
      }
      state.todoList.push({
        text: state.todo,
        id: Date.now(),
        done: false
      })
      state.todo = ''
    }

        // 在Vue3.0中，所有的資料和方法都通過在setup 中 return 出去，然後在template中使用
    return {
      state,
      todos,
      dones,
      handleChangeStatus,
      handleAddTodo
    }
  }
}
</script>
<style scoped>
.todo-list{
  text-align: center;
}

.todo-list ul li {
  list-style: none;
}
</style>

    調整路由

    1. 首先將App.vue檔案內容修改為

      <template>
  <router-view></router-view>
</template>

<script lang="ts">

export default {
  name: 'App'
}
</script>

    2. 然後修改 router/index.ts檔案，新增新的路由

      import {createRouter, createWebHashHistory} from 'vue-router'

// 在 Vue-router新版本中，需要使用createRouter來建立路由
export default createRouter({
  // 指定路由的模式,此處使用的是hash模式
  history: createWebHashHistory(),
  // 路由地址
  routes: [{
    path: '/todolist',
    // 必須新增.vue字尾
    component: () => import('../views/todo-list.vue')
  }]
})

      這時候我們就可以通過http://localhost:3000/#/todolist來訪問TodoList了，效果如下圖所示

總結

到此，我們Vue3.0的開發環境算是搭建完成了，當然現在還有好多好多要完善的東西，比如我們還需要去調整一下typescript的配置，然後新增eslint等等。同時如何在元件中跳轉路由，使用vuex還沒有去講解，不過至少我們已經起步了，更多的內容將會在下一篇文章中講到。本文首發於公眾號【前端有的玩】，歡迎關注加我好友，我們一起探討Vue3.0

相關文章