Vue lifted his head and let me see you (initializing and learning Vue project)

Time:2022-5-8

Vue lifted his head and let me see you (initializing and learning Vue project)

Blog description

The information involved in this article comes from the Internet and personal summary, which means the summary of personal learning and experience. If there is any infringement, please contact me to delete it. Thank you!

Introduction to Vue

I believe I’ve heard Vue. After all, there’s a saying that the front end will Vue. Well, this sentence needs to be discussed. It’s not discussed here.

Official introduction

address

Vue (pronunciation / vju) ː/, be similar toview)Is a set of tools for building user interfacesProgressive framework。 Unlike other large frameworks, Vue is designed to be applied layer by layer from bottom to top. Vue’s core library only focuses on view layers, which is not only easy to start, but also easy to integrate with third-party libraries or existing projects. On the other hand, when withModern tool chainAnd variousSupport class libraryWhen used in combination, Vue can also provide drivers for complex single page applications.

introduce

A front-end knocking brick that is convenient for operation, learning and work.

Characteristics of Vue

1. Small volume

2. Higher execution efficiency (virtual DOM)

3. Two way data binding (pay more attention to business operations)

4. Component development

5. Progressive (partial Vue code can be embedded)

install

//Install Vue
vue -V 

//The version description appears installed
@vue/cli 4.5.8

//Install Vue
npm install vue

Page introduction

You can introduce the JS usage of Vue in HTML

<script></script>

vue-cli

Vue provides aOfficial cli, quickly build complex scaffolds for single page application (SPA). It provides out of the box build settings for modern front-end workflows. It takes only a few minutes to run, with hot reloading, lint verification on save, and builds available in the production environment. More details can be found atDocumentation for Vue cli

install
//Global installation Vue cli
npm install --global vue-cli
Create a Vue project

Enter your own working directory

vue init webpack projectNmae

Initialize the configuration of the project

Vue lifted his head and let me see you (initializing and learning Vue project)

Select and configure the corresponding parameters. You can choose to use the above configuration when you start learning Vue items

function

Enter the project directory

NPM install // install project dependencies
NPM run dev // run

Address of the open run

Vue lifted his head and let me see you (initializing and learning Vue project)

Vue’s project directory

A figure explains the directory generated by Vue cli. I added pages myself. Pages are put into the page and components are put into some public components.

Vue lifted his head and let me see you (initializing and learning Vue project)

In fact, the build and config directories need to be explained in detail, but after looking at the title, I’d better choose the SRC directory as the stick to lift the head. Mainly look at router. Do you have a feeling that the word router often appears, which is routing.

Vue routing

Routing allows us to set different parameters through our server and the parameters configured in the router, that is, the path, so that multiple pages have the same address and can jump to each other repeatedly.

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import LongTouch from '@/pages/LongTouch/index'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/long-touch',
      name: 'LongTouch',
      component: LongTouch
    }
  ]
})
Sub route

Of course, the configuration of this route can also set sub routes. When setting sub routes, you need to pay attention to the splicing of paths.

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import ImgPage from '@/components/ImgPage'
import LongTouch from '@/pages/LongTouch/index'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      children:[
        {
          path: '/img',
              name: 'img',
              component: ImgPage,
        }
      ]
    },
    {
      path: '/long-touch',
      name: 'LongTouch',
      component: LongTouch
    }
  ]
})
Route jump

In daily business, there are inevitable hard requirements for page Jump. Jump can be achieved by using HTML and JS

Using router link mode (HTML)

<router-link :to="{ name: 'user', params: { userId: 1 }}">User</router-link>

Use router push() (js)

router.push({ name: 'user', params: { userId: 1 }})

reflection

What can I do here? Basically understand Vue, install and initialize a Vue cli project, understand its basic directory, run it, understand the route, jump the page and do some jump interaction.

thank

Universal network

And hard-working themselves,Personal blogGitHub testGitHub

Official account – guizimo, applet – Xiaogui blog