Vue – CLI know

Liverpoolfc.tv: github.com/vuejs/vue-c…

  • Vue CLI is a complete system for rapid development based on Vue. Js. We call it a scaffold.
  • In development, there are many files that need to be packaged (HTML, CSS, JS, images,…).
  • Vue provides scaffolding for quick construction of Web project templates
  • Global install command (used in many future projects) :npm install -g vue-cli

Vue – CLI Quick Start (Installation)

2.1 Creating a Project (Module)

2.2 Entering Commands

  • Initialization command:vue init webpack

  • Successful interface

  • Type the commandnpm run dev, and the following results are displayed in the browser:

Three. Scaffolding structure analysis

3.1 Finding an Entrance (Process)

  • The flow chart

  • main.jsCode parsing
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
// Here is the modularized way to introduce vue(we used to use 
      
        mode introduction)
      
import Vue from 'vue'
// Introduce the App module of the object (if you click on it, you can see it is a home page image + route exit)
import App from './App'
// Import a routing module (this is important, all components are placed in the routing)
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app'.// Mount the corresponding element (note that our default path is index.html)
  router, // Router :router (router:router)
  components: { App }, // Specify the component
  template: '<App/>'  // This is equivalent to putting the App template component into the mounted element
})

Copy the code

3.2 Scaffolding process analysis

3.3 Simple use of scaffolding

After analysis, scaffolding is a hassle, but if we look at it from the perspective of using characters, it’s pretty simple. Because after the home page is done, we only need to add templates and set up routes. Let me give you an example.

3.3.1 Prepare components

  • Create a new VUE component in the Components folder

  • The code is as follows:
<template>
  <div class="hello">
    <h1>{{MSG}}</h1>
  </div>
</template>

<script>
export default {
  name: 'ZhaoYi',
  data () {
    return {
      msg: 'I'm the best in the world... '}}}</script>
Copy the code

3.3.1 Adding routing Files to Components

  • The code is as follows:
import Vue from 'vue'
// Import vue routing components (equivalent to our previous 
      
       )
      
import Router from 'vue-router'
// Import the helloWorld component
import HelloWorld from '@/components/HelloWorld'
import ZhaoYi from '@/components/ZhaoYi'

Vue.use(Router)

export default new Router({
  // This is where all routes are placed
  routes: [{path: '/'.// Base path
      name: 'HelloWorld'.// Component name
      component: HelloWorld // Corresponding helloWorld component
    },
    {
      path: '/zhaoyi'.// Base path
      name: 'ZhaoYi'.// Component name
      component: ZhaoYi // The corresponding ZhaoYi component}]})Copy the code
  • Enter the pathhttp://localhost:8080/#/zhaoyi, the access effect is as follows