vue scaffolding (vue-cli) build

Open the directory of the project to be built, open the terminal, and install:

npm install -g @vue/cli

## 安装成功后，检查
vue --version
vue -V
# Vue和VueCLI是两回事

vue create 项目名称

Default options:

Select the preset function (select according to your own project needs) and press the space to select

• Babel=>Conversion tool, a conversion tool that converts ES6 to ES5, some browsers do not support ES6 syntax
• router=>route manager;
• VueX=>a warehouse that stores status information
• CSS pre-processor => css pre-processor, to improve the efficiency of writing css, LESS, SASS are often used
• Eslint=>Code verification tool (check whether the code conforms to the code specification and the unified code style, check whether the code has syntax errors);

ESlint is used to standardize the coding of the project, forcing developers to pay attention to the code specification. Regarding ESlint's error report, there is an error reference, which can be viewed at the following address: https://cn.eslint.org/docs/rules/.
It is not recommended to use ESlint in the learning phase, so a project without eslint will be created to learn.

• progressive web app support progressive web app support
• Unit Testing: Unit Testing
• E2E Testing: End-to-end testing
  

Choose version 2

Is the history mode used to create routes? Choose y without #, choose n with # (hash value in url)
The difference between hash mode and history mode: hash has a # and history does not have #;
hash and history are the characteristics of the browser itself;
recommended articles: https://blog.csdn.net/cplvfx/article/details/107294535

• In dedicated config files: stored separately in their respective configuration files
• In package.json: Save it in the package.json file. Do
  
  you want to record this configuration for the next use?
  
  
  Visit localhost:8080
  
  main file:
  main.js: project/program entry file (JavaScript code in this file will be executed)
  App.vue: root component (root of everything)
  components: custom functional components
  assets: static resource directory ( Pictures, videos, audios, etc. are static resources)
  views:
  
  A vue page that stores view components usually consists of three parts: template (template), js (script), style (style), template template can only contain one parent node (top level There can only be one div, no sibling nodes). The style affects the whole world by default
  through the style <style></style>in the style tag . If you need to define the scope, it will only work under this component <style scoped></style>. To import external css files, you need to install the css-loader dependency package for the project. , Open cmd, enter the project directory,

		npm install css-loader

After the installation is complete, you can import the required css files under the style tag, for example:

<style>
    import './assets/css/index.css'
</style>

In the root component App.vue: <router-view/>understand it as a slot. When the route is redirected, the page under the route is rendered and displayed in this slot, and the content written above and below the latter is above and below the rendered component display.

The modification is more intuitive to show:

Figure 1:

Figure 2: Pay attention to the address


Reason: It is understood that the id of APP.vue in index.html is #app, and finally a page that meets the w3c standard is formed

index.js in the router directory:

import Home from '../views/Home.vue'

  {
    
    
    path: '/',
    name: 'Home',
    component: Home
  },
//会直接加载
//在文件main.js引入router的时候，index.js中的import就执行了   进入网站一般都会触发 '/',所以写成直接加载

  {
    
    
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    //路由懒加载
    //类似于按需导入，触发/about的时候，才去import
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }