位置: IT常识 - 正文

浅谈Vue开发最佳实践—事项清单(vue开发小技巧)

编辑:rootadmin
一 、通过云开发平台快速创建初始化应用 1.创建相关应用模版请参考链接:彻底学会快速部署vue框架,一篇就够了 2.完成创建后就可以在github中查看到新增的Vue.js 仓库 二 、 本地编写《开发跨平台桌面应用》项目 1.将应用模版克隆到本地 ● 首先假定你已经安装了Git、node,没有安装 ... 一 、通过云开发平台快速创建初始化应用

推荐整理分享浅谈Vue开发最佳实践—事项清单(vue开发小技巧),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue用什么开发工具好,vue 项目开发,vue开发用什么工具,vue用什么开发工具好,vue开发的好处,vue 开发,vue用什么开发工具好,vue 开发,内容如对您有帮助,希望把文章链接给更多的朋友!

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

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

二 、 本地编写《开发跨平台桌面应用》项目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.案例效果预览、功能分析与项目架构

● 效果预览

● 功能分析

1、记录待完成任务和已完成任务

2、通过新建,添加待完成任务,并设置时间

3、点击完成任务,跳转到已完成界面;点击删除,可以删除任务

4、点击右上角的 × 按钮,可以关闭主界面,要再次打开主界面,可以通过系统托盘

5、设定的时间到了,会在右下角弹出提醒框,如下图所示。

● 项目架构

如果你有过vue开发经验,会发现整个项目目录还是熟悉的配方,业务代码放在了src文件夹下。

渲染进程的页面交给了vue进行渲染,开发过程和我们平时使用vue开发web页面相差无几。而electron主进程的代码是放在background.js中。

项目支持热更新,修改代码后不用再手动刷新,比之前从零DIY要方便很多,我们可以更专注于业务逻辑的开发,下面就进入coding阶段~~

● 项目架构分析

项目主要有两个渲染进程,对应两个页面(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' } }}

这时候的项目目录:

浅谈Vue开发最佳实践—事项清单(vue开发小技巧)

以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组件。

使用vue-router的代码如下:

// src/router/index.jsimport { 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)这三个组件都有对数据的操作。

如果不使用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.jsapp.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 文件夹内容如下:

点击tasky-vue Setup 0.1.0默认是直接一键安装,可以看到在桌面的应用图标也是默认的。

怎样定制打包,如制作图标、打包格式、安装行为等等,可以参考Electron应用的打包和自动更新--案例实战,非常详细 。

由于我们这里使用的是Vue CLI Plugin Electron Builder,打包的配置需要放在vue.config.js中。

// vue.config.jsmodule.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 push2.在日常环境部署

一键进行应用部署。在应用详情页面点击日常环境的「部署」按钮进行一键部署,部署状态变成绿色已部署以后可以点击访问部署网站查看效果。

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

● 配置线上环境自定义域名。在功能开发验证完成后要在线上环境进行部署,在线上环境的「部署配置」-「自定义域名」中填写自己的域名。例如我们添加一个二级域名 company.workbench.fun 来绑定我们部署的前端应用。然后复制自定义域名下方的API网关地址对添加的二级域名进行CNAME配置。

● 配置CNAME地址。复制好 API网关域名地址后,来到你自己的域名管理平台(此示例中的域名管理是阿里云的域名管理控制台,请去自己的域名控制台操作)。添加记录的「记录类型」选择「CNAME」,在「主机记录」中输入你要创建的二级域名,这里我们输入「company」,在「记录值」中粘贴我们之前复制的 API网关域名地址,「TTL」保留默认值或者设置一个你认为合适的值即可。

● 在线上环境部署上线。回到云开发平台的应用详情页面,按照部署的操作,点击线上环境的「部署按钮」,部署完成以后就在你自定义的域名进行了上线。CNAME 生效之后,我们输入 company.workbench.fun(示例网址) 可以打开部署的页面。至此,如何部署一个应用到线上环境,如何绑定自己的域名来访问一个线上的应用就完成了,赶紧部署自己的应用到线上环境,用自己的域名玩起来吧 ;)

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

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

本文链接地址:https://www.jiuchutong.com/zhishi/304486.html 转载请保留说明!

上一篇:详解帝国cms使用自定义函数获取用户发表新闻数量的方法(帝国cms如何使用)

