淺談Vue開發最佳實踐—事項清單-有解無憂

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

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 >{{dateStr}}</div>
    <div >
      <router-link to="/">待辦事項</router-link>
      <router-link to="/finished">已完成</router-link>
    </div>
    <router-link to="/add"><span>新建</span></router-link>
  </div>
  <div >
    <span  @click="closeMain">×</span>
    <div >
      <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 >
    <li  v-for="(item,index) in finishedArray" :key="index">
      <span >{{item.name}}</span>
      <span ></span>
    </li>
  </ul>
  <p>你已經對自己信守承諾<span >{{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

一鍵創建Vue應用模版鏈接：https://workbench.aliyun.com/application/front/create?fromConfig=34&fromRepo=sol_github_34

參考文獻：https://juejin.cn/post/6983843979133468708

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/461885.html

標籤：其他

上一篇：JavaScript知識總結基礎篇

下一篇：前端大屏模板分享-可在線瀏覽

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

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

二 、 本地撰寫《開發跨平臺桌面應用》專案

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

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

3.路由與狀態管理

4.Composition Api

5.案例說明

6.主行程

7.打包

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

1.上傳代碼

2.在日常環境部署

3.配置自定義域名在線上環境上線

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

二、本地撰寫《開發跨平臺桌面應用》專案

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