淺談Vue開發最佳實踐—事項清單

一、通過雲開發平臺快速創建初始化應用 1.創建相關應用模版請參考鏈接：徹底學會快速部署vue框架，一篇就夠了 2.完成創建後就可以在github中查看到新增的Vue.js 倉庫二、本地編寫《開發跨平臺桌面應用》項目 1.將應用模版克隆到本地 ● 首先假定你已經安裝了Git、node，沒有安裝 ...

一、通過雲開發平臺快速創建初始化應用

1.創建相關應用模版請參考鏈接：徹底學會快速部署vue框架，一篇就夠了

2.完成創建後就可以在github中查看到新增的Vue.js 倉庫

file

二、本地編寫《開發跨平臺桌面應用》項目

1.將應用模版克隆到本地

● 首先假定你已經安裝了Git、node，沒有安裝請移步node官網進行安裝。克隆項目：

git clone + 項目地址

● 進入項目文件

cd Vue.js

● 切換到feature/1.0.0 分支上

git checkout feature/1.0.0

● 使用一下命令全局安裝 Vue CLI ：

npm install -g @vue/cli

● 安裝 Vue CLI Plugin Electron Builder

vue add electron-builder

過程中會提示你選擇Electron的版本，選擇最新版本即可。

在這個過程中，由於網路的原因，Electron可能會安裝失敗，這時候如果node_modules文件夾中已經有electron文件夾（該文件夾是不完整的electron包，不能運行），那麼刪除這個文件夾，然後可以使用cnpm重新安裝electron。

cnpm i electron --S

註意，如果上面不是選擇的最新版本，這裡安裝的時候需要指定版本安裝，如cnpm i [email protected] --S

● 安裝依賴包

npm install

● 啟動服務

npm run electron:serve

這裡打開瀏覽器8080埠，並出現預設頁面。

2.案例效果預覽、功能分析與項目架構

● 效果預覽

file

● 功能分析

1、記錄待完成任務和已完成任務

2、通過新建，添加待完成任務，並設置時間

3、點擊完成任務，跳轉到已完成界面；點擊刪除，可以刪除任務

4、點擊右上角的 × 按鈕，可以關閉主界面，要再次打開主界面，可以通過系統托盤

5、設定的時間到了，會在右下角彈出提醒框，如下圖所示。

file

● 項目架構

如果你有過vue開發經驗，會發現整個項目目錄還是熟悉的配方，業務代碼放在了src文件夾下。

渲染進程的頁面交給了vue進行渲染，開發過程和我們平時使用vue開發web頁面相差無幾。而electron主進程的代碼是放在background.js中。

file

項目支持熱更新，修改代碼後不用再手動刷新，比之前從零DIY要方便很多，我們可以更專註於業務邏輯的開發，下麵就進入coding階段~~

● 項目架構分析

file

項目主要有兩個渲染進程，對應兩個頁面（main和remind），因此，這裡我們採用多頁面打包的方式。

vue-cli構建的包預設是單頁面打包，所以，我們在vue.config.js中進行改造：

module.exports = { //多頁面打包
  pages: {
    main: {
      // 入口js
      entry: 'src/modules/main/main.js',
      // 模板來源
      template: 'public/main.html',
      // 在 dist 中生成的html文件名字
      filename: 'main.html',
      // template html 中的 title 標簽需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'Main Page'
    },
    remind: {
      entry: 'src/modules/remind/remind.js',
      template: 'public/remind.html',
      filename: 'remind.html',
      title: 'Remind Page'
    }
  }
}

這時候的項目目錄：

file

以main頁面為例，它的main.js和Main.vue內容如下：

● main.js

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

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

● Main.vue

<template>
  <div id="nav">
    <div class="date">{{dateStr}}</div>
    <div class="nav-text">
      <router-link to="/">待辦事項</router-link>
      <router-link to="/finished">已完成</router-link>
    </div>
    <router-link to="/add"><span>新建</span></router-link>
  </div>
  <div class="content">
    <span class="close enable-click" @click="closeMain">×</span>
    <div class="content-manage">
      <router-view/>
    </div>
  </div>
</template>
<script>
import { closeMain } from '../../utils/useIPC.js'
export default {
  setup () {
    const date = new Date()
    const dateStr = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
    return {
      closeMain,
      dateStr
    }
  }
}
</script>

3.路由與狀態管理

提醒視窗（remind）的結構和數據都很簡單，這裡主要分析主視窗。

● 路由

主視窗的頁面架構主要是三個Tab，分別對應三個vue組件。

file

使用vue-router的代碼如下：

// src/router/index.js

import { createRouter, createWebHashHistory } from 'vue-router'
import Todo from '../views/Todo.vue'

