阅读 1240

Vue3 + Electron + Element Plus + Typescript 项目搭建流程(超详细)

前言

最近有个需求,需要新起一个 Electron 的项目,既然现在都是 Vue3 了,那肯定要玩一玩呀,然后开始搜各种资料,踩了一些坑,把过程记录下来,一个是方便自己后面再查,还有一个是帮助大家少踩坑

一、技术栈

  • Vue3
  • Electron
  • Element Plus
  • TypeScript
  • Vue CLI 4.x

不用 vite 的原因是,目前 vite 还不太会用,试了试有些坑得花时间去解决,目前没有很多时间去折腾,等以后有空再去研究下

二、创建 Vue3 + Typescript 项目

1.安装或升级 Vue CLI 工具

这里借助 Vue CLI 工具去创建

可以先看下有没有装 Vue CLI 工具 或者版本是多少

详情见官网:Vue CLI

vue -V  // @vue/cli 4.5.13
复制代码

没有安装或者版本老的话,使用下面的命令全局安装或升级

// 全局安装
npm install -g @vue/cli
# OR
yarn global add @vue/cli

//  升级最新版本
npm update -g @vue/cli
# OR
yarn global upgrade --latest @vue/cli
复制代码

2. vue create xxx 创建项目

第一步:使用vue create xxx(项目名)以下命令创建 vue 项目

 // eg,我创建一个项目,叫 translate-demo
 vue create translate-demo	
复制代码

image-20210817023725661

出来三个选项:

  • Default ([Vue 2] babel, eslint)
  • Default (Vue 3) ([Vue 3] babel, eslint)
  • Manually select features

我选第三个 Manually select features

第二步:选择需要添加的配置项

image-20210817023757365

我选了这5个:

  • Choose Vue version
  • Babel
  • TypeScript
  • Router
  • Linter / Formatter

大家可以根据自己的需要加

第三步:选择 Vue 版本,当然是 3 啦

image-20210817023814999

第四步:问你要不要使用class 风格的装饰器,我不太习惯,选了 N(默认)

具体的内容可以看下官方文档

image-20210817023830304

第五步

babel 编译 TypeScriptÏ,选是

可以学习下大佬的这篇文章:为什么说用 babel 编译 typescript 是更好的选择](juejin.cn/post/696863…)

image-20210817023855977

第六步:路由模式配置,让你配置 history模式,选 N,因为 Electron 只支持 hash模式

image-20210817023933250

第七步:选择代码格式化检查配置,选 ESLint + Prettier,看你喜欢哪种

不要用 Standard config,有坑,坑了我好久,网上搜了一堆没解决,最后换了 Prettier

一直报这个错 Parsing error: Unexpected token :还有Unexpected token as的错

为啥不选 TSLint,可以看下这篇文章,TypeScript 官方决定全面采用 ESLint

\

第八步: 问你啥时候检测代码,当然是保存的时候啦,选 Lint on save

第九步: 问你 babelESLint的配置文件是单独创建,放在根目录,还是放 package.json里面,我选了In dedicated config files单独创建

具体区别我也不太清楚,搜来的说法是,单独的配置文件放在根目录对编辑器更友好?

第十步:问你要不要保存配置,我不保存,下次再说

然后等待配置完成,cd translate-demo 进入项目

三、引入 Electron

translate-demo项目下,我们输入下面命令,安装 Vue CLI Plugin Electron Builder

Vue CLI Plugin Electron Builder可以帮助我们在 Vue 项目中集成 Electron

Ps: 不要再用 electron-vue 了,已经太久没更新了

vue add electron-builder
复制代码

选择 Electron的版本,选择最新的 13

安装依赖

npm i
复制代码

2个注意点

第一个: 路由模式

安装完成后,假如你安装了 Vue Router,它会提示你 It is detected that you are using Vue Router. It must function in hash mode to work in Electron. Learn more at https://goo.gl/GM1xZG

也就是我们的路由的 mode 必须为 hash 模式,对应之前的第六步

// translate-demo/router/index.ts
// 看看跟下面的代码一样不
const router = createRouter({
  history: createWebHashHistory(),
  routes
})
复制代码

第二个: 注释代码(如果能访问谷歌的话,这步跳过)

如果不能访问外网,installExtension 方法会持续请求安装VUEJS3_DEVTOOLS,然后导致项目启动非常慢,必须等它五次请求超时后,才能启动项目,所以要不不使用这个插件,要不就找个法子科学上网Ï

image-20210817012759528

// translate-demo/background.ts
// 第一部分,这行代码注释掉
import installExtension, { VUEJS3_DEVTOOLS } from 'electron-devtools-installer'
// 第二部分,这几行代码注释掉
if (isDevelopment && !process.env.IS_TEST) {
    // Install Vue Devtools
    try {
      await installExtension(VUEJS3_DEVTOOLS)
    } catch (e) {
      console.error('Vue Devtools failed to install:', e.toString())
    }
  }
复制代码

然后没问题后,运行下看看

npm run electron:serve
复制代码

四、Element Plus 按需引入

1、安装 Element Plus

npm install element-plus --save
复制代码

2、安装 babel-plugin-import 实现按需引入

npm install babel-plugin-import -D
// OR
yarn add babel-plugin-import -D
复制代码

3、引入样式(CSS)

这里以 CSS 为例,SCSS 等看官方文档

babel.config.js中,添加下面代码

// translate-demo/babel.config.js
module.exports = {
+  plugins: [
+   [
+      'import',
+     {
+       libraryName: 'element-plus',
+        customStyleName: name => {
+         return `element-plus/lib/theme-chalk/${name}.css`
+       }
+      }
+    ]
+  ],
  presets: ['@vue/cli-plugin-babel/preset']
}
复制代码

4、全局引入组件

main.ts中,全局引入组件

// translate-demo/main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
+ import { ElButton, ElCard } from 'element-plus' // 你需要引入的组件

+ const components = [ElButton, ElCard] // 你需要引入的组件

+ const app = createApp(App)

+ components.forEach(component => {
+  app.use(component)
+ })
+ app.use(router).mount('#app')

复制代码

最后

项目搭建的教程就到这里结束了,后面有时间的话会出一下在项目中怎么写 Electron 页面的教程

文章分类
前端
文章标签