下一篇:Django_request学习(django中httpresponse)

  • 手机怎么关闭系统升级(手机怎么关闭系统更新通知)

    手机怎么关闭系统升级(手机怎么关闭系统更新通知)

  • 惠普178nw怎么加碳粉(惠普178nw怎么加纸)

    惠普178nw怎么加碳粉(惠普178nw怎么加纸)

  • 腾讯只看ta没有了吗(腾讯只看她)

    腾讯只看ta没有了吗(腾讯只看她)

  • 更新目录为什么有些没有(更新目录为什么页码出现2次)

    更新目录为什么有些没有(更新目录为什么页码出现2次)

  • iphone11屏幕有一条黑线		(iphone11屏幕有一条黑线)

    iphone11屏幕有一条黑线 (iphone11屏幕有一条黑线)

  • 抖音的垂直度是什么意思(抖音的垂直度是和内容有关还是和话题有关)

    抖音的垂直度是什么意思(抖音的垂直度是和内容有关还是和话题有关)

  • 抖音小店押金多久可以退(抖音小店的押金能拿回来吗)

    抖音小店押金多久可以退(抖音小店的押金能拿回来吗)

  • iphonexsmax正确充电方式(苹果手机xsmax怎么充电对电池好)

    iphonexsmax正确充电方式(苹果手机xsmax怎么充电对电池好)

  • oppoa92s支持nfc吗(oppoa92s支持nfc吗?)

    oppoa92s支持nfc吗(oppoa92s支持nfc吗?)

  • 华为跑马灯设置(华为跑马灯设置方法)

    华为跑马灯设置(华为跑马灯设置方法)

  • p40支持5g吗(p40支持广电5g吗)

    p40支持5g吗(p40支持广电5g吗)

  • 微信不是群主怎么踢人出群(微信不是群主怎么艾特所有人)

    微信不是群主怎么踢人出群(微信不是群主怎么艾特所有人)

  • 主板硬盘一般有哪些接口(主板一般几个硬盘接口)

    主板硬盘一般有哪些接口(主板一般几个硬盘接口)

  • 我的其他qq账号怎么弄出来(qq我的其他账号在哪里能看到)

    我的其他qq账号怎么弄出来(qq我的其他账号在哪里能看到)

  • 苹果11pro是双卡双待吗(苹果11pro是双卡双待手机吗)

    苹果11pro是双卡双待吗(苹果11pro是双卡双待手机吗)

  • 苹果11一晚上掉电多少正常(苹果11一晚上掉电20%正常吗)

    苹果11一晚上掉电多少正常(苹果11一晚上掉电20%正常吗)

  • 手机无图模式怎么设置(手机显示无图模式怎么关闭)

    手机无图模式怎么设置(手机显示无图模式怎么关闭)

  • iphone11官方标配有什么(苹果11官方标配里面有什么不一样)

    iphone11官方标配有什么(苹果11官方标配里面有什么不一样)

  • 快手打开相册为什么没有照片(快手打开相册为什么闪退)

    快手打开相册为什么没有照片(快手打开相册为什么闪退)

  • 我的淘宝人生在哪里看(淘宝人生我的家在哪)

    我的淘宝人生在哪里看(淘宝人生我的家在哪)

  • 极米属于哪个公司(极米是国产吗)

    极米属于哪个公司(极米是国产吗)

  • 如何拼车(如何拼车拉货)

    如何拼车(如何拼车拉货)

  • 苹果怎么关联对方位置(苹果怎么关联对方手机微信号)

    苹果怎么关联对方位置(苹果怎么关联对方手机微信号)

  • 英格兰怀特岛上的尼德尔斯白垩岩石和19世纪的灯塔。 (© CBCK Christine/iStock/Getty Images Plus)(怀特岛郡国旗)

    英格兰怀特岛上的尼德尔斯白垩岩石和19世纪的灯塔。 (© CBCK Christine/iStock/Getty Images Plus)(怀特岛郡国旗)

  • 如何让网站优化持续稳定(如何让网站优化成功)

    如何让网站优化持续稳定(如何让网站优化成功)

  • 营业成本包括哪些费用
  • 个税两种申报方式哪种好
  • 建安行业是建筑行业吗
  • 人力资源公司可以接保安业务吗
  • 子公司注销应收母公司往来款
  • 费用发票已报销怎么入账
  • 经营租赁租赁费会计分录
  • 公司土地使用税
  • 抄税和上报汇总一样吗
  • 上缴税费总额包括个税吗?
  • 餐饮企业收到现金抵用券会计分录
  • 账本印花税税金及附加怎么入账?
  • 重庆国税发票查询真伪查询系统
  • 自行建造厂房一座,现已完工,经验收后交付费用
  • 集团企业涉税需求网络
  • 本月收到外汇怎么做账
  • 年末利润分配会计处理
  • 没有社保的工人怎么办
  • 计算工业总产值指数
  • 无形资产的摊销怎么算
  • 生育津贴报销需要准生证吗
  • 融资租赁和经营租赁哪个更常见
  • 电脑运行时cpu温度
  • win10为什么毛病这么多
  • php字符串操作函数
  • 消防器材怎么做?
  • 固定资产没提完折旧,提前处理
  • php字符串型数据的定义方式
  • uniapp实战视频教程
  • php变量用什么符号
  • PHP:file_get_contents()的用法_Filesystem函数
  • 企业缴纳职工社保政策
  • 建筑企业项目部开户
  • 总结一些php中好用的软件
  • 未分配利润为负的原因
  • html制作网页教程
  • 税收滞纳金的最新法律规定
  • 软考备考时间
  • web爬虫视频教程
  • php开发接口
  • mysqlbinlog -vv
  • 扶贫小额信贷分析报告
  • 关联公司开发票
  • 建筑行业预缴个税怎么算
  • 增值税申报系统登录密码
  • 企业网银证书年费是什么
  • 去银行取对账单需要带什么
  • 营改增后建筑企业财务核算
  • sqlserver2008数据库定时备份
  • 向税务局缴纳工会经费的没计提
  • 盖骑缝章的合同可以双面打印吗
  • 个人独资企业个税怎么交
  • 进口免税产品如何开票
  • 预付款开票货还没发
  • 增值税计入固定资产的成本吗
  • 短期借款利息是多少
  • 固定资产的折旧年限规定
  • 车船使用税会计分录怎么写
  • mysql 5.6 5.7 性能
  • xp系统如何安装
  • 商用计算机英文
  • net 4.0.30319
  • win10系统更新后无法开机
  • linux ./文件
  • win8旗舰版官方下载
  • js分页逻辑
  • linux判断脚本执行成功
  • nodejs实战教程
  • python汉字字符
  • jquery动态添加的元素怎么添加事件
  • great 搬运工
  • python制作爬虫教程
  • javascript基础入门教程
  • javascript常用的类型包括
  • 深圳国税局官网
  • 企业收取承包费如何缴纳增值税
  • 企业所得税核定征收和查账征收的区别
  • 如何计算售价多少可以赚去自己心仪的钱
  • 冷库出租需要交什么税
  • 怎么查询车船税缴费记录
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设