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

(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 achieved through @vue/cli + @vue/cli-service-global .

A runtime dependency (@vue/cli-service) that:

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, making development People can focus on writing applications instead of worrying 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 the 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, here we take the lower version node.js 10.16.3 as an example. 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 pass"npm uninstall vue-cli -g"Install the Taobao image. After the installation is complete, it is as shown below Show: npm install -g cnpm --registry=https://registry.npm.taobao.org Then pass"
(2)"Command to uninstall the old version of CLI (if there is no old version, there is no need to enter this command);

(3) also needs to pass"cnpm install [email protected] -g" ;Command and"cnpm install [email protected] -g"Installwebpack"Command to install vue cli; you can use "vue -V" to check the installed version of vue cli, as shown below: cnpm install -g @vue/[email protected]Finally use"(4) tools. webpack-cliand

PS: When using cnpm, if the error "Error: Cannot find module 'node:util'" is reported, it may be because of the npm version and cnpm version caused by mismatch, you can first uninstall the previously installed cnpm through "npm uninstall cnpm"; and then Use "npm -v" to check the current npm version, as shown in the figure below:

Via "npm install -g [email protected] --registry=https://registry.npm.taobao.org "Instruction, install the corresponding version of cnpm according to the npm version specification.

3.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, initialize the project through "vue init webpack project name", and select the following options in the subsequent configuration prompt:

Then, input instructions 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 just created Vue project, 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

node_modulesDirectoryIndicates 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

src is divided into several small directories such as "assets", "components", "router" and so on -
(1) assets : Directory used to store project resources, eg: .css files, .js files, pictures, etc.
(2) components : Store customized 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 the entry js file. The Vue project creates a Vue instance here and specifies the mounting of el, router, component, and 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 */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})
(1) main.js is the entry js of the Vue project, Vue instances are created here.

(2) is specified in the Vue instance to mount el(id = app's div element).
(3) The router specified in the Vue instance is imported from the router directory, here is "./ The abbreviation of router/index.js", the import and export method is "ES6 new feature - modular programming"The third export methodexport default {};and the second import methodimport name from "__.js"; .

(4) Specify components to introduce components in the Vue instance. At this time, "ES6 new feature - object abbreviation a>” syntax.

(5) is specified in the Vue instancetemplate:<App/>, the App here comes from components:{ App in 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'    //@表示src目录

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',    //每个path对应一个路由表项。
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})
(1) main.js for routing, find the routing file"router/index.js", and at the same time gets the URL accessed in the browser, that is, http://localhost:8080/#/, and gets the routing path/(). Review - A / at the end of the URL indicates that a path is being accessed, and a URL without a / at the end indicates that a resource is being accessed

(2) Exports 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 (that is, multiple matching access paths a>).

(4) After matching path"/", found the "component: HelloWorld.vue" component< /span>.

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 view

(1) App.vue is the main single page of the Vue project.
(2) Introduced <router-view/> Display the routed view/page.

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>
    
  </body>
</html>
(1)index.html in the static directory is the project homepage.

(2) index.html defines a div element with id = app.
(3) When the created Vue instance is rendered, it will be mounted on the div a>, finally the user will see the rendered effect.

(4) Summary: The final access sequence of the Vue CLI scaffolding project is——
        ①< /span>Introduced in the App.vue component Finally, mount the rendered Vue instance to the div element with id=app defined in index.html. ⑦ to display the routed view/page--><router-view/>⑥ attribute, access the introduced App component--> in the Vue instance created in main.js componentsAccording to ⑤main.js (compile the component to generate the view, and View returned to main.js) -->④ attribute to find the corresponding component) --> in the matched routing item componentcomponents/HelloWorld.vue (based on ③router/index.js (match the corresponding URL according to the accessed URL route) -->
        ②main.js (entry js) -->

System.out.println("END------------------------------------------------------------");