Vue.js tutorial is easier to understand than the official documentation! Package you learn!

Welcome toTencent Cloud + community, get more Tencent mass technology practice dry goods oh ~

This article was published by CAI Shuxiong in cloud + community column

CAI Shuxiong is a senior UI engineer of QQ Space in Tencent User Experience Design Department. Chief engineer of Zhitu Image optimization system, participated in the translation of the book “The Door to All The Wonderful”. Currently focus on front-end picture optimization and new technology research.

In 2016, and throughout 2017, if you were to ask what’s hot in front end technology frameworks, it’s the big three: React, Angular, and Vue. That’s right, jQuery, seaJs, gulp, etc. are all out of the spotlight. Show up at the interview without any new technology, as if you are not a front end. Of course, hope everyone is holding the heart of studious to begin a study of art, anyway, beg you, please continue to see it ~

This series of articles will help you learn Vue step by step through many clear examples and a practical project, component library. After all, this article also has the following “Graduation” and “graduation”.

What is a Vue. Js

If you want to know it or not, Vue is a front-end framework like jQuery, and its core idea is data-driven. JQuery is structure-driven. MSG =” I changed “**, and MSG will be synchronized to a structure. View management is abstract to manage data, not dom structure. It’s okay if you don’t understand. Take your time.

Another thing we must know is that Vue is written by Chinese people, and the technical documents are also in Chinese. Thinking of this, I have the motivation to learn.

Set up the environment

Our learning plan starts with learning to build the environment required by Vue. Node and NPM environments are not necessary. Front-end process is very popular now, and basically new technologies will be developed on the basis of this process. I assume you already have the latest Node and NPM on your machine, so we just need to execute the following command:

$ npm install -g vue-cli
Copy the code

After the build, go to a random directory we have prepared, such as the demo directory, and initialize the directory:

$ vue init webpack myProject
Copy the code

The webpack parameter refers to myProject, which will automatically package your code during the development and completion stages, such as unifying JS files into one file, consolidating CSS files into one compressed file, etc. If you don’t know webpack, it’s better to know it first. Of course, it doesn’t affect us to go down.

The init process will ask you to define some description of the project, version and so on, you can leave it alone, just type y and make sure to skip, and then the following screen will appear, the red box will tell you what to do next, just keep typing code as it tells you.

cd myProject
npm install
npm run dev
Copy the code

NPM install is a dependency required by the installation of the project.

NPM run dev is starting to execute our project, once this command is executed, after a while, the browser should automatically open a TAB http://localhost:8080/#/ link for you. This link is the home page of our locally developed project, if not, there is an error. Please go to the comment section to reply…

(PS: Executing NPM run build after development will compile our source code to generate the final release code in the dist directory)

Take a look at what files Vue generates for us. What files do we need to pay attention to

Package. json holds some dependency information, config holds some initialization of the project, build holds some initialization of webpack, and index.html is our home page. Besides these, the most critical code is in the SRC directory. Index is the default home page in many server languages, such as index.htm, index.php, etc. Open webpack.base.conf.js in the build directory and you’ll see code like this

Our entry js file is in the SRC directory main.js.

Follow the code

The core architecture of Vue, according to official explanation and personal understanding, mainly lies in the two modules of components and routing. Once you understand the ideological content of these two modules, the rest of API use is just a matter of minutes. So in my paper series, around components and routing to teach everyone to develop a front-end component library, the process is also my personal learning try their projects, personal feel to do step by step down, the understanding of the Vue can be justified, read more than 10 times book document, that is another story, let’s take a look at the most basic default code generated by the Vue!!!!

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>'.components: { App }
})
Copy the code

First the first sentence

import Vue from 'vue'
Copy the code

Vue is jquery-min.js, and then vue is $; Then we introduced./App files, which are app.vue files in the same directory as main.js; Vue is the file type of Vue. Webpack packs JS and CSS files. In the same way, after configuring the Vue plug-in in WebPack (the default configuration of the project), Webpack packs.vue files, much like require in nodeJs.

Going back to the file app. vue, which is a view (or component and page), imagine that our index.html has nothing but a view, which is like a container, and we put various building blocks (other components or other pages) into that container. We’ll talk about app.vue later;

import router from './router'
Copy the code

This code introduces a routing configuration, again.

Next, we instantiate new Vue, which is the same as init when we write js, and declare el: ‘#app’ means to put all views in a DOM element with an ID of app. Components indicates the imported file, the app. vue file described above, whose contents will be written into #app with tags like < app />. In general, This code simply puts app.vue in # App and refers to our # App as
.

import Vue from 'vue'
import App from './App'/* Import the App component */
import router from './router'/* Configure imported routes */

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app'./* The final effect will be to replace the div element */ in the page with the id app
  router,/* Use routing */
  template: '<App/>'./* Tell the page that the component is wrapped with such a tag, and use it */
  components: { App }/* Indicates that the current page wants to use the App component */
})
Copy the code

