Electron-vue实战-每日清单---02Electron-vue的目录详解

简介: Electron-vue实战-每日清单---02Electron-vue的目录详解

项目地址,欢迎批评指正,随手Star哟
  1. Electron-vue实战-每日清单—01Electron-vue的使用
  2. Electron-vue实战-每日清单—02Electron-vue的目录详解
  3. Electron-vue实战-每日清单—03功能介绍与环境搭建

my-project

├─ .electron-vue

│ └─ build.js

打包时调用,在package.json中的script里的build命令

“build”: “node .electron-vue/build.js && electron-builder”,

│ └─ dev-client.js

│ └─ dev-runner.js

运行时的配置

│ └─ webpack.main.config.js

针对 electron 的 main 进程

│ └─ webpack.renderer.config.js

针对 electron 的 renderer 进程

│ └─ webpack.web.config.js

针对为浏览器构建你的 renderer 进程的源代码

│ └─ icons/

├─ dist

打包之后的目录

│ ├─ electron/

│ └─ web/

├─ node_modules/

项目所需的依赖

├─ src

│ ├─ main

主进程目录

│ │ ├─ index.dev.js

会安装加载vue-devtools

│ │ └─ index.js

main进程的主要方法都在这里写

│ ├─ renderer

渲染进程,也就是vue所在

│ │ ├─ components/

定义vue组件

│ │ ├─ router/

vue-router的路由

│ │ ├─ store/

vuex

│ │ ├─ App.vue

│ │ └─ main.js

vue中的main.js

│ └─ index.ejs

相当于index.html ,因为webpack会将他打包成index.html

├─ static/

静态资源

├─ test

│ ├─ e2e

│ │ ├─ specs/

│ │ ├─ index.js

│ │ └─ utils.js

│ ├─ unit

│ │ ├─ specs/

│ │ ├─ index.js

│ │ └─ karma.config.js

│ └─ .eslintrc

├─ .babelrc

├─ .eslintignore

├─ .eslintrc.js

eslint的配置文件,如果你使用eslint的会自动生成他

├─ .gitignore

配置上传git忽略的文件

├─ package.json

定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据)

└─ README.md

执行npm run dev或 yarn dev 会现在package.json中找到

“dev”: “node .electron-vue/dev-runner.js”,

执行命令会先找到 .electron-vue/dev-runner.js 这个js中 的 startMain()函数会找到…/src/main/index.dev.js,

而在这个js中会require(’./index’),会找到同级目录下的jndex.js 从而创建窗口


相关文章
|
13天前
|
JavaScript 前端开发 UED
组件库实战 | 用vue3+ts实现全局Header和列表数据渲染ColumnList
该文章详细介绍了如何使用Vue3结合TypeScript来开发全局Header组件和列表数据渲染组件ColumnList,并提供了从设计到实现的完整步骤指导。
|
2月前
|
JavaScript
Vue学习之--------消息订阅和发布、基础知识和实战应用(2022/8/24)
这篇文章介绍了Vue中消息订阅和发布的机制,作为组件间通信的一种方式,特别适用于任意组件间的通信。文章通过基础知识讲解和具体的代码实例,展示了如何使用`pubsub-js`库来安装、订阅、发布消息,并在组件销毁前取消订阅以避免内存泄漏。
Vue学习之--------消息订阅和发布、基础知识和实战应用(2022/8/24)
|
2月前
|
JavaScript 前端开发 开发者
Vue学习之--------深入理解Vuex、原理详解、实战应用(2022/9/1)
这篇文章详细介绍了Vuex的基本概念、使用场景、安装配置、基本用法、实际应用案例以及注意事项,通过一个数字累加器的实战示例,帮助开发者深入理解Vuex的原理和应用。
|
2月前
Electron——electron-vue使用webworker
Electron——electron-vue使用webworker
57 4
|
2月前
|
JavaScript
Vue中组件化编码使用(实战练习一)
这篇文章是关于Vue中组件化编码的实战练习,介绍了组件化编码的流程、组件间参数传递的方法以及如何通过组件配合完成一个需求。内容包括了组件拆分、动态组件实现、交互绑定事件的步骤,以及使用props进行父子组件通信的注意事项。文章还提供了一个待办事项列表的静态页面效果和相关代码示例,包括TheFooter.vue、TheHeader.vue、TheItem.vue、TheList.vue和App.vue等组件的代码。
Vue中组件化编码使用(实战练习一)
|
2月前
|
JavaScript
Vue中组件化编码 完成任务的添加、删除、统计、勾选需求(实战练习三完结)
这篇文章展示了如何在Vue中实现任务添加、删除、勾选和统计功能,通过组件间参数传递和方法实现,提供了App.vue、TheList.vue、TheItem.vue、TheHeader.vue和TheFooter.vue组件的主要代码示例。
|
2月前
|
数据采集 JavaScript
Vue中组件化编码使用、实现组件之间的参数传递(实战练习二)
这篇文章介绍了Vue中组件化编码的实现和组件间参数传递的方法,通过实战练习展示了从App.vue向TheList.vue和TheItem.vue传递数据的流程和代码示例。
|
3月前
|
存储 JavaScript API
Vue 全局状态管理新宠:Pinia实战指南
 随着Vue.js项目的日益复杂,高效的状态管理变得至关重要。Pinia作为Vue.js官方推荐的新一代状态管理库,以其简洁的API和强大的功能脱颖而出。本文将带您快速上手Pinia,从安装到应用,轻松实现Vue.js项目的全局状态管理,提升开发效率和项目可维护性。
|
3月前
vue3【实战】语义化首页布局
vue3【实战】语义化首页布局
48 2
|
3月前
|
存储 容器
vue3【实战】来回拖拽放置图片
vue3【实战】来回拖拽放置图片
75 2