Vue CLI scaffolding installation, construction, configuration and CLI project analysis

Table of Contents

1. Quick Start with CLI

1. Official introduction:

2. Install Vue CLI:

3. Build Vue CLI:

4.IDEA configures Vue CLI:

2. Vue CLI project analysis

1. Structural analysis:

1.1 config

1.2 node_modules

1.3 src

1.4 static

2. Process analysis:

2.1 main.js

2.2 router/index.js

2.3 components/HelloWorld.vue

2.4 App.vue

2.5 index.html

1. Quick Start with CLI

1. Official introduction:

(1) Vue CLI is a complete system for rapid development based on Vue.js, providing:

  • Interactive project scaffolding implemented through @vue/cli.
  • Zero-configuration prototype development via @vue/cli + @vue/cli-service-global.
  • A runtime dependency (@vue/cli-service), which depends on:
    • Upgradeable;
    • Built on webpack with sensible default configuration;
    • It can be configured through the configuration file within the project;
    • Can be extended via plugins.
  • A rich collection of official plug-ins integrating the best tools in the front-end ecosystem.
  • A fully graphical user interface for creating and managing Vue.js projects.

(2) Vue CLI is committed to standardizing the tool base in the Vue ecosystem to ensure that various build tools can be smoothly connected based on intelligent default configurations, allowing developers to focus on writing applications , without having to worry about configuration issues. At the same time, the Vue CLI also provides each tool with the flexibility to adjust configurations without ejecting.

2. Install Vue CLI:

To build a Vue CLI scaffolding project, you need to use NPM (node package manager). npm is a package management tool installed with node.js, similar to Maven. Since up uses Vue2 as the demo version, the lower version node.js 10.16.3 is used as an example here. The download address is as follows:

https://nodejs.org/en/blog/release/v10.16.3

As shown below :

Just download and install (the installation directory can be specified manually).
(1) In the local cmd window, first uninstall the old version of CLI through the “npm uninstall vue-cli -g” command (if there is no old version, there is no need to enter this Order);
(2) Then install the Taobao image through “npm install -g cnpm –registry=https://registry.npm.taobao.org“. After the installation is completed As shown below:

(3) You also need to pass the “cnpm install [email protected] -g” command and “cnpm install [email protected] – g“Install the webpack and webpack-cli tools.
(4) Finally use the “cnpm install -g @vue/[email protected]” command to install vue cli; you can use “vue -V” Check the version of vue cli installed, as shown in the figure below:

PS: When using cnpm, if the error “Error: Cannot find module ‘node:util’ ” is reported, it may be caused by the mismatch between the npm version and the cnpm version, you can first uninstall the previously installed cnpm through “npm uninstall cnpm“; then view the current npm version through “npm -v“, as shown below Shown:

Use the “npm install -g [email protected] –registry=https://registry.npm.taobao.org” command to install the corresponding version of cnpm according to the npm version specification.

3. Build Vue CLI:

First, determine the location of the Vue project. You can create it yourself, as shown in the figure below:

Then enter cmd under the file and initialize the project through “vue init webpack project name”. In the subsequent configuration prompt that pops up, select the following options:

Then, just enter the command according to the prompts, as shown in the figure below:

After successful operation, you can access the following page through port 8080:

4.IDEA configures Vue CLI:

Terminate the Vue project running in cmd through Ctrl + c, use IDEA to open the Vue project you just created, and then configure npm, as shown in the figure below:

After the configuration is completed, apply; run the project to revisit the page just now.

2. Vue CLI project analysis

1. Structural analysis:

The structure of the Vue project can be roughly divided into four major blocks, as shown in the figure below:

1.1 config

The config directory is used to store configuration files. For example, port configuration can be done in index.js.

1.2 node_modules

The node_modules directory represents the modules that the project depends on (mainly some .js files). These dependent modules are specified in package.json in the static directory.

1.3 src

Below src is divided into several small directories such as “assets”, “components”, “router”–
(1) assets : Directory used to store project resources, eg: .css files, .js files, pictures, etc.
(2) components : Store custom components.
(3) router : stores routing files, also called “router/routing table”.
PS: ①The App.vue file located directly in the src directory is the main single page of the Vue project and can display the routing view. ②main.js located directly in the src directory is the core file of the Vue project and is the entry js file. The Vue project creates a Vue instance here and specifies mounting el, router, component, template, etc..

1.4 static

Store static files. There are two particularly important files in the static directory–index.html and package.json.
index.html : Vue project homepage, where a div with id = app is defined.

package.json: Specifies the modules that the current Vue project depends on, similar to the pom.xml configuration file in the Maven project.

2. Process analysis:

2.1 main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
newVue({
  el: '#app',
  router,
  components: {App},
  template: '<App/>'
})

(1) main.js is the entry js of the Vue project, Vue instances are created here.

(2) The mounting el (div element with id = app) is specified in the Vue instance.
(3) The router specified in the Vue instance is imported from the router directory, here is the abbreviation of “./router/index.js“, import and export The method is the third export method export default {}; and the second import method import name from in “ES6 New Features – Modular Programming” “__.js”; .

(4) The components are specified in the Vue instance to introduce the component. At this time, the syntax of “ES6 new feature – object abbreviation” is used.

(5) template: is specified in the Vue instance, and the App here is the App in components: { App }. Therefore, when we change the property name ourselves, the Vue project can still run normally, as shown in the figure below:

2.2 router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld' //@ represents the src directory

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/', //Each path corresponds to a routing table entry.
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

(1) main.js performs routing, finds the routing file “router/index.js“, and gets the URL accessed in the browser, that is, http ://localhost:8080/#/, get the routing path/ (Review – URL with / at the end means that you are accessing a path, URL without / at the end means that you are accessing a resource).

(2) Export a Router object through the export statement of modular programming in the router/index.js file.

(3) routes: [ ] represents the routing table, which can specify multiple routes (i.e. multiple matchable access paths).

(4) After matching the path”/”, the corresponding “component: HelloWorld.vue” component was found.

2.3 components/HelloWorld.vue

(1) Custom component that can display pages.

(2) Get the view after compiling the component.

(3) Return the compiled view/page.

2.4 App.vue

(1) App.vue is the main single page of the Vue project.
(2) After introducing , the routed view/page can be displayed.

2.5 index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue_first_try</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

(1) index.html in the static directory is the project homepage.

(2) A div element with id = app is defined in index.html.
(3) When the created Vue instance is rendered, it will be mounted on the div, and finally the user will see the rendering effect.

(4) Summary: The final access sequence of the Vue CLI scaffolding project is–
①main.js (entry js) –>
②router/index.js (match the corresponding route according to the visited URL) –>
③components/HelloWorld.vue (find the corresponding component based on the component attribute in the matched routing item) –>
④main.js (Compile the component to generate the view and return the view to main.js) –>
⑤Access the introduced App component according to the components attribute in the Vue instance created in main.js –>
⑥The App.vue component has introduced to display the routed view/page –>
⑦Finally, mount the rendered Vue instance to the div element with id=app defined in index.html.

System.out.println(“END—————————————– ———————–“);