Use Vue2+ Webpack + Node to develop an H5 app

This is an H5 APP called [one. One], which can be found by searching for “one” on Baidu.

The complete code is put on Github, stamp here, and ask for star incidentally. For friends with mobile phones around, you can scan the following TWO-DIMENSIONAL code to experience the effect of online

Qr code

For inconvenient use of mobile phone children’s shoes, please stamp online effect; (Note: Please lower it to mobile mode preview in Chrome)

(Update 7.22) It was meant to be a little demo for practice, but it was a little rough, but I didn’t expect to star and fork, and some people asked questions about deploying to the server and packaging as an APP, so I decided to continue to detail the project and also write a separate tutorial on deploying to the server (no, not a tutorial, I can only say it’s a process), for those who want to package as an app to play with, I will also provide an online interface soon to ensure that the packaged app can get normal data, so if you need or want to continue to pay attention to this demo, please fork or star, let’s learn and progress together. Special disclaimer: This is just an exercise, genuine [ONE.] app please go towebsiteDownload, this demo climb to all the data, just for practice, no illegal use.

1. Build the project structure

Install webpack: NPM install webpack -g;
Install vue-cli build tool: NPM install vue-cli -g;
Create a vUE project: vue init webpack One; // Where one is the project name
Go to the file directory: CD one;
Installation dependencies: NPM install;
Start project: NPM run dev;
Create a server folder to store back-end code. Then enter the SCR directory and create a Pages folder.

Second, the development of

Write common header, menu, and loading components: Create header.vue, menu.vue, and load. vue files in the Components folder. Under the template tag, there must be a root element enclosing each tag, otherwise an error will be reported, as the vue template dictates] :
```
<template> <div class="header"> <! </div> </template> <script> export default {name: Function (){return {data:"this is header"}}} </script> <style>Copy the code
```
There is no data interaction between the two components, just static style, just normal development.

Develop vue view: create a home.vue file in Pages, the page structure is the same as the above components, this page is divided into two parts, the first screen of pictures and text, the second screen of articles and questions, these data are crawling from the official address of [one] APP. Here is part of the template code:

<template> <div class="home-box"> <div class="home-bg" :style="homeDesc.bgImg" @click="toDetail(homeDesc.id)"> <div class="home-bgcolor"> <div class="home-desc"> <h4 class="home-day">{{homeDesc.day}}</h4> <p class="home-month">{{homeDesc.month}}</p> <p class="home-text-short">{{homeDesc.textShort}}</p> </div> </div> <one-load v-show="showLoading"></one-load> </div> <! -- End of first screen text and picture --> <! -- Other code..... --> </div> </template>Copy the code

Focus on the corresponding parts of the JS code:

<script> import oneLoad from ".. Vue "// Import loading component to display when loading data. Its display and hiding is determined by showLoading value. Export default {name: 'home', components:{ oneLoad }, data:function(){ return { msg: 'Welcome to one demo', showLoading:true, homeDesc:{} } }, created:function(){ this.getDatas(); }, $http.get("/homeData"). Then (response => {// Use vue-resource to request background interface this.homeDesc = response.body.homeDesc; this.showLoading = false; },error => { console.log(error); }); } } </script>Copy the code

Background interface: The process of crawling and parsing data is done in the background, so define an interface in the background: /homeData; The background is the express framework. Create a new phones. js file under the server folder.
```
//router.js var HTTP = require(" HTTP "); var router = express.Router(); var cheerio = require("cheerio"); Var fs = require("fs"); cheerio = require("fs"); router.get("/homeData",function(req,res){ var homeDesc = {}, _html; http.get("http://m.wufazhuce.com/",function(response){ response.on("data",function(chunk){ _html += chunk; }); Response. on("end",function(){console.log(" end"); $ = cheerio.load(_html); var homeLink = ($(".link-div a").attr("href")).split("/"); homeDesc.id = homeLink[homeLink.length -1]; homeDesc.day = $(".day").text(); homeDesc.month = $(".month").text(); homeDesc.textShort = $(".text-content-short").text(); homeDesc.href = $(".link-div a").attr("href"); homeDesc.bgImg = $(".home-img").attr("style"); res.send({"homeDesc":homeDesc}); }); }).on("error",function(err){ console.log(err) }); }); module.exports = router;Copy the code
```
Cheerio module is introduced in router.js, which uses the page to parse and climb. In fact, Cheerio is a truncated version of jquery, and its usage is similar to jquery. Install cheerio before importing cheerio. Enter NPM install cheerio –save-dev on the CLI and wait until the installation is complete.

The crawler here is also very simple, using only the HTTP API get method, if you do not know this method please see the official Node documentation. This is a page, not an interface, so you get HTML code. If you want to do this, you can type _html.

So, where does this ruoter work? Take a look at the dev-server.js file in the build folder to see how the server is configured. As you can see, the project built with vue-CLI is already using Express as the background, so just import the route in the dev-server.js file, that is, add the following two lines of code:
```
var router = require(".. /server/router"); app.use(router);Copy the code
```
In the home.vue corresponding JS code, this interface is called using vue-resource, which also needs to be installed on the command line: NPM install vue-resource –save-dev. HomeDesc assigns data to this.homeDesc and hides the loading, that is, sets showLoading to false.
From the template page, you can see that the div with class home-bg is bound to the click event articlesToPicture(homedesc.id). The function looks like this:
```
toDetail: function(id){ this.$router.push("/pictureDetail? id="+id) },Copy the code
```
Router router id = router router id = router router id = router router id = router router id = router id = router id = router id = router id = router id = router id = router id = router id = router id = router id = router id = router id = router id = router id = router id = router id = router id = router id = router id = router id = router id = router id

Vue routing configuration: there is a router folder in the SRC folder, which contains an index.js file. Vue-router and vue-resource:

import Vue from 'vue'
import Router from 'vue-router'
import VueResource from 'vue-resource'Copy the code

Then introduce home.vue:

var home = require(".. /pages/home.vue")Copy the code

Then define the route:

var routes = [
    {path:"/",component:home}
];

Vue.use(Router)
Vue.use(VueResource);

export default new Router({
  routes
});Copy the code

So where is this route used? There’s still a main.js file in the SRC directory, right here. Take a look at it and you will see that the routes defined above have been imported, which was done for you when you built your project using vue-CLI.

Other parts

In fact, the main method and train of thought in the second big point has all said, only need to follow this train of thought to complete the following reading, graphics, music, film and television, about and each part of the details of the page. All the data to crawl, all need to be carried out in the background, and then get the data back to the foreground rendering to the page.

Fourth, the final effect

For friends with mobile phones around, you can scan the qr code below to experience the effect of online

Qr code

For inconvenient use of mobile phone children’s shoes, please stamp online effect; (Note: Please lower it to mobile mode preview in Chrome)

Finally, a few screenshots of the renderings:

Home page:

home

Menu:

home

Music:

home

Reading:

home

The key to the

Complete version of the code, I put on Github, there is a need to please stamp here, and conveniently give a star bar; Don’t need also please stamp here selfless give a star bar, not to suffer, not to be deceived.

P.S. Welcome feedback if you have any suggestions for improvement, thank you.

Use Vue2+ Webpack + Node to develop an H5 app