ASCII码 ASCII码

浅谈Vue开发最佳实践—事项清单

发布于：2022-04-23 16:21:56  栏目：技术文档

一 、通过云开发平台快速创建初始化应用

1.创建相关应用模版请参考链接：彻底学会快速部署vue框架，一篇就够了

2.完成创建后就可以在github中查看到新增的Vue.js 仓库

file

二 、 本地编写《开发跨平台桌面应用》项目

1.将应用模版克隆到本地

● 首先假定你已经安装了Git、node，没有安装请移步node官网进行安装。克隆项目：

  1. git clone + 项目地址

● 进入项目文件

  1. cd Vue.js

● 切换到feature/1.0.0 分支上 

  1. git checkout feature/1.0.0

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

  1. npm install -g @vue/cli

● 安装 Vue CLI Plugin Electron Builder

  1. vue add electron-builder

过程中会提示你选择Electron的版本，选择最新版本即可。

在这个过程中，由于网络的原因，Electron可能会安装失败，这时候如果node_modules文件夹中已经有electron文件夹（该文件夹是不完整的electron包，不能运行），那么删除这个文件夹，然后可以使用cnpm重新安装electron。

  1. cnpm i electron --S

注意，如果上面不是选择的最新版本，这里安装的时候需要指定版本安装，如cnpm i electron@xx.x.x —S

● 安装依赖包

  1. npm install

● 启动服务

  1. npm run electron:serve

这里打开浏览器8080端口，并出现默认页面。

2.案例效果预览、功能分析与项目架构

● 效果预览

file

file

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中进行改造：

  1. module.exports = { //多页面打包
  2.   pages: {
  3.     main: {
  4.       // 入口js
  5.       entry: 'src/modules/main/main.js',
  6.       // 模板来源
  7.       template: 'public/main.html',
  8.       // 在 dist 中生成的html文件名字
  9.       filename: 'main.html',
  10.       // template html 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
  11.       title: 'Main Page'
  12.     },
  13.     remind: {
  14.       entry: 'src/modules/remind/remind.js',
  15.       template: 'public/remind.html',
  16.       filename: 'remind.html',
  17.       title: 'Remind Page'
  18.     }
  19.   }
  20. }

这时候的项目目录：

file

以main页面为例，它的main.js和Main.vue内容如下：

● main.js

  1. import { createApp } from 'vue'
  2. import App from './Main.vue'
  3. import router from '../../router'
  4. import store from '../../store'
  6. createApp(App).use(store).use(router).mount('#app')

● Main.vue

  1. <template>
  2.   <div id="nav">
  3.     <div class="date">{{dateStr}}</div>
  4.     <div class="nav-text">
  5.       <router-link to="/">待办事项</router-link>
  6.       <router-link to="/finished">已完成</router-link>
  7.     </div>
  8.     <router-link to="/add"><span>新建</span></router-link>
  9.   </div>
  10.   <div class="content">
  11.     <span class="close enable-click" @click="closeMain">×</span>
  12.     <div class="content-manage">
  13.       <router-view/>
  14.     </div>
  15.   </div>
  16. </template>
  17. <script>
  18. import { closeMain } from '../../utils/useIPC.js'
  19. export default {
  20.   setup () {
  21.     const date = new Date()
  22.     const dateStr = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
  23.     return {
  24.       closeMain,
  25.       dateStr
  26.     }
  27.   }
  28. }
  29. </script>

3.路由与状态管理

提醒窗口（remind）的结构和数据都很简单，这里主要分析主窗口。

● 路由

主窗口的页面架构主要是三个Tab，分别对应三个vue组件。

file

使用vue-router的代码如下：

  1. // src/router/index.js
  3. import { createRouter, createWebHashHistory } from 'vue-router'
  4. import Todo from '../views/Todo.vue'
  6. const routes = [
  7.   {
  8.     path: '/',
  9.     name: 'Todo',
  10.     component: Todo
  11.   },
  12.   {
  13.     path: '/finished',
  14.     name: 'Finished',
  15.     component: () => import(/* webpackChunkName: "finished" */ '../views/Finished.vue')
  16.   },
  17.   {
  18.     path: '/add',
  19.     name: 'Add',
  20.     component: () => import(/* webpackChunkName: "add" */ '../views/Add.vue')
  21.   }
  22. ]
  24. const router = createRouter({
  25.   history: createWebHashHistory(),
  26.   routes
  27. })
  29. export default router

● 状态管理

