webpack+vue+koa+mongoDB,從零開(kāi)始搭建一個(gè)網(wǎng)站

Java_oldboy 發(fā)布于2019-08-22 18:27 / 585人閱讀

摘要：地址的搭建新建項(xiàng)目文件夾初始化項(xiàng)目搭建的基本框架同時(shí)安裝依賴版本號(hào)的熱更新創(chuàng)建一個(gè)文件夾，創(chuàng)建一個(gè)文件測(cè)試能否打包，發(fā)現(xiàn)報(bào)錯(cuò)缺少在文件里面的入口上面加上現(xiàn)在先是在本地跑起來(lái)，如果是生產(chǎn)環(huán)境的話，此時(shí)再進(jìn)行打包打包成功。

github 地址 https://github.com/wangxiaoxi...

webpakc+vue的搭建
1.新建項(xiàng)目文件夾（see-films);
2.npm init //初始化項(xiàng)目
3.搭建webpack的基本框架

const path = require("path");
const webpack = require("webpack");
module.exports = {
    entry:{
        entry:"./src/entry.js"
    },
    output:{
        path:path.resolve( __dirname,"dist" ),
        filename:"[name].js"
    },
    module:{

    },
    plugins:[

    ],
    devServer:{    
        
    }
};

同時(shí)安裝依賴

npm i -D webpack(版本號(hào)4.14.0)  
npm i -D webpack-cli

4.webpack的熱更新

npm i -D webpack-dev-server 
devServer:{    
        contentBase:path.resolve( __dirname,"dist" ),
        host:"127.0.0.1",
        compress:true,
        port:9001
    }

創(chuàng)建一個(gè)src文件夾，創(chuàng)建一個(gè)entry.js文件測(cè)試能否打包，發(fā)現(xiàn)報(bào)錯(cuò) 缺少mode
在webpacl.config.js文件里面的入口entry上面加上mode:"development",現(xiàn)在先是在本地跑起來(lái)，如果是生產(chǎn)環(huán)境的話mode:"production"，此時(shí)再進(jìn)行打包----打包成功。第一步完成。

5.安裝模板文件依賴
npm i -D html-webpack-plugin
在webpack.config.js文件中的plugins中
plugins:[

    new htmlPlugin({
        minify:{
            removeAttributeQuotes:true
        },
        hash:true,
        template:"./src/index.html"
    })
]

在src文件夾下面創(chuàng)建index.html
然后webpack測(cè)試能否打包成功
此時(shí)的目錄結(jié)構(gòu)是這樣子的!

圖片描述

6.vue的搭建!!!

根目錄新建文件夾client
創(chuàng)建文件 main.js和App.vue
在根目錄創(chuàng)建index.html
然后修改webpack.config.js文件中的入口和plugin插件的模板

并安裝依賴
npm i -S vue
npm i -D vue-template-complier
npm i -D extract-text-webpack-plugin
npm i -D vue-loader vue-style-loader css-loader

此時(shí)的webpack.config.js是這樣的

const path = require("path");
const webpack = require("webpack");
const htmlPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
module.exports = {
    mode:"development",
    resolve: {
        extensions: [".js", ".vue", ".json"],
        alias: {
            "vue$": "vue/dist/vue.esm.js"
        }
    },
    entry:{
        entry:"./client/main.js",
        vue:"vue"
    },
    output:{
        path:path.resolve( __dirname,"dist" ),
        filename:"[name].js"
    },
    module:{
        rules:[
            {
                test: /.vue$/,
                loader: "vue-loader",
                options: {
                    loaders: {
                        css: ExtractTextPlugin.extract({
                            use: {loader: "css-loader"},
                            fallback: "vue-style-loader"
                        })
                    }
                }
            }
        ]
    },
    plugins:[
        new htmlPlugin({
            minify:{
                removeAttributeQuotes:true
            },
            hash:true,
            template:"./index.html"
        }),
        new VueLoaderPlugin()，
        new ExtractTextPlugin("css/index.css")
    ],
    devServer:{    
        contentBase:path.resolve( __dirname,"dist" ),
        host:"127.0.0.1",
        compress:true,
        port:9001
    }
};

