[Vue.js] vue-cli builds SPA projects and implements routing and nested routing---detailed explanation

1. What is SPA?

SPA (Single Page Application) is a development model for Web applications . It uses AJAX technology to asynchronously load data from the server, dynamically update page content , and achieve switching between different views within the same page without refreshing the entire page.

1.1 Prerequisites for building SPA

The nodeJS environment has been set up. If it is not set up, you can see it----》》Click on the node.js environment to set up

Enter the following code in the terminal command to check whether the installation is successful.

node -v "---node.js version

npm -v <---npm.version

2. Vue-cli

2.1 Why Vue-cli

It is a command line tool officially provided by Vue.js, which can help you quickly build and manage Vue projects. Vue CLI provides some convenient development tools and functions, allowing developers to build Vue.js applications more efficiently

Simply put, vue-cli is the scaffolding of vue.js, used to automatically generate vue.js+webpack project templates

2.2 Install Vue-cli

In the terminal command window, enter

npm install -g vue-cli

npm install webpack -g has been executed in the previous article, and the webpack folder that will generate the image above has been built.

2.2 Implementation functions of Vue-cli

Create project:

You can use the Vue CLI to create a new Vue project, which will generate a basic project structure and some default configuration files for you.

Configuration management:

Vue CLI allows you to easily manage project configuration by providing a set of visual configuration interfaces. You can customize the project's build process, plug-ins, dependencies, etc. by modifying the configuration file or operating on the visual interface.

Development server:

Vue CLI provides a development server that automatically compiles and hot-updates your code during development. This way you can preview your application in real time without having to refresh the page manually.

Plug-in system:

Vue CLI supports plug-ins, and you can extend the functionality and features of your project by installing and configuring plug-ins. Vue CLI officially provides some commonly used plug-ins, such as Vuex, Vue Router, etc., and also supports custom plug-ins.

Build and deploy:

Vue CLI encapsulates Webpack, making it easy to build and package your project. It provides build commands that can optimize and compress your code and generate the final production version. You can deploy the built files to the server for users to access

3. Vue-cli builds SPA project

step 1:

In the SPA workspace you want to create, open the terminal command port and enter the following code

① vue init webpack xxx

   Note 1: xxx creates the name of the project for yourself

   Note 2: You must first install some necessary environments such as vue, vue-cli, webpack, node, etc.

② After waiting, enter the "question and answer" mode (9 questions) and follow the following operations

1.Project name: Project name, the default is the name xxx when entering, just press Enter

       2.Project description: Project description, just press Enter

       3.Author: Author, fill it in casually or press Enter directly

       4.Vue build : Multiple choice question, usually choose the first one

       4.1Runtime + Compiler: recommended for most users//Runtime + Compiler, officially recommended, just choose it (select with the up and down keys on the keyboard)

      4.2Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files

              - render functions are required elsewhere//Only at runtime, if there is already a recommendation, choose the first one

         5.Install vue-router: Whether you need vue-router, Y choose to use it , so that the generated project will have relevant routing configuration files

         6.Use ESLint to lint your code: Whether to use ESLint to limit your code errors and style. N is not necessary for newbies, but it is generally used in actual projects, so that multiple developers can achieve consistent syntax.

         7.Set up unit tests: Whether to install unit tests N

         8.Setup e2e tests with Nightwatch?: Whether to install e2e tests N

9.Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)

           > Yes, use NPM (keyboard up and down keys to select)

Legend after selection:

When you jump to point 3, you can see that the SPA has been created successfully. It can be seen in the workspace where you want to create the SPA.

Open HBuilder and import the SPA project

Step 2:

After running the above command, we need to change the current path to the SPA folder, then install the required modules and continue typing

   cd xxx    #Change the path to the spa1 folder

Note: xxx is the name of the project you created

   npm install                               #Install all npm modules required for the project (optional)

Step three:

   ## This step can be understood as: start tomcat and access the project through the browser

Continue to enter the following commands



   npm run dev starts the project

After waiting, a hppt....8080 path is displayed.

Select the right mouse button to copy and access it in the browser, as shown below

3. SPA project completes routing

3.1 Vue project structure description

build folder This folder is mainly for some configurations of webpack

     webpack.base.conf.js webpack basic configuration, development environment, and production environment all depend on it

     webpack.dev.conf.js webpack development environment configuration

     webpack.prod.conf.js webpack production environment configuration

     build.js production environment build script

     vue-loader.conf.js This file is the configuration file for processing .vue files

