Preliminary scaffolding

  • Tips

Any good open source project has the project-CLI scaffolding, which we use to generate the best and most desirable scaffolding quickly

I usually use the CLI to generate project skeletons and then make personal modifications on top of them.

What is a CLI

The command line interface (CLI) was the most widely used user interface before the popularization of the GRAPHICAL user interface (GUI). It usually does not support the mouse. Users input commands through the keyboard, and the computer executes the commands after receiving them. Some call it a character user interface

As the name implies XXX-CLI is the use of command line generation XXX program. I wrote a tutorial on creating a personalized CLI based on nodeJs

How to use Node to develop your own CLI tools and publish them to NPM.

vue-cli

As of September 02 2018, VUE-CLI is the latest version 3.0

Vue Chinese ecology is very perfect, let’s go to the official website to see:

cli.vuejs.org/zh/

Vue-cli2 versus VUe-CLI3

It is a pity that VUE-CLI-3 was released on August 11, 2018, and my forum started to build CLI-3 earlier, which delayed me some time. It will be mentioned later

Just a quick lookvue-cli3New features:

  • Pwa can be generated
  • Support UI interface check box can be selected
  • The compatible CNPM
  • Vue cli-service = vue cli-service = vue cli-service = vue cli-service = vue cli-service = vue cli-service

I was thinking about the project compatibility with VLI-3 when I was not busy these two days, but later I wasted a lot of time and the effect was still not ideal, so I rolled back the code and announced to give up.

Since using CLI-3 did not improve the performance of my project, and instead went through a lot of my mature infrastructure, I decided to use CLI-2 for the cost of time, with the general directory structure being the same.

The installation of vue – cli

Pay attention to the prerequisites before installation to avoid wasting unnecessary time.

Vue CLI requires Node.js version 8.9 or later (8.11.0+ recommended). (If you use CLI-2 like me, you don’t need such a new nodeJs.) You can use NVM or NVM-Windows to manage multiple versions of Node on the same computer.

I will not stay away, the official website is much better than I said.

You can install it using YARN or NPM

npm install -g @vue/cli
# OR
yarn global add @vue/cli
Copy the code

I used NPM to try again (if the speed of NPM is not ideal, try taobao CNPM and do not rely too much on CNPM) :

localhost:~ Venda-GM$ sudo cnpm i @vue/cli -g
Copy the code

TIPS

In NPM, install can be written as I, -g can be put anywhere, –save can be written as -s, –save-dev can be written as -d

Seeing this screen, the installation is complete.

Test to see if the version is correct, ok create project:

vue create new-bee
Copy the code

Pull 2.x template (old version)

Vue CLI 3 uses the same Vue commands as the older version, so Vue CLI 2 (VUe-CLI) is overwritten. If you still need to use older versions of vue Init, you can install a bridge tool globally:

npm install -g @vue/cli-init
Copy the code

vue initThe operation effect will follow[email protected]The same

vue init webpack my-project # To generate a cli-2* project
Copy the code

Use vue-CLI-2 to generate the project

vue init webpack new-bee
Copy the code

Here are the options I selected when I created the project:

Let me tell you a little bit about these three:

  • Vue build mode

It is recommended to use run time + compile, usually requiring webpack compile.vue templates.

  • Whether to select the preset Eslint

And is not suitable for everyone, some requirements are too strict, I have a mature, code here, with their own, of course, can be based on it to do some deletion.

  • It will execute install for us

If you have a good socket terminal proxy, you can use this, otherwise you can select No and use CNPM yourself

A first look at the directory structure

Let’s take a look at vuE-CLI2’s auto-generated project catalog, and I’ll label it to give a brief description for those of you who may be confused

The main purpose of our refactoring this time was to standardize and make it more suitable for multi-module collaboration, rather than to make it look more complicated. The project structure, esLint improvements, etc., in this paper were decided by the project team repeatedly and have certain production value.

Worrywart: Get ready for Electron

The cli generated project SRC is the source code directly below, but in order to consider the future use of electron we will use renderer wrapped, a bit more standard.

Take a look at electron-vue

Compatible with Electron source directory

The github tree plugin octotree can also be installed in the Google Store directly, saving a lot of time looking at the source code.

  • Don’t set upelectron 的 mainThe folder andindex.ejsDependencies need to be added and are not currently needed.

Don’t forget to fix the webPack-related path issues

Plus the path to the renderer

 app: './renderer/src/main.js'
Copy the code

The @ path should also be changed in Webpack, otherwise the component will not be found

webpack alias

What it looks like

alias: {
      The '@': resolve('renderer/src'),}Copy the code

Container-level directories

Create a container at the level of the components directory: separate the modules inside the container to make the project modules more visible. If the project with more than 10 people can divide the workspace well, establish a reasonable route, avoid unnecessary conflicts.

Take the current forum project for example

Routing directory adjustment specifications

Create blog.js for /container/blog under /router

const Blog = (a)= > import ( /* webpackChunkName: "blog" */ '@/container/blog/index')

/* All paths in container/blog are configured under children to avoid clutter */
let routes = [{
  path: '/blog'.name: 'blog'.component: Blog,
  children: [{
      path: 'blogdemo'.component: Blog
    } 
  ]
}]


export {
  routes
}

/ / note
/* webpackChunkName: "blog" */ 
// The route is loaded lazily

Copy the code
  • self-generatedindex.jsThe main road is like this

  • Disadvantages:

It’s too simple, we can’t write all the routes in it. As children, it looks very messy, difficult to handle development and debugging, and multiple people working together can easily cause conflicts.

We tried to bring blog.js here

Import the route from blog.js export and create an alias to prevent conflicts

import { routes as blogRoutes } from './blog'
Copy the code

Since there may be N more routing modules, we split the routes

The automatic generation is as simple as this:

// Export routes directlyexport default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})
Copy the code

Let’s break it down like this:

// Define the base routelet route = [
  {
    path: '/',
    name: 'HelloWorld', Component: HelloWorld}] route = route.concat(blogRoutes) // exportexport default new Router({
  routes: route,
  linkActiveClass: 'active'
})
Copy the code

Back up, let’s add some content to blog/index.vue to test it out:

<template>
  <div class="Blog">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: "Blog",
  data() {
    return {
      msg: "Welcome to Your Blog Page"}; }};</script>
Copy the code

Test the

First of all,

npm install
Copy the code

Disliking slow can use the CNPM of Taobao my previous article talked about

npm run dev
Copy the code

Enter http://localhost:8080/#/blog in your browser as prompted

Vue-cli2 WebPack-generated projects are hot deployable, so you don’t need to configure a lot of the configuration yourself from scratch, which is why I want you to use the CLI to save some time. Other login and other modules should follow this pattern.

Talk abouteslint

I find esLint to be of value in both individual projects and team collaborations as a way to standardize your own and your team’s code style. Now esLint can even predict if your code might have a problem. It is recommended that you make some rules and use your IDE(integration environment) for development: idea, WebStorm, vscode, etc. Plugins with detection, eslint package to detect compile failure is very strict or not to try in the early stage.

I referred to the configuration adjusted by Airbnb at that time, and gradually adjusted it after more than a year of project practice, which is still reasonable at present. The configuration rule code of esLint is here.

The code for this chapter is here

You can even see the step-by-step transformation process in this chapter in the commit

Summary of Project Construction

So much for the construction of the project. We rely on CLI-2 to generate a basic skeleton, but not on CLI-2. We have made some extensions to the skeleton, as for specific optimization of Webpack, optimization of AXIos, interception, Node to do development mode proxy layer, etc. I think it would be better to talk with the progress of the project, I should not blindly pour a pile of knowledge, I hope you can insist on digestion with me.

About me

  • I am currently writing the “Before and after Separating Projects from Zero” series for revision and supplement

  • Continually updated practice address for Separating projects before and after Building from Zero

The articles

Introduction to Separating WEB Projects before and after Building from Zero – The Meaning of Open Source

Separating Web Projects before and after Building from Zero: The Beginning – A look at the history of the Web

Split Web Projects before and after Building from Zero – an in-depth talk about split architecture before and after

“Separating Web Projects before and after Building from Zero” Preparation – Front End Understanding pass? Front-end infrastructure and technology introduction

Separating Web Projects before and after Building from Scratch – 5 minutes to quickly build a standard front-end project skeleton