Single page component

Now, open our App. Vue file, in vue website calling it components, single page mean structure, style, logic code is written in the same file, when we introduce this file is equivalent to the introduction of the corresponding structure, style, and JS code, front-end componentization isn’t that what we do want to see? Previously asp, PHP also has such a file idea.

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
Copy the code

The node side can recognize the. Vue file because webpack pulls out the HTML, JS, and CSS from the. Vue file at compile time.

Single page components will be fully reflected in the actual combat behind, here is not to do too much description;

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view></router-view>
  </div>
</template>
Copy the code

Looking back at our browser page, the image is there, but where is the code for the text and links below? This is where routing comes in.

routing

Here is a general idea of routing: traditional PHP routing is returned to the front-end by the server according to certain URL rules, such as the following address

Isux.tencent.com/about and isux.tencent.com/recruit

Note that there are only about and Recruit addresses. These addresses without XXx. HTML are actually specified by a layer of encapsulation on the server side to certain files. In the same way, the front end can implement simple routing with anchor points (no page refresh required)

Zhitu. Isux. Us/index. PHP/p…

Where # MAC is our anchor route, note the address we opened in the browser at the beginning:

http://localhost:8080/# /,
Copy the code

Routing allows us to access pages such as http://localhost:8080/#/about/ or http://localhost:8080/#/recruit without refreshing them. Now go back to the app.vue file we just opened and look at this line of code

<router-view></router-view>
Copy the code

This code puts a routing view container in the page, which puts the about content in when we visit http://localhost:8080/#/about/, The contents of Recruit will be placed when you visit http://localhost:8080/#/recruit

In this way, whether we open http://localhost:8080/#/about/ or http://localhost:8080/#/recruit, the images in the page are the public part and become only the contents of the router, so who controls the contents of the router?

SRC /main.js has a line of code that introduces the router.

import router from './router'
Copy the code

Now let’s open the js file in the Router directory.

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import About from '@/components/about'
import Recruit from '@/components/recruit'

Vue.use(Router)

export default new Router({
  routes: [{path: '/'.name: 'Hello'.component: Hello
},
    {
      path: '/about'.name: 'about'.component: About
},
    {
      path: '/recruit'.name: 'recruit'.component: Recruit
}
  ]
})
Copy the code

Vue. Use (router) is explicitly declared to be used. Notice that Hello, About, and so on are pages (or components), register the router, and start configuring the route.

The configuration of the route should be straightforward, assign different pages (or components) to different paths, and the name parameter is not important for identification purposes. Vue: Hello. Vue: Components directory: Hello. Vue: Components directory: Hello.

From here, you can configure the route. I personally like to put the pages in the Pages directory and the components in the Components directory. Some people may ask how to configure the route if you want to visit http://localhost:8080/#/about/me. Simply add one more child routing configuration to the route as follows:

{
      path: '/blog'.name: 'blog'.component: Blog,
      children: [{path: '/'.component: page1
        },
        {
          path: 'info'.component: page2
        }
      ]
    }
Copy the code

When you visit /blog, you will visit the blog page, which will put a router inside the blog, and then visit http://localhost:8080/#/blog/, you will place the contents of page1 in the routing container, The contents of page2 are placed in the routing container when accessing http://localhost:8080/#/blog/info

//blog.vue
<template>
    <div>Common parts</div>
    <router-view></router-view>
</template>
Copy the code

summary

Throughout the process we just studied, from initialization to page presentation, the page architecture flow of Vue looks something like this

To sum up what we’ve talked about:

1. Set up the environment
2. Code logic
3. Single-page components (briefly mentioned)
4. routing
5. Zi lu by

The above process is a time when we first started contact Vue of simple introduction, had previously said learning Vue can master the basic concept of component and routing, after follow-up for us to understand his work mechanism is a big help, in this chapter we simply introduced the single page components, in the next article, we will through a practical project, To fully understand the importance of componentization in Vue construction.

It’s getting late and I should probably go back to bed to digest it. I’ll see you in the next article

All relevant codes and official document addresses are attached at the end of this article

cn.vuejs.org/v2/guide/

Attachment: the SRC. Zip

Question and answer

How does vue.js work with plug-ins?

reading

Vue. Js practical summary

Deep contrast between Angular and vue.js

Vue. Js for basic beginners

Machine learning in action! Quick introduction to online advertising business and CTR knowledge

This article has been authorized by the author to Tencent Cloud + community, more original text pleaseClick on the

Search concern public number “cloud plus community”, the first time to obtain technical dry goods, after concern reply 1024 send you a technical course gift package!

Massive technical practice experience, all in the cloud plus community!