vue高实2--element组件与aixos

 

在main.js引入elementUI，在vue.config.js造假数据    configureWebpack: {before：{app.get("/api/goods", function(req, res) {}} }，造好的数据使用axios请求axios.get("./api/goods")

 

main.js:

import Vue from "vue";

import ElementUI from "element-ui";

import "element-ui/lib/theme-chalk/index.css";

import App from "./App.vue";

 

Vue.use(ElementUI);

Vue.config.productionTip = false;

 

new Vue({

  render: h => h(App)

}).$mount("#app");

 

 

 

app.vue：

///* 使用elementui 和axios（在vue.congfig.js里面configureWebpack devServe   before(app) 里面写app.get("url",data)放的数据）*/

 

 

h1 {

  color: red;

}

.image {

  width: 100%;

}

 

vue.config.js:

module.exports = {

    chainWebpack: config => {

        config.module

            .rule("eslint")

            .use("eslint-loader")

            .loader("eslint-loader")

            .tap(options => {

                options.fix = true;

                return options;

            });

    },

    configureWebpack: {

        //扩展webpack

        devServer: {

            before(app) {//造假数据，在.vue文件中利axios请求

                app.get("/api/goods", function(req, res) {

                    res.json({

                        code: 0,

                        data: [{

                                id: 1,

                                title: "vue2.x精通11",

                                price: "100",

                                img: "/img/03.jpg",

                                count: 100

                            },

                            {

                                id: 2,

                                title: "vue2.x精通22",

                                price: "100",

                                img: "/img/03.jpg",

                                count: 100

                            },

                            {

                                id: 3,

                                title: "vue2.x精通33",

                                price: "100",

                                img: "/img/03.jpg",

                                count: 100

                            },

                            {

                                id: 4,

                                title: "vue2.x精通44",

                                price: "100",

                                img: "/img/03.jpg",

                                count: 100

                            },

                            {

                                id: 5,

                                title: "vue2.x精通55",

                                price: "100",

                                img: "/img/03.jpg",

                                count: 100

                            }

                        ]

                    });

                });

            }

        }

    }

};