浅谈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 electron@xx.x.x --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

一键创建Vue应用模版链接：https://workbench.aliyun.com/application/front/create?fromConfig=34&fromRepo=sol_github_34

参考文献：https://juejin.cn/post/6983843979133468708

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

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

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

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

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

3.路由与状态管理

4.Composition Api

5.案例说明

6.主进程

7.打包

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

1.上传代码

2.在日常环境部署

3.配置自定义域名在线上环境上线

云开发平台

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

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

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

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

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

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

3.路由与状态管理

4.Composition Api

5.案例说明

6.主进程

7.打包

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

1.上传代码

2.在日常环境部署

3.配置自定义域名在线上环境上线

云开发平台

热门文章

最新文章

相关课程

相关电子书

相关实验场景

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

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

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