config file directory

     dev.env.js configures the development environment

     prod.env.js configures the production environment

     index.js This file configures the proxy server, for example: modifying the port number



   node_modules file: A folder that stores the npm installation package generated according to the package.json configuration during npm install.

src folder source code directory (the most commonly used folder in development)

     Assets shared styles and pictures

     components is where the business code is stored. It is divided into components for storage. A page is a component, and a page also contains many components.

router Set routing

App.vue vue file entry interface

     main.js corresponds to App.vue to create a vue instance, and the entry file corresponds to the entry configuration in webpack.base.config.js

   Static folder: The stored files will not be processed by webpack and can be referenced directly. For example, if you want to reference a swf file, you can configure it in webpack.

                                     For loaders that process files with swf suffix names, you can also directly place the swf file in this folder for reference.



   package.json This file has two parts that are useful: setting commands in scripts and dependencies and devDependencies, which correspond to globally downloaded and locally downloaded dependency packages respectively.

3.2 What is *.vue file

  The *.vue file is a custom file type that uses HTML-like syntax to describe a Vue component.

   Each .vue file contains three types of top-level language blocks <template>, <script> and <style>.

   These three parts represent html, js, and css respectively.

3.3 Implement routing case (7 steps)

1. Introducing js dependencies: It has been completed in main.js, we do not need to introduce it ourselves

2. Define components: the presentation form uses a .vue file to display the component content defined in the template tag. Specify the name of the component through export defalut

One.vue page code:
<template>
	<div>
		<span style="color: red;">我是第一第一第一！</span>
	</div>
</template>

<script>
export default {
  name: 'One',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style>
</style>
Tow.vue code:
<template>
	<div><span style="color: aqua;">我是第二第二第二！</span></div>
</template>

<script>
export default {
  name: 'Tow',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style>
</style>
3. Define the corresponding relationship between routing and components: defined in the router/index.js file
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import One from '@/components/One'
import Tow from '@/components/Tow'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'One',
      component: One
    },{
		path: '/One',
		name: 'One',
		component: One
	},{
		path: '/Tow',
		name: 'Tow',
		component: Tow
	}
  ]
})
4. Obtain the routing object, this step is also completed in main.js

5. Mount the instance, which is also completed in 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/>'
})
6. Define the anchor point: App.vue uses router-view

7. Trigger event: App.vue uses router-link to
<template>
  <div id="app">
    
	<router-link to="/One">首页</router-link>
	<router-link to="/Tow">关于</router-link>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</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>

3. SPA completes nested routing

①Define components

Create two subcomponents:

Parent component:

<template>
	<div>
		我是首页<br />
		<router-link to="/OneME">关于站长</router-link>
		<router-link to="/OneWebsite">关于本站</router-link>
	</div>
</template>

<script>
export default {
  name: 'One',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style>
</style>

two subcomponents

OneME:

<template>
	<div>
		我是首页<br />
		<router-link to="/OneME">关于站长</router-link>
		<router-link to="/OneWebsite">关于本站</router-link>
	</div>
</template>

<script>
export default {
  name: 'One',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style>
</style>

OneWebsite

<template>
	<div>
		这是站长的简介
	</div>
</template>

<script>
export default {
  name: 'OneME',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style>
</style>

②Define routing and configure routing paths

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import One from '@/components/One'
import OneME from '@/components/OneME'
import OneWebsite from '@/components/OneWebsite'
import Tow from '@/components/Tow'


Vue.use(Router)

export default new Router({
	routes: [{
		path: '/',
		name: 'One',
		component: One
	}, {
		path: '/One',
		name: 'One',
		component: One,
		children: [{
			path: '/OneME',
			name: 'OneME',
			component: OneME
		}, {
			path: '/OneWebsite',
			name: 'OneWebsite',
			component: OneWebsite
		}]
	}, {
		path: '/Tow',
		name: 'Tow',
		component: Tow,
	}]
})

③Define the button that triggers routing

<template>
  <div id="app">
    <!-- <img src="./assets/logo.png"> -->
	<router-link to="/One">首页，</router-link>
	<router-link to="/Tow">关于</router-link>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</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>

operation result