Vue3 + Electron + Element Plus + Typescript Project Setup Process (super detailed)

preface

Recently, I have a demand to start a new Electron project. Since it is now Vue3, I will definitely play it, and then start to search various materials, step on some pits, and record the process. One is to facilitate myself to check later, and the other is to help others to step on fewer pits

I. Technology stack

Vue3
Electron
Element Plus
TypeScript
Vue CLI 4.x

The reason for not using Vite is that it is not very good at using vite at present. I have tried some pits and it takes time to solve them. I don’t have much time to toss about at present

Create a Vue3 + Typescript project

1. Install or upgrade the Vue CLI tool

Here use the Vue CLI tool to create

You can check whether the Vue CLI tool is installed or the version is what

See the official website: Vue CLI for details

Vue -v // @vue/cli 4.5.13Copy the code

If not installed or the version is old, use the following command to install or upgrade globally

NPM install -g@vue /cli# ORYarn Global add @vue/cli // Upgrade the latest version NPM update -g@vue /cli# OR
yarn global upgrade --latest @vue/cli
Copy the code

2. `vue create xxx`Create a project

Step 1: Create a VUE project using the following command vue create XXX (project name)

// eg, I create a project called translate-demo vue create translate-demoCopy the code

Three choices come out:

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

I’ll take the third Manually select features

Step 2: Select the configuration items to be added

I picked these five:

Choose Vue version
Babel
TypeScript
Router
Linter / Formatter

You can add as much as you want

Step 3: Select Vue version 3, of course

Step 4: Would you like to use a class-style decorator? I’m not used to it, so I chose N (default).

For details, please refer to the official documentation.

Step 5:

Compile TypeScriptI with Babel, select Yes

Learn why compiling typescript with Babel is a better choice.

Step 6: Route mode configuration, let you configure history mode, select N, because Electron only supports hash mode

Step 7: Select formatting to check configuration, select ESLint + Prettier, whichever you like

13, Don’t use Standard Config, Prettier, after searching Prettier for a while, I changed Prettier

Unexpected token Parsing error: Unexpected token as well

Why not TSLint? Check out TypeScript’s official decision to adopt ESLint

Step 8: To ask you when to test your code, of course when to save it, select Lint on Save

Step 9: If you want to create configuration files for Babel and ESLint separately, In the root directory or In package.json, I choose In dedicated Config files to create configuration files separately

I’m not sure what the difference is, but it says that a separate configuration file in the root directory is more editor-friendly?

Step 10: Ask if you want to save the configuration. I won’t save it

After the configuration is complete, CD translate-demo enters the project

Third, introduce`Electron`

Under the translate-demo project, enter the following command to install Vue CLI Plugin Electron Builder

The Vue CLI Plugin Electron Builder can help us integrate Electron into a Vue project

Ps: Stop using electron vue, it’s been too long since it was updated

vue add electron-builder
Copy the code

Select the Electron version, select the latest 13

Install dependencies

npm i
Copy the code

Two points

The first one: routing mode

After installation, if you have installed the 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

That is, the mode of our route must be hash mode, corresponding to step 6

// translate-demo/router/index.ts
// Look at the same code as below
const router = createRouter({
  history: createWebHashHistory(),
  routes
})
Copy the code

Second: Comment code (skip this step if you have access to Google)

If you don’t have access to the Internet, the installExtension method keeps asking for VUEJS3_DEVTOOLS to be installed, which causes the project to start so slowly that it has to wait five times for it to time out, so either don’t use the plug-in or find a way to get online

// translate-demo/background.ts
// This line of code is commented out
import installExtension, { VUEJS3_DEVTOOLS } from 'electron-devtools-installer'
// The second part, these lines of code comment out
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())
    }
  }
Copy the code

And then when it’s okay, run it and see

npm run electron:serve
Copy the code

Iv. Element Plus is introduced on demand

1. Install Element Plus

npm install element-plus --save
Copy the code

2. Install the babel-plugin-import implementation as needed

npm install babel-plugin-import -D
// OR
yarn add babel-plugin-import -D
Copy the code

3. Introduce styles (CSS)

Here, CSS is used as an example, SCSS and so on

In babel.config.js, add the following code

// 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']
}
Copy the code

4. Globally import components

In main.ts, components are introduced globally

// translate-demo/main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
+ import {ElButton, ElCard} from 'elder-plus

+ const Components = [ElButton, ElCard] // The component you need to import

+ const app = createApp(App)

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

Copy the code

The last

That’s the end of the project setup tutorial. If you have time later, I’ll show you how to write the Electron page in a project