Skip to content

引入前端框架

引入 Vue

认识 Vue

https://github.com/nklayman/vue-cli-plugin-electron-builder

https://github.com/SimulatedGREG/electron-vue

Vue CLI Plugin Electron Builder 和 electron-vue 是两个非常不错的工具，开发者可以基于它们轻松地在 Electron 应用内使用 Vue 及其组件(包括 HMR 热更新技术)。
虽然后者拥有更多的 GitHub star，更受欢迎，但推荐使用前者。
前者基于 Vue CLI Plugin 开发，更新频繁，而后者已经有近一年时间没更新过了。

环境搭建

注意: 这个示例没有用 Sass，且使用的语言是 Typescript，可以参考下面那个进行搭建学习

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
vue create chapter3_4


Vue CLI v4.5.11
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Linter
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)?
 No
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No


cd chapter3_4
vue add electron-builder

cd node_modules/electron
node install.js

然后执行: 

1
npm run electron:serve

程序运行时如果修改src/App.vue中的内容，界面会自动更新，说明项目中 HRM 已生效

vue2, 不使用 typescript，使用 Sass

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
$ npm i -g @vue/cli
$ vue --version
@vue/cli 4.5.13

$ vue create win_test


Vue CLI v4.5.13
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, CSS Pre-processors, Li
nter
? Choose a version of Vue.js that you want to start the project with 2.x
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sa
ss/SCSS (with dart-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No


$ cd win_test
$ vue add electron-builder

? Choose Electron Version ^13.0.0


$ cd node_modules/electron
$ node install.js
$ cd ../..
$ npm run electron:serve

项目结构

1
2
3
4
5
src
    background.ts
    main.ts
dist_electron
public

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
src
├── App.vue
├── assets
│   └── logo.png
├── background.js
├── components
│   └── HelloWorld.vue
└── main.js
dist_electron
public

dist_electron 目录存放应用打包后的安装程序
public 目录存放项目的静态资源，此目录下的程序不会被 webpack 处理。
src/background.ts/js 是主进程入口程序
src/main.ts/js 是渲染进程入口程序