webpack+vue+koa+mongoDB，从头搭建一个网站

github地址https://github.com/wangxiaoxi...webpakc+vue的搭建1.新建一个项目文件夹（see-films）；2.npminit//初始化项目3.构建webpack的基本框架constpath=require("path");constwebpack=require("webpack");module.exports={entry:{entry:"./src/entry.js"},输出:{path:path.resolve(__dirname,"dist"),文件名:"[name].js"},模块:{},插件:[],devServer:{}};安装依赖npmi-Dwebpack(versionnumber4.14.0)npmi-Dwebpack-cli4.webpack热更新npmi-Dwebpack-dev-serverdevServer:{contentBase:path.resolve(__dirname,"dist"),host:"127.0.0.1",compress:true,port:9001}创建src文件夹，创建entry.js文件测试能否打包，发现报错缺少mode，添加到webpacl.config.js文件中的entry入口进入mode:"development"，现在先在本地运行，如果是生产环境，则mode:"production"，此时再打包-package是成功的。第一步完成了。5.安装模板文件依赖npmi-Dhtml-webpack-plugininthepluginsinthewebpack.config.jsfileplugins:[newhtmlPlugin({minify:{removeAttributeQuotes:true},hash:true,template:"./src/index.html"})]在src文件夹下创建index.html然后webpack测试是否打包成功。此时的目录结构是这样的！图片说明6.vue搭建！！！在根目录下新建文件夹客户端创建文件main.js和App.vue，在根目录下创建index.html，然后修改webpack.config.js文件中的入口和plugin插件的模板，安装依赖npmi-Svuenpmi-Dvue-template-compliernpmi-Dextract-text-webpack-pluginnpmi-Dvue-loadervue-style-loadercss-loaderwebpack.config.js就像这个常量路径=require("路径");constwebpack=require("webpack");consthtmlPlugin=require("html-webpack-plugin");constExtractTextPlugin=require('extract-text-webpack-plugin');constVueLoaderPlugin=require('vue-loader/lib/plugin');module.exports={mode:"development",resolve:{extensions:['.js','.vue','.json'],别名：{'vue$':'vue/dist/vue.esm.js'}},entry:{entry:"./client/main.js",vue:"vue"},输出:{path:path.resolve(__dirname,"dist"),文件名:"[name].js"},模块:{规则:[{test:/\.vue$/,loader:'vue-loader',options:{loaders:{css:ExtractTextPlugin.extract({use:{loader:'css-loader'},fallback:'vue-style-loader'})}}}]},plugins:[newhtmlPlugin({minify:{removeAttributeQuotes:true},hash:true,template:"./index.html"}),newVueLoaderPlugin()，newExtractTextPlugin("css/index.css")],devServer:{contentBase:path.resolve(__dirname,"dist"),host:"127.0.0.1",compress:true,端口:9001}};这是最基本的vue架构；此时的目录结构如下图所示。看到这里，相信你已经测试过了，然后发现了一个问题，就是.vue文件中的style如果修改了就会报错。原因是webpack4.x版本不得不使用mini-css-extract-plugin，而不是原来的extract-text-webpack-plugin。修改后constpath=require("path");constwebpack=require("webpack");consthtmlPlugin=require("html-webpack-plugin");constVueLoaderPlugin=require('vue-loader/lib/插件');constMiniCssExtractPlugin=require("mini-css-extract-plugin");module.exports={devtool:"cheap-module-eval-source-map",mode:"development",resolve:{extensions:['.js','.vue','.json'],别名：{'vue$':'vue/dist/vue.esm.js'}},entry:{entry:"./client/main.js",vue:"vue"},输出:{path:path.resolve(__dirname,"dist"),filename:"[name].js",publicPath:"http://127.0.0.1:9001/"},module:{rules:[{test:/\.js$/,使用:'babel-loader',排除:/node_modules/},{test:/\.css$/,use:[MiniCssExtractPlugin.loader,{loader:'css-loader?modules=false',options:{importLoaders:1,minimize:true}}]},{test:/\.vue$/,loader:'vue-loader'}]},插件:[newhtmlPlugin({minify:{removeAttributeQuotes:true},hash:true,template:"./index.html"}),newVueLoaderPlugin(),newMiniCssExtractPlugin({filename:"[name].css",chunkFilename:"[id].css"})],devServer:{contentBase:path.resolve(__dirname,"dist"),host:"127.0.0.1",c压缩：真，端口：9001}}；7.VUE热更新只需要安装vue-hot-reload-api依赖配合即可轻松实现8.VUE路由安装vue-router然后修改main.js如下，并在同层目录生成router.config.js，这时候你可以根据自己的喜好创建路由。从'vue'导入Vue；从'./App'导入App；从'vue-router'导入VueRouter；Vue.use(VueRouter)；从'./router.config.js'导入路由；constrouter=newVueRouter({routes:routes});newVue({el:'#app',router,components:{App},template:''})9.KOA介绍和基础测试constKoa=require('koa');constRrouter=require('koa-router');constcors=require('koa2-cors');(async()=>{constapp=newKoa();app.use(cors());constrouter=newRrouter();router.get('/getFirstMessage',asyncctx=>{ctx.body={message:"get"}});app.use(router.routes()).使用(router.allowedMethods());app.listen(9001,async()=>{console.log("CONNECTED")});})()http://127.0.0.1:9001/getFirstMessage此时可以通过接口获取数据10.Retrofitrouting---使用decorators在server文件夹下创建以上文件夹和文件npmi-Sbabel-corebabel-plugin-transform-decorators-legacybabel-polyfillramdalodashbabel-preset-stage-0/*装饰器注册*/require('babel-core/register')();require('babel-polyfill');constkoa=require('koa');/*该方法用于批量引入中间件*/constuseMiddlewares=require('./lib/useMiddlewares');(async()=>{constapp=newKoa();awaituseMiddlewares(app);app.listen(9001,async()=>{console.log("CONNECTED")});})()