const routes = [
  {
    path: '/',
    name: 'Todo',
    component: Todo
  },
  {
    path: '/finished',
    name: 'Finished',
    component: () => import(/* webpackChunkName: "finished" */ '../views/Finished.vue')
  },
  {
    path: '/add',
    name: 'Add',
    component: () => import(/* webpackChunkName: "add" */ '../views/Add.vue')
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

● 狀態管理

這裡的主要數據就是待完成任務（todoArray）和已完成任務（finishedArray）。在上面三個組件中都有對這兩個數據的操作，所以使用vuex進行狀態管理。
本例中，任務數據需要使用localStorage來存儲，我們選擇vuex來管理數據，可以藉助插件來完成vuex中數據的持久化，這裡使用vuex-persistedstate。

import { createStore } from 'vuex'
import createPersistedState from 'vuex-persistedstate'

export default createStore({

  // 該插件會將vuex中數據持久化
  // 可通過配置來決定哪些數據需要持久化，保存在localStorage、sessionStorage還是cookie中
  plugins: [createPersistedState()],  
  
  state: {
    todoArray: [],      //待完成任務數組
    finishedArray: [],  //已完成任務數組
    keepTimes: 0        //已完成任務次數
  },
  mutations: {
    SET_TODO_ARRAY: (state, todoArray) => {
      state.todoArray = todoArray
    },
    SET_FINISHED_ARRAY: (state, finishedArray) => {
      state.finishedArray = finishedArray
    },
    SET_KEEP_TIMES: (state, keepTimes) => {
      state.keepTimes = keepTimes
    }
  }
})

4.Composition Api

之前沒用過Vue3，在這個項目中第一次用，最大的體驗就是Composition Api，所以這裡簡單地寫寫。

使用傳統的option配置方法寫組件的時候問題，隨著業務複雜度越來越高，代碼量會不斷的加大；由於相關業務的代碼需要寫到特定的vue實例，導致代碼可復用性不高，而Composition Api就是為瞭解決這個問題而生。

在vue2中，我們知道寫在data和computed中的數據才是響應式的，寫在methods中的函數才能在template的節點中使用。

所以響應式數據和頁面方法都和vue實例綁定在一起。假如，多個vue實例，每個實例都有msg屬性，changeMsg方法，如果不在每個實例分別定義，比較優雅的方法是可以通過mixin混入。

Composition Api把響應式數據和vue實例解耦，你可以通過調用特定方法（比如reactive、ref、computed）隨便在哪裡定義響應式數據，然後在vue實例的setup方法使用。

5.案例說明

在我們這個項目中，其實主要維護的數據結構有兩個：待完成數組（todoArray）和已完成數組（finishedArray）。

對數組的操作就是讀取數組和更新數組。

並且在待完成（Todo.vue）、已完成（Finished.vue）、新增任務（Add.vue）這三個組件都有對數據的操作。

file

如果不使用Composition Api，就要在每個組件中定義獲取和更新每個數據數據的方法。而使用Composition Api後，我們將所有數據操作寫在一個文件中（useData.js），組件中若有需要，可以引入這個文件。

import { computed, getCurrentInstance } from 'vue'

//封裝對todoArray的獲取和更新
export function useTodo () {
  const { proxy } = getCurrentInstance()  //獲取調用該方法的vue實例
  const todoArray = computed(() => proxy.$store.state.todoArray)  //定義計算屬性todoArray
  const updateTodo = (payload) => {   //定義方法
    proxy.$store.commit('SET_TODO_ARRAY', payload)
  }
  return {
    todoArray,
    updateTodo
  }
}

//封裝對finishedArray的獲取和更新
export function useFinished () {
  //... 和上面todoArray類似
}

//封裝對keepTimes的獲取和更新
export function useKeepTimes () {
  //... 和上面todoArray類似
}

在組件中使用（以Finished.vue為例）：

<template>
  <h2>今日已完成任務</h2>
  <ul class="tasks task-finished">
    <li class="task-item" v-for="(item,index) in finishedArray" :key="index">
      <span class="task-text">{{item.name}}</span>
      <span class="flag-icon"></span>
    </li>
  </ul>
  <p>你已經對自己信守承諾<span class="keep-times">{{keepTimes}}</span>次，繼續加油哦！</p>
</template>
<script>
<script>
import { useFinished, useKeepTimes } from '../utils/useData.js'
export default {
  setup () {
    const { finishedArray } = useFinished()
    const { keepTimes } = useKeepTimes()
    return {          //在setup函數中return就可以在template中直接使用
      finishedArray,
      keepTimes
    }
  }
}
</script>

6.主進程

主進程中的代碼和之前項目基本一樣。可以在入門篇看主進程功能。

之前項目中，渲染進程對應的html文件都是用file://協議載入，而在這裡需要區分開發環境和生產環境。

在開發環境下，由於使用了webpack-dev-server，所以要訪問dev server的地址（process.env.WEBPACK_DEV_SERVER_URL）才能得到實時更新的頁面內容，而在生產環境下，使用file://協議。

//background.js
app.on('ready', async () => {
  mainWindow = new BrowserWindow({
    frame: false,
    resizable: false,
    width: 800,
    height: 600,
    icon: iconPath,
    webPreferences:{
      backgroundThrottling: false,
      nodeIntegration:true,
      contextIsolation: false
    }
  })
  if (process.env.WEBPACK_DEV_SERVER_URL) {
    // 開發環境下，訪問dev server的地址
    await mainWindow.loadURL(process.env.WEBPACK_DEV_SERVER_URL + '/main.html')
  } else {
    createProtocol('app')
    // 生產環境下，使用`file://`協議載入main.html
    mainWindow.loadURL(`file://${__dirname}/main.html`)
  }
  mainWindow.removeMenu()
  setTray ()
})

7.打包

直接執行命令：

npm run electron:build

打包生成的內容在 dist_electron 文件夾，直接基於預設配置打包，生成的dist_electron 文件夾內容如下：

file

點擊tasky-vue Setup 0.1.0預設是直接一鍵安裝，可以看到在桌面的應用圖標也是預設的。

file

怎樣定製打包，如製作圖標、打包格式、安裝行為等等，可以參考Electron應用的打包和自動更新--案例實戰，非常詳細。

由於我們這裡使用的是Vue CLI Plugin Electron Builder，打包的配置需要放在vue.config.js中。

// vue.config.js

module.exports = {
  pages: { //多頁面打包
   ...
  },
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        // options placed here will be merged with default configuration and passed to electron-builder
        "appId": "this.is.tasky",
        "productName": "Tasky",
        "copyright": "Copyright © 2021 Alaso",
        "directories": {
          "buildResources": "build"
        },
        "mac": {
          "category": "public.app-category.utilities"
        },
        "dmg": {
          "background": "build/background.jfif",
          "icon": "build/icons/icon.icns",
          "iconSize": 100,
          "contents": [
            {
              "x": 380,
              "y": 180,
              "type": "link",
              "path": "/Applications"
            },
            {
              "x": 130,
              "y": 180,
              "type": "file"
            }
          ],
          "window": {
            "width": 540,
            "height": 380
          }
        },
        "win": {
          "target": [
            "msi",
            "nsis"
          ],
          "icon": "build/icons/icon.ico"
        },
        "nsis": {
          "oneClick": false,
          "language": "2052",
          "perMachine": true,
          "allowToChangeInstallationDirectory": true
        }
      }
    }
  }
}

三、雲端一鍵部署上線應用

1.上傳代碼

git add . 
git commit -m '添加你的註釋'
git push

2.在日常環境部署

一鍵進行應用部署。在應用詳情頁面點擊日常環境的「部署」按鈕進行一鍵部署，部署狀態變成綠色已部署以後可以點擊訪問部署網站查看效果。

file

3.配置自定義功能變數名稱線上上環境上線

● 配置線上環境自定義功能變數名稱。在功能開發驗證完成後要線上上環境進行部署，線上上環境的「部署配置」-「自定義功能變數名稱」中填寫自己的功能變數名稱。例如我們添加一個二級功能變數名稱 company.workbench.fun 來綁定我們部署的前端應用。然後複製自定義功能變數名稱下方的API網關地址對添加的二級功能變數名稱進行CNAME配置。

file

● 配置CNAME地址。複製好 API網關功能變數名稱地址後，來到你自己的功能變數名稱管理平臺（此示例中的功能變數名稱管理是阿裡雲的功能變數名稱管理控制台，請去自己的功能變數名稱控制台操作）。添加記錄的「記錄類型」選擇「CNAME」，在「主機記錄」中輸入你要創建的二級功能變數名稱，這裡我們輸入「company」，在「記錄值」中粘貼我們之前複製的 API網關功能變數名稱地址，「TTL」保留預設值或者設置一個你認為合適的值即可。

file

● 線上上環境部署上線。回到雲開發平臺的應用詳情頁面，按照部署的操作，點擊線上環境的「部署按鈕」，部署完成以後就在你自定義的功能變數名稱進行了上線。CNAME 生效之後，我們輸入 company.workbench.fun（示例網址）可以打開部署的頁面。至此，如何部署一個應用到線上環境，如何綁定自己的功能變數名稱來訪問一個線上的應用就完成了，趕緊部署自己的應用到線上環境，用自己的功能變數名稱玩起來吧；）

file