Vue_06_ Use Vue cli to build SPA project

1, Construction of SPA project through Vue cli scaffolding

1. Install Vue cli

npm install -g vue-cli
npm install -g webpack

  After successful installation, the following files will appear:
     D:\initPath
          node-v10.15.3-win-x64
            node_global
              vue
              vue.cmd 
              vue-init
              vue-init.cmd
              vue-list
              vue-list.cmd

 

Step 1: use scaffold to create project skeleton

This step can be understood as: create a maven web project using eclipse

Enter cmd in the project storage location to enter the black window and enter vue init webpack spa for question and answer mode

Input: vue init webpack spa

: "one question and one answer" mode
      1.Project name: project name; the default is the name spa1 entered; enter directly  
      2.Project description: project description. Press enter directly
      3.Author: author, just fill in or enter y
      4.Vue build: multiple choice questions, usually the first one
      4.1 runtime + compiler: recommended for most users / / run and compile, which is officially recommended
      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 / / select the first one when there are already recommendations during runtime only
Ll Vue Router: select whether to use Vue router, Y, 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 styles. N   Novices don't need it, but they are generally used in actual projects, so that multi person development can achieve consistent syntax
      7.Set up unit tests: whether to install unit test N
      8.Setup e2e tests with Nightwatch?: Is E2E testing installed   N
      9.Should we run npm install for you after the project has been created? (recommended) (Use arrow keys)
        > Yes, use NPM                    
          Yes, use Yarn
          No, I will handle that myself     // Multiple choice question: select the first item "Yes, use NPM" and whether to use npm install to install dependencies
 

Select all and press enter to generate the project. The following content indicates that the project is created
 # Project initialization finished!
 # ======================== 
 
  If you really won't choose it, press enter and select "default" or "N" not to install

Step 2: after running the above command, we need to change the current path to the SPA folder, and then install the required modules

This step can be understood as: after maven's web project is successfully created, modify the pom file and add dependencies

cd spa1                                  # Change the path to the Spa1 folder
npm install                              # Install all NPM modules required for the project

Step 3: start and access the project

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

cd spa npm run dev

After execution in sequence, a web address will pop up: http://localhost:8080

2, Component development process based on SPA project

Our development mode is a separate front-end and back-end development mode, so we need a back-end server and a front-end server. Later, we need to open a front-end server and a Tomcat. If the port is not changed, it will conflict with the port, so we need to modify it. Modify the index.js in config in the project:

     config --> index.js  
     dev: {
       // Paths
       assetsSubDirectory: 'static',
       assetsPublicPath: '/',
       proxyTable: {},
       host: 'localhost', 
        port: 8081,       // Modify the port number here
       autoOpenBrowser: false,
       errorOverlay: true,
       notifyOnErrors: true,
     },

 

Everything that ends with vue is a component

As shown in the figure above, what you see is not the index.html page. Index.html is an entry. You don't need to write any code in the future. What you see is the component App.vue. The real entry is mian.js, which binds App.vue to index.html

Therefore, the whole large page seen on the page is index.html, which packages an App.vue component, as shown in the figure

The picture is in App.vue, and the anchor point is defined below the picture (as mentioned in the previous blog about anchor Vue)

 

 

 

 

Step 1: kill the pictures in the App

Step 2: create a new file (Home) ending with Vue, which can be written with reference to HelloWorld.vue

Home.vue:

<template>
  <div>
    home page
  </div>
</template>

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

<style>
</style>

Enter index.js to modify the access path and change the original HelloWorld to Home:

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/Home'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    }
  ]
})

 

Total code:

App.vue:

<template>
  <div id="app">
    <router-link to="/Home">home page</router-link>
    <router-link to="/Abort">about</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>

Abort.vue:

<template>
  <div>
    Display webmaster and website related information
  </div>
</template>

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

<style>
</style>

 Home.vue:

<template>
  <div>
    Show all blog content here
  </div>
</template>

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

<style>
</style>

index.js: configure jump path:

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/Home'
import Abort from '@/components/Abort'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/Home',
      name: 'Home',
      component: Home
    },
    {
      path: '/Abort',
      name: 'Abort',
      component: Abort
    }
  ]
})

 

3, Nested routing

AbortMe.vue:

<template>
  <div>
    Show webmaster's work experience and qualifications
  </div>
</template>

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

<style>
</style>

AbortWebSite.vue:

<template>
  <div>
    Show the significance, development history and vision of website construction
  </div>
</template>

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

<style>
</style>

Abort.vue:

<template>
  <div>
    <router-link to="/AbortMe">About webmaster</router-link>
    <router-link to="/AbortWebSite">About this site</router-link>
    <router-view></router-view>
  </div>
</template>

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

<style>
</style>

index.js configuration:

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/Home'
import Abort from '@/components/Abort'
import AbortMe from '@/components/AbortMe'
import AbortWebSite from '@/components/AbortWebSite'

Vue.use(Router)

export default new Router({
      routes: [{
          path: '/Home',
          name: 'Home',
          component: Home
        },
        {
          path: '/Abort',
          name: 'Abort',
          component: Abort,
          /* nesting*/
          children: [{
              path: '/AbortWebSite',
              name: 'AbortWebSite',
              component: AbortWebSite
            },{
              path: '/AbortMe',
              name: 'AbortMe',
              component: AbortMe,

            }
            ]
          }
        ]
      })

 

Thanks for watching!  

Tags: Javascript Vue.js Webpack

Posted on Thu, 04 Nov 2021 22:50:07 -0400 by Collin