Vue Front-end Architecture from scratch (9)

preface

Many of you have used vuE-CLI or create-react-app or similar scaffolding. Scaffolding makes it easy to copy, paste, or clone the code base, and it gives you the option of importing plug-ins that you want. Scaffolding often accompanies projects that are already architected and then copied as needed.

Yeoman

introduce

The Web’s scaffolding tool for modern Webapps

Yeoman is a scaffold tool that allows us to easily develop our own scaffold. This article will not introduce too much about the specific use of Yeoman, but the official website documents are almost enough. I will also put some reference materials COLLECTED by myself at the end of the article, so that students can have a look at them.

The installation

Install yeoman: NPM install -g yo

generator

Generator is simply a Node Module, or NPM. Yeoman executes the build code we wrote based on the generator we wrote. The generator folder must start with generator- and then follow with a custom scaffold name such as generator-zx-vue. After making it into a NPM package, upload it to the NPM official website. Just install it globally on your computer and run it with Yoman, which I’ll cover later.

Create your own generator

Instead of creating your own generator project manually, you can create it from scaffolding that someone else has already done. Install generator-generator: NPM install -g generator-generator After Yo Generator, we will see a series of prompts, and after entering the prompts, we will have a template project to write our own generator.

Write your own generator

In fact, many of the files generated by the generator scaffolding are not needed, we just need to focus on the contents of the generator/app folder. The templates file is used as a repository, so when you’re writing scripts, if you need something, you just go to the repository and copy it.

To highlight

Problem 1.

Since the generator we made was an NPM package, we naturally wanted to version manage it and use Git for future iterations. Templates is actually a standalone project as well. As we mentioned earlier, it’s a finished project shelf that we copied from GitLab or Github. So how do you manage these two different projects?

2. Resolve – Git sub-module

For those of you who use Git 6, the knowledge of Git submodules must come to mind immediately. If you are not familiar with git, you can poke git documentation.

So instead of copying your project into templates, or git clone into templates, delete templates from the app folder, and then: Git submodule add https://github.com/CodeLittlePrince/vue-construct-for-zx-vue.git templates in this way, We can then update our own warehouse project (VUe-construct-for-zX-vue), generator project, pull sub-module. Both remain independent for easy iteration and maintenance.

Writing build scripts

Next, we can write the index.js file in the app folder:

const Generator = require('yeoman-generator')
const chalk = require('chalk')
const yosay = require('yosay')
const path = require('path')
const fs = require('fs')

module.exports = class extends Generator {
  initializing() {
    // Print the welcome
    this.log(
      yosay(`Welcome to the shining ${chalk.cyan('generator-zx-vue')}generator! `)
    )
  }
  prompting() {
    // Let the user choose whether to include vuex
    const prompts = [
      {
        type: 'input'.name: 'name'.message: 'Name of project:'.default: path.basename(process.cwd())
      },
      {
        type: 'input'.name: 'description'.message: 'Description:'.default: ' ',},/ / {
      // type: 'confirm',
      // name: 'includeVuex',
      // message: 'Would you like to include Vuex in your project? ',
      // default: false,
      // }
    ]
    return this.prompt(prompts).then(answers= > {
      this.name = answers.name
      this.description = answers.description
      // this.includeVuex = answers.includeVuex
      this.log(chalk.green('name: '.this.name))
      this.log(chalk.green('description: '.this.description))
      // this.log(chalk.green('includeVuex: ', this.includeVuex))
    })
  }

  writing() {
    // Copy a normal file
    // https://github.com/sboudrias/mem-fs-editor
    this.fs.copyTpl(
      this.templatePath(),
      this.destinationPath(),
      {
        name: this.name
      },
      {},
      { globOptions:
        {
          dot: true}})// Decide whether to install vuex according to the user's choice
    if (this.includeVuex) {
      const pkgJson = {
        name: this.name,
        description: this.description,
        // dependencies: {
        //   vuex: '^3.0.1'
        // }
      }
      // Extend or create package.json file in destination path
      this.fs.extendJSON(this.destinationPath('package.json'), pkgJson)
    }
  }

  install() {
    this.npmInstall()
  }

  end() {
    this.log(chalk.green('Construction completed! '))}}Copy the code

The syntax is very simple, and you can refer to the Official Yeoman documentation for details. Let me briefly introduce some of the more commonly used functions, or life cycles:

The function name	What do I use it for
initializing	I use it to write some welcome words
prompting	Interactions with users, such as input, checkbox, confirm, and so on
writing	Copy and edit files
install	Install dependencies, such as NPM install
end	Write some endings like goodbye

Whether local tests are useful

For unpublished NPM packages, local tests simply link, go to generator root and run NPM link so that we can use our generator. For example, run yo zx-vue in a new empty folder and see the project start building automatically. Once the test is complete, you can publish to the NPM website. See my other article NPM – Writing an NPM Module from zero for the process of publishing

zx-vue

purpose

Zx-vue is a scaffold with VUe-Construct as template warehouse, in order to facilitate the construction of new projects, but also for the unification of future new projects.

use

NPM install -g yo NPM install -g generator-zx-vue then find an empty folder and run: Yo zx-vue construct The address of generator-zx-vue is generator-zx-vue

At the end

I had originally intended vuex to be an optional library, allowing users to opt in or out of the library. However, it turns out that because the EJS template is used to do this, the resulting file will end up with line breaks or indenting that doesn’t conform to ESLint because of the EJS syntax <% if (condition) {%>. Of course, I could have made the project a little more empty and eliminated all vuex usage, but that wouldn’t have been a good idea because I wanted the user to run and see the whole family bucket effect on the page. In fact, there is another method that is more violent is, I take a project with VUex, a project without VUex, and then choose which copy to copy, too violent. For a long time, I didn’t think of a good way to accept it, so I took vuex with me. Finally, also hope the students who have ideas and big guy more comments, give some suggestions ^_^

The original address

Build Vue front-end architecture (9) scaffolding from scratch

eggs

Netease Finance is looking for front-end engineers:

Job Requirements:

1. Bachelor degree, at least 3 years related working experience; Or master degree, at least 1 year relevant working experience (excellent ones can be ignored)

2. Familiar with CSS/DIV/XML/JSON and HTTP protocol;

3. Proficient in JavaScript, Ajax and other page information asynchronous presentation technologies;

4. Familiar with software engineering ideas, good front-end programming ability and programming habits;

5. Positive, good interpersonal communication skills, good work coordination ability, down-to-earth and willing to work;

6. Experience in large website development is preferred.

Also: Github and blog preferred

Interested students can private letter to me, or send my resume email ([email protected]) oh ~

The resources

Yeoman official document

Customize front-end scaffolding using Yeoman

Scaffolding generator written by someone else – WebApp

File operation correlation

Ejs document

Git – sub modules