这里的主要数据就是 待完成任务（todoArray）和 已完成任务（finishedArray）。在上面三个组件中都有对这两个数据的操作，所以使用vuex进行状态管理。本例中，任务数据需要使用localStorage来存储，我们选择vuex来管理数据，可以借助插件来完成vuex中数据的持久化，这里使用vuex-persistedstate。

  1. import { createStore } from 'vuex'
  2. import createPersistedState from 'vuex-persistedstate'
  4. export default createStore({
  6.   // 该插件会将vuex中数据持久化
  7.   // 可通过配置来决定哪些数据需要持久化，保存在localStorage、sessionStorage还是cookie中
  8.   plugins: [createPersistedState()],  
  10.   state: {
  11.     todoArray: [],      //待完成任务数组
  12.     finishedArray: [],  //已完成任务数组
  13.     keepTimes: 0        //已完成任务次数
  14.   },
  15.   mutations: {
  16.     SET_TODO_ARRAY: (state, todoArray) => {
  17.       state.todoArray = todoArray
  18.     },
  19.     SET_FINISHED_ARRAY: (state, finishedArray) => {
  20.       state.finishedArray = finishedArray
  21.     },
  22.     SET_KEEP_TIMES: (state, keepTimes) => {
  23.       state.keepTimes = keepTimes
  24.     }
  25.   }
  26. })

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），组件中若有需要，可以引入这个文件。

  1. import { computed, getCurrentInstance } from 'vue'
  3. //封装对todoArray的获取和更新
  4. export function useTodo () {
  5.   const { proxy } = getCurrentInstance()  //获取调用该方法的vue实例
  6.   const todoArray = computed(() => proxy.$store.state.todoArray)  //定义计算属性todoArray
  7.   const updateTodo = (payload) => {   //定义方法
  8.     proxy.$store.commit('SET_TODO_ARRAY', payload)
  9.   }
  10.   return {
  11.     todoArray,
  12.     updateTodo
  13.   }
  14. }
  16. //封装对finishedArray的获取和更新
  17. export function useFinished () {
  18.   //... 和上面todoArray类似
  19. }
  21. //封装对keepTimes的获取和更新
  22. export function useKeepTimes () {
  23.   //... 和上面todoArray类似
  24. }

在组件中使用（以Finished.vue为例）：

  1. <template>
  2.   <h2>今日已完成任务</h2>
  3.   <ul class="tasks task-finished">
  4.     <li class="task-item" v-for="(item,index) in finishedArray" :key="index">
  5.       <span class="task-text">{{item.name}}</span>
  6.       <span class="flag-icon"></span>
  7.     </li>
  8.   </ul>
  9.   <p>你已经对自己信守承诺<span class="keep-times">{{keepTimes}}</span>次，继续加油哦！</p>
  10. </template>
  11. <script>
  12. <script>
  13. import { useFinished, useKeepTimes } from '../utils/useData.js'
  14. export default {
  15.   setup () {
  16.     const { finishedArray } = useFinished()
  17.     const { keepTimes } = useKeepTimes()
  18.     return {          //在setup函数中return就可以在template中直接使用
  19.       finishedArray,
  20.       keepTimes
  21.     }
  22.   }
  23. }
  24. </script>

6.主进程

主进程中的代码和之前项目基本一样。可以在 入门篇 看主进程功能。

之前项目中，渲染进程对应的html文件都是用file://协议加载，而在这里需要区分开发环境和生产环境。

在开发环境下，由于使用了webpack-dev-server，所以要访问dev server的地址（process.env.WEBPACK_DEV_SERVER_URL）才能得到实时更新的页面内容，而在生产环境下，使用file://协议。

  1. //background.js
  2. app.on('ready', async () => {
  3.   mainWindow = new BrowserWindow({
  4.     frame: false,
  5.     resizable: false,
  6.     width: 800,
  7.     height: 600,
  8.     icon: iconPath,
  9.     webPreferences:{
  10.       backgroundThrottling: false,
  11.       nodeIntegration:true,
  12.       contextIsolation: false
  13.     }
  14.   })
  15.   if (process.env.WEBPACK_DEV_SERVER_URL) {
  16.     // 开发环境下，访问dev server的地址
  17.     await mainWindow.loadURL(process.env.WEBPACK_DEV_SERVER_URL + '/main.html')
  18.   } else {
  19.     createProtocol('app')
  20.     // 生产环境下，使用`file://`协议加载main.html
  21.     mainWindow.loadURL(`file://${__dirname}/main.html`)
  22.   }
  23.   mainWindow.removeMenu()
  24.   setTray ()
  25. })

7.打包

直接执行命令：

  1. 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中。

  1. // vue.config.js
  3. module.exports = {
  4.   pages: { //多页面打包
  5.    ...
  6.   },
  7.   pluginOptions: {
  8.     electronBuilder: {
  9.       builderOptions: {
  10.         // options placed here will be merged with default configuration and passed to electron-builder
  11.         "appId": "this.is.tasky",
  12.         "productName": "Tasky",
  13.         "copyright": "Copyright © 2021 Alaso",
  14.         "directories": {
  15.           "buildResources": "build"
  16.         },
  17.         "mac": {
  18.           "category": "public.app-category.utilities"
  19.         },
  20.         "dmg": {
  21.           "background": "build/background.jfif",
  22.           "icon": "build/icons/icon.icns",
  23.           "iconSize": 100,
  24.           "contents": [
  25.             {
  26.               "x": 380,
  27.               "y": 180,
  28.               "type": "link",
  29.               "path": "/Applications"
  30.             },
  31.             {
  32.               "x": 130,
  33.               "y": 180,
  34.               "type": "file"
  35.             }
  36.           ],
  37.           "window": {
  38.             "width": 540,
  39.             "height": 380
  40.           }
  41.         },
  42.         "win": {
  43.           "target": [
  44.             "msi",
  45.             "nsis"
  46.           ],
  47.           "icon": "build/icons/icon.ico"
  48.         },
  49.         "nsis": {
  50.           "oneClick": false,
  51.           "language": "2052",
  52.           "perMachine": true,
  53.           "allowToChangeInstallationDirectory": true
  54.         }
  55.       }
  56.     }
  57.   }
  58. }

三 、 云端一键部署上线应用

1.上传代码

  1. git add . 
  2. git commit -m '添加你的注释'
  3. 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

相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行