Vue-cli 3.0 Scaffolding, From Getting Started to Giving up (II)

I’m too hard! I can’t write anymore.

Run the project

Ps: huilderx and vscode both have their own quick start, saving yourself manual input.

Start command: NPM run serve

localhost:8080

Start the process

(The following is the thinking of each person, please point out the wrong)

After compiling, we’ll first go to the index.html page, where we’ll load our configuration, such as link, meta, etc., and then find the div with id= “app” in the body.

Here, you’ll notice that it jumps to the file app. vue. But when you don’t see the index.html loading process (it flashes by), you don’t see the index.html file.

Ok, look at app.vue again,

router-link
router-view
The router - the link
to

Take a look at the router.js file ↓ about router introduction website router.vuejs.org/zh/

All of our own.vue files need to be configured here, otherwise the compiler won’t find the page you created. Our pages are redirected to the router. Using the first path configured in the previous figure: routes.js,

{
      path: '/',
      name: 'home',
      component: Home
    },
Copy the code

You can see its path: ‘/’, which represents the first page loaded in app.vue. ‘/’ in this case represents the home page. Import Home from ‘./views/ home. vue’ at the top of the page, the path is named Home, so the following component can just write Home. You can also import as Component: () => import(‘./views/ home.vue ‘).

Let’s change the home page to see if we can create a.vue file named test.vue

Add route to router.js, delete home, change path to ‘/’ :

Then run:

conclusion

To summarize the process, start with our NPM run serve, open port localhost:8080, and first load index.html. Then go to app.vue and look for the routing component, which will activate the router.js configuration, select which file to open first, find our path: ‘/’ page, and the browser will display it. To complete.

To write the last words, learn…. Oh, how ridiculous.