Element3 Development Insider – Vue CLI plug-in development

Official development Guide cli.vuejs.org/zh/dev-guid…

Our team’s Element was released. Just to make it easy for you to use. Need to join vuE-CLI and Vite ecology.

Today we will talk about how to develop vuE-CLI plug-in.

You can try it out

vue create vue3-demo
vue add element3
Copy the code

What is the Vue CLI plug-in

The Vue CLI tool is responsible for the standardization of the tool base in the Vue ecosystem. He uses a plug-in based architecture.

Vue-router, Vuex, and installation component libraries can all be installed as plug-ins.

Vue Add is designed to install and invoke the Vue CLI plug-in.

Install vue add vuexCopy the code

A vue Add XXX will do.

Second, function realization

1. Build a framework

1.1 Initial NPM library

In order for a CLI plug-in to be used properly in a Vue CLI project, it must follow a naming convention such as vue-cli-plugin-

or @scope/vue-cli-plugin-

. This way your plugin can:

  • be@vue/cli-serviceDiscovery.

That is, we just need to name the NPM library vue-cli-plugin-element3

So as long as the final submission to the NPM repository after we pass

vue add element3
Copy the code

You are ready to install the plug-in

mkdir vue-cli-plugin-element3
npm init -y
Copy the code

2. Install and configure cli interaction

Before installing the plug-in, you will usually use the command line interaction to select the following installation parameters:

For example, in Element you need to ask

  • Global Installation

  • Do you use sass?

This feature is implemented using inquirer. In fact, you can write a CLI tool to use this feature

In this case we just need to edit the prompts. Js file. For details, see Inquirer

module.exports = [
  {
    type: 'list'.name: 'import'.message: 'How do you want to import Element3? '.choices: [{name: 'Fully import'.value: 'full' },
      { name: 'Import on demand'.value: 'partial'}].default: 'full'}, {when: answers= > answers.import === 'full'.type: 'confirm'.name: 'customTheme'.message: 'Do you wish to overwrite Element\'s SCSS variables? '.default: false,},]Copy the code

3. 代码生成器Generator

The main functionality added to the Element3 component library focuses on generators. What generators do

  • Modifying existing code
  • Add code
  • Add the dependent
  • Other features (such as Babel configuration)

To add the Element3 library manually, the following steps are probably required:

  • NPM adds dependency libraries
  • Add component libraries as vue plugins
  • Main.js references the component library
  • Write an example code in app.vue for example: reference a button to confirm the installation effect

3.1 Adding a Dependency

module.exports = (api, opts, rootOptions) = > {
 api.extendPackage({
  dependencies: {
    'element3': '^ 0.0.26'}})}Copy the code

This function can be realized by calling the API provided by the CLI.

3.2 Adding plug-ins

To add a plug-in, you simply need to add the /plugins/element.js file

Generated code is usually rendered using a template engine, a process similar to back-end code rendering. Common libraries include EJS templates and HBS templates

The EJS template is required in the CLI tool.

If you want to know how to implement the template engine, please see this article: “Make wheels every day – Template engine”](juejin.cn/post/688413…)

First define the template

// ExcerptsThe < % _if (options.import === 'full') {_ % >import Element3 from 'element3'The < % _if (options.customTheme) { _%>
import '.. /element-variables.scss'The < % _}else{_ % >import 'element3/lib/theme-chalk/index.css'The < % _} _ % > < % _if(options.lang ! = ='en') {_ % >import locale from 'element3/lib/locale/lang/<%= options.lang %>'<%_} _%> <%_}else{_ % >import { ElButton } from 'element3'
import 'element3/lib/theme-chalk/index.css'The < % _if(options.lang ! = ='en') {_ % >import lang from 'element3/lib/locale/lang/<%= options.lang %>'
import locale from 'element3/lib/locale'_ % > _ < %}}export default (app) => {
  <%_ if (options.import === 'full') {_ % > < % _if(options.lang ! = ='en') { _%>
  app.use(Element3, { locale })
  <%_ } else { _%>
  app.use(Element3)
  <%_ } _%>
  <%_ } else{_ % > < % _if(options.lang ! = ='en') { _%>
  locale.use(lang)
  <%_ } _%>
  app.use(ElButton)
  <%_ } _%>
}
Copy the code

Call the template engine to render

The render method provided by the API is actually the EJS template engine

api.render({
    './src/plugins/element.js': './templates/src/plugins/element.js.ejs',})Copy the code

3.3 Adding a Plug-in Reference

Adding a plug-in reference is equivalent to adding content to the main.js file

This procedure logic is relatively simple, only through a simple file operation + re can be completed.

The AST abstract syntax tree is also required for complex functions. This will be covered in subsequent chapters.

api.afterInvoke(() = > {
    const { EOL } = require('os')
    const fs = require('fs')
    const contentMain = fs.readFileSync(api.resolve(api.entryFile), { encoding: 'utf-8' })
    const lines = contentMain.split(/\r? \n/g)

    const renderIndex = lines.findIndex(line= > line.match(/createApp\(App\)\.mount\('#app'\)/))
    lines[renderIndex] = `const app = createApp(App)`
    lines[renderIndex + 1] = `installElement3(app)`
    lines[renderIndex + 2] = `app.mount('#app')`

    fs.writeFileSync(api.resolve(api.entryFile), lines.join(EOL), { encoding: 'utf-8'})})Copy the code

3.4 Adding code examples

This feature again renders code from code templates.

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <div>
      <p>
        If Element3 is successfully added to this project, you'll see an
        <code v-text="'<el-button>'"></code>
        below
      </p>
      <el-button type="primary">el-button</el-button>
    </div>
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App'.components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Copy the code
api.render({
    './src/App.vue': './templates/src/App.vue.ejs'
})
Copy the code

4. The Service processing

Service is run when the service is started. Here we have a little Logo show.

We did this using Figlet + Chalk

const figlet = require('figlet')
const chalk = require('chalk')

module.exports = () = > {
    console.log(chalk.yellow(figlet.textSync('Element 3', {
        font: 'big'.horizontalLayout: 'default'.verticalLayout: 'default'.width: 80.whitespaceBreak: true
    })));
}

Copy the code

Third, local debugging

If NPM is not uploaded, install it locally as follows:

Install dependencies again
yarn
npm install --save-dev file:/Users/xiaran/source/hug-sun/vue-cli-plugin-element3
vue invoke vue-cli-plugin-element3
Copy the code

Upload NPM warehouse

To upload the repository, perform NPM publish. Just be aware that you need to change the mirror warehouse. Upload it and change it back.

#! /usr/bin/env bash
npm config get registry Check the repository mirror
npm config set registry=http://registry.npmjs.org
echo 'Please perform login related operations:'
npm login # landing
echo "-------publishing-------"
npm publish # release
npm config set registry=https://registry.npm.taobao.org # Set to Taobao mirror
echo "Release completed"
exit
Copy the code

Young people should speak martial virtue!!give a like,Focus on,collectionArrange it all!!

🔥 public id search: [Front-end bus] for more insider tutorials on Element3 development

  • This is element3, the open source project of our Flower Mountain front end team
  • A front-end component library that supports VUE3