To use Vue scaffolding, you need to understand what Vue scaffolding is. In a nutshell, Vue scaffolding is a framework for quickly generating Vue project infrastructure and making it easy for programmers to create Vue projects.

1. Create scaffolding projects

1.1 Installation of Vue scaffolding

Install Vue yarn global@vue-cli using the console. After installing Vue -v, you can query the installed version and then create a working folder using Vue create test. (You can also use Vue create test. When the terminal completes the execution of vue Create test command, there will be an option, we choose according to the following method

1. Select Manaliy Select Features to manually select the modules to load

2. Select Choose Vue Version,Babel, and Router, and do not select Linter

3 Select 2X

4. Select historical route N

5. Select In Dedicated Config Files

6. Select Y

7. Enter the CD file name as prompted to switch to the current directory and run NPM run serve to start the server

1.2 Overview of the Test folder

  • Node_modules: Stores third-party packages. There are a lot of packages
  • 2. Public: puts the page file that the browser runs
  • 3. SRC: main workspace file, where assets folder stores static files such as pictures and components directory. Router is the file used to render the route to the page, views mainly store the route page file, app. vue is the root component entrance of vue, main is the webpack entrance.
  • 4. Other files in the test folder: The files directly in the test root directory that are not in the test folder are configuration files. Do not touch them

1.3 Clean up the default built-in page in scaffolding

After the scaffolding is installed we need to clean up the welcome page that comes with Vue itself so we can start writing our own code. Among them:

  • 1. The public icon file with an ICO suffix can be deleted
  • 2. In SRC, you can delete pictures in Assets folder, HelloWorld file in Component folder, and all files in Views folder.
  • 3. Go to the index.js file in the Router folder to clear the preset routing rules and useless import codes

  • 4. Clear the default templates and styles in the app. vue file

In this case, check the browser running on port 8000. The browser page is blank. If no error is reported, the page is cleared and the routing project can be edited.

2. Pay attention to scaffold documents

After the scaffolding is built, observe the relationship between index.js, app. vue and main.js files. Look at the main.js file, which is the webpack file, so you definitely want to import all the data,

import Vue from 'vue'

import App from './App.vue'

import router from './router'

new Vue({ router, render: h => h(App)}).$mount('#app')

So the first line introduces the vue component, the second line introduces app. vue, and the third line introduces the router (the path is to the ‘/router’ folder, not to index.js, so the writer will automatically look for the index.js file in the Router folder).

Line 4 creates an instance of vue and introduces App, so main and App are associated

Now look at the code for the index.js file:

import Vue from 'vue'

import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [ ]const

router = new VueRouter({ routes})

export default router

In the Vue instance of main, the router is rendered in the # APP area of the APP file, which implements the correlation between the three files. In the Vue instance of main, the router is rendered in the # APP area.