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
you!
Plugin dev guide
cli.vuejs.org
Demo repository
bit.ly/cli-demo
How to train your Vue CLI plugin
By Natalia Tepluhina
How to train your Vue CLI plugin
This presentation shows main components of the Vue CLI plugin and how to make them work together