到此處就是一個(gè)最基礎(chǔ)的vue架構(gòu)；
此時(shí)的目錄結(jié)構(gòu)如下
圖片描述

看到這里，相信你也測(cè)試過(guò)，然后發(fā)現(xiàn)有個(gè)問(wèn)題，就是在.vue文件里面的style中對(duì)樣式進(jìn)行修改會(huì)報(bào)錯(cuò)，原因是webpack4.x版本得使用mini-css-extract-plugin代替原來(lái)的extract-text-webpack-plugin，修改之后如下

const path = require("path");
const webpack = require("webpack");
const htmlPlugin = require("html-webpack-plugin");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    devtool:"cheap-module-eval-source-map",
    mode:"development",
    resolve: {
        extensions: [".js", ".vue", ".json"],
        alias: {
            "vue$": "vue/dist/vue.esm.js"
        }
    },
    entry:{
        entry:"./client/main.js",
        vue:"vue"
    },
    output:{
        path:path.resolve( __dirname,"dist" ),
        filename:"[name].js",
        publicPath:"http://127.0.0.1:9001/"
    },
    module:{
        rules:[
            {
                test: /.js$/,
                use: "babel-loader",
                exclude: /node_modules/
            },
            {
                test: /.css$/,
                use:[
                    MiniCssExtractPlugin.loader,
                    {
                        loader: "css-loader?modules=false",
                        options: {
                            importLoaders: 1,
                            minimize: true
                        }
                    }
                ]
            },
            {
                test: /.vue$/,
                loader: "vue-loader"
            }
        ]
    },
    plugins:[
        new htmlPlugin({
            minify:{
                removeAttributeQuotes:true
            },
            hash:true,
            template:"./index.html"
        }),
        new VueLoaderPlugin(),
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        })
    ],
    devServer:{    
        contentBase:path.resolve( __dirname,"dist" ),
        host:"127.0.0.1",
        compress:true,
        port:9001
    }
};

7.VUE熱更新

只需要安裝vue-hot-reload-api依賴 配合就能夠輕松實(shí)現(xiàn)。

8.VUE路由

安裝vue-router 然后修改main.js如下，并在同層目錄生成router.config.js,此時(shí)的就能根據(jù)你的喜好去建立路由了。

import Vue from "vue";
import App from "./App";

import VueRouter from "vue-router";
Vue.use(VueRouter);
import routes from "./router.config.js";
const router = new VueRouter({
    routes: routes
});

new Vue({
  el: "#app",
  router,
  components: { App },
  template: ""
})

9.KOA的引入和基礎(chǔ)測(cè)試

const Koa = require("koa");
const Rrouter = require("koa-router");
const cors = require("koa2-cors");

( async () => {
    const app = new Koa();
    
    app.use( cors() );
    
    const router = new Rrouter();
    router.get("/getFirstMessage",async ctx=>{
        ctx.body = {
            message:"get"
        } 
    });
    app.use(router.routes()).use(router.allowedMethods());
    app.listen(9001 ,async ()=>{
        console.log("CONNECTED")
    });
} )()

http://127.0.0.1:9001/getFirstMessage
此時(shí)就能夠通過(guò)接口拿到數(shù)據(jù)

10.改裝路由---使用裝飾器

在server文件夾下建立如上文件夾和文件

npm i -S babel-core babel-plugin-transform-decorators-legacy babel-polyfill ramda lodash babel-preset-stage-0

/*裝飾器注冊(cè)*/
require("babel-core/register")();
require("babel-polyfill");

const Koa = require("koa");

/*該方法用來(lái)批量引入中間件*/
const useMiddlewares = require("./lib/useMiddlewares");

( async () => {
    const app = new Koa();

    await useMiddlewares(app);

    app.listen(9001 ,async ()=>{
        console.log("CONNECTED")
    });
} )()