Vue lift up your head, let me see you (initialization and learning Vue project)

The blog instructions

The information involved in the article comes from the Internet collation and personal summary, meaning is the summary of personal learning and experience, if there is any infringement, please contact me to delete, thank you!

Vue profile

I believe you have heard of VUE, after all, there is a saying that the front end will vUE, well, this sentence is still to be discussed, not here.

The official introduction

address

Vue (pronounced vju/curliest, similar to View) is a set of progressive frameworks for building user interfaces. Unlike other large frameworks, Vue is designed to be applied layer by layer from the bottom up. Vue’s core library focuses only on the view layer, making it easy to get started and integrate with third-party libraries or existing projects. On the other hand, when combined with modern toolchains and various supporting libraries, Vue is perfectly capable of providing drivers for complex, single-page applications.

introduce

A convenient operation, convenient learning, convenient work of the front stepping stone.

The characteristics of the Vue

1, small volume

2. Higher execution efficiency (virtual DOM)

3. Bidirectional data binding (more focused on business operations)

4. Componentized development

5, progressive (can embed part of the VUE code)

The installation

@vue/ CLI 4.5.8 // Install vue NPM install vueCopy the code

The page introduce

Vue js can be used in HTML

< script SRC = "https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js" > < / script >Copy the code

vue-cli

Vue provides an official CLI that quickly scaffolding complex single-page applications (spAs). It provides an out-of-the-box build setup for modern front-end workflows. It only takes a few minutes to get up and running with hot overloads, save-time Lint validation, and a build available for production. Refer to the Vue CLI documentation for more details.

The installation

NPM install --global vue-cliCopy the code

Create a vUE project

Go to your working directory

vue init webpack projectNmae
Copy the code

Initialize the configuration of the project

Select and configure the corresponding parameters, you can choose to use the above configuration when learning vUE project

run

Go to the project directory

NPM install // The installation project relies on NPM run dev // to runCopy the code

Open the running address

Vue’s project directory

One diagram explains the directory generated by vuE-CLI, pages is added by myself, pages is put into the page, Component is put into some common components.

The build and Config directories need a bit of explanation, but after reading the title, choose SRC as the top lift. Router is a word that comes up a lot. It’s a route.

Vue routing

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

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
    }
  ]
})

Copy the code

Zi lu by

Of course, you can also set child routes for this route. When setting child routes, pay attention to path stitching.

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
    }
  ]
})
Copy the code

Routing hop

In daily business, it is inevitable to jump to a page. Jump can be done by using HTML and JS

Using router-link mode (HTML)

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

Using router.push() (js)

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

thinking

What can we do here? Basic understanding of VUE, installation initialization of a VUE-CLI project, understand its basic directory, can run up, understand the routing, can do the page jump, can do some jump interaction.

Thank you

Universal network

As well as hard-working self, personal blog, GitHub test, GitHub

Public number – return child mo, small procedure – small return blog

Vue lift up your head, let me see you (initialization and learning Vue project)