How to train your
ue CLI plugin
Why should I care?
npm install electron --save dev
## or
yarn add electron --dev// app.js
const electron = require('electron')
const app = electron.app
const BrowserWindow = electron.BrowserWindow// app.js
let url
if(process.env.NODE_ENV === 'DEV') {
url = 'http://localhost:8080'
} else {
url = `file:/${process.cwd()}/dist/index.html`
}// app.js
app.on('ready', () => {
const window = new BrowserWindow({ width: 800, height: 600 })
window.loadURL(url)
})// package.json
"scripts": {
"electron:serve": "NODE_ENV=DEV vue-cli-service serve &&
sleep 5 && NODE_ENV=DEV electron app.js",
"electron:build": "electron app.js"
}// vue.config.js
module.exports = {
publicPath: process.env.NODE_ENV === "production"
? `${process.cwd()}/dist/`
: '/'
}vue add electron-builder
Natalia Tepluhina
@N_Tepluhina
Senior Frontend Engineer
Core Team Member
Google Dev Expert
@N_Tepluhina
Vue CLI
vue create my-project
npm install -g @vue/cli
@N_Tepluhina
Vue CLI
@N_Tepluhina
Vue CLI
494 plugins available!
(ﾉ◕ヮ◕)ﾉ*:･ﾟ✧ ✧
vue add my-plugin
@N_Tepluhina
Let's create one more!
@N_Tepluhina
Naming
vue-cli-plugin-<name>
@scope/vue-cli-plugin-<name>
@N_Tepluhina
Naming
@N_Tepluhina
package.json
README.md
index.js
Required
generator.js
prompts.js
ui.js
Optional
@N_Tepluhina
Generator
- package
- templates
- imports
@N_Tepluhina
install
invoke
generator
@N_Tepluhina
Demo Time
@N_Tepluhina
Prompts
- ask questions
- pass answers
@N_Tepluhina
install
invoke
prompts
generator
@N_Tepluhina
Demo Time
@N_Tepluhina
Service
- webpack config
- vue-cli service commands
@N_Tepluhina
Demo Time
@N_Tepluhina
UI integration
- config screen
- advanced tasks
- UI prompts
- widgets
- discoverability
Image by Tsuki Butterflah
@N_Tepluhina
Image by Tsuki Butterflah
Demo Time
Thank
