Hungry? Study (1)

Project preparation

Project construction

Install vue scaffold

npm install -g vue-cli

Project initialization

Vue init webpack < project name >

Others omitted: webpack configuration needs to be recorded separately for learning

stylus

Learn to use stylus in this project
Install stylus and install its dependent loader according to git warning
Since Vue cli is used, there is no need to manually configure webpack

Font Icon making: icomoon.io

Upload the file to generate a package file, download and decompress it
Put the font file in the project directory

Then configure it in webpack.base.conf.js as needed

{
    test: /\.(woff2?|woff|eot|ttf|otf|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
    }
}

Need to download URL loader and other loaders
(it may not be necessary. In a word, where the loader needs to be configured, it will be added.)

Background data simulation

json data needs to be imported to webpack.dev.conf.js for configuration

// mock
// Introduction of express module
const express = require('express')
const app = express()
// Introducing Json
var appData = require('../data.json')
var seller = appData.seller
var goods = appData.goods
var ratings = appData.ratings
var apiRoutes = express.Router()
app.use('/api', apiRoutes)

before(app) {
app.get('/api/seller', (req, res) => {
    res.json({
    // Here is your json content
    errno: 0,
    data: seller
    })
}),
app.get('/api/goods', (req, res) => {
    res.json({
    // Here is your json content
    errno: 0,
    data: goods
    })
}),
app.get('/api/ratings', (req, res) => {
    res.json({
    // Here is your json content
    errno: 0,
    data: ratings
    })
})
},

For back-end data interaction (ajax), you can download the relevant loader
for example vue-resource
or axios
According to the document configuration

Configure Vue resource in app.vue

created() {
        this.$http.get('./api/seller?id=' + this.seller.id).then((res)=>{
        var resData  = res.body
        if(resData.errno  === ERR_OK){
            /* this.seller =  resData.data; id will be overwritten */
            /* To prevent the id from being overwritten, use one of the syntax of es6: expand the attribute of the object, add the value of response.data on the original basis, and the original id attribute will not be overwritten */
            this.seller = Object.assign({},this.seller,resData.data)
            console.log(this.seller.id)
        }
        },(res)=>{
            alert(res.status)
        });

Configure axios in app.vue

import axios from 'axios'//Module to be introduced
axios.get('Route/data.json').then((res) => {
    this.seller = res.data.seller
    })

Vue router routing

Route redirection

const routes = [{
    path: '/',
    redirect: '/goods' //Redirect, put at the front, this page will be displayed by default.
}, {
    path: '/goods',
    component: goods
}]
export default new Router({
    linkActiveClass: 'active',
    routes
})

css sticky footer layout technology

Jump link css sticky footer