The project structure

> node_modules
> public
> src
    > assets
    > components
    > router
    > store
    App.vue
    main.js
.browserslistrc
.gitgnore
babel.config.js
pacjage-lock.json
package.json
README.md

Copy the code

Node_modules stores dependencies for installation. The Vue project downloaded from Github does not have node_modules. You need to run NPM install to install dependencies (according to package.json configuration) to run properly

Public holds static files (resources) that can be accessed anywhere in the project

SRC stores the source code. Assets are also used to store resources; Components store components; The router routing; Store data state management; Views stores view components (components that can be seen in the browser); App.vue entry component; Main.js determines where the program starts execution

Package. json package management, specifying the name of the project, the command to run it, and the dependencies required. The first item of “scripts” is “serve”, so the command to run in the development environment is NPM run serve

  "scripts": {
    "serve": "vue-cli-service serve"."build": "vue-cli-service build"
  },
Copy the code

Run the process

Public /index.html is our entry point, and in the future all content of the project will be rendered to the DOM element 

<! DOCTYPEhtml>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <! -- built files will be auto injected -->
  </body>
</html>
Copy the code

Render: h =>h(app) render: h =>h(app) render: h =>h(app) In this way, app.vue will be mounted to the DOM element with the ID App and then take full control of it. Public /index.html is our entry point, but everything else happens inside the Vue instance.

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

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

Vue file composition

The Vue file consists of template template, script script, and style. The script and style can be omitted

The template contains many tags.

Home
 is a routing tag. The component corresponding to/path can be found in SRC /router/index.js