摘要:地址的搭建新建項目文件夾初始化項目搭建的基本框架同時安裝依賴版本號的熱更新創建一個文件夾,創建一個文件測試能否打包,發現報錯缺少在文件里面的入口上面加上現在先是在本地跑起來,如果是生產環境的話,此時再進行打包打包成功。
github 地址 https://github.com/wangxiaoxi...
webpakc+vue的搭建
1.新建項目文件夾(see-films);
2.npm init //初始化項目
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:{ } };
同時安裝依賴
npm i -D webpack(版本號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 }
創建一個src文件夾,創建一個entry.js文件測試能否打包,發現報錯 缺少mode
在webpacl.config.js文件里面的入口entry上面加上mode:"development",現在先是在本地跑起來,如果是生產環境的話mode:"production",此時再進行打包----打包成功。第一步完成。
5.安裝模板文件依賴
npm i -D html-webpack-plugin
在webpack.config.js文件中的plugins中
plugins:[
new htmlPlugin({ minify:{ removeAttributeQuotes:true }, hash:true, template:"./src/index.html" }) ]
在src文件夾下面創建index.html
然后webpack測試能否打包成功
此時的目錄結構是這樣子的!
圖片描述
6.vue的搭建!!!
根目錄新建文件夾client
創建文件 main.js和App.vue
在根目錄創建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
此時的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 } };
到此處就是一個最基礎的vue架構;
此時的目錄結構如下
圖片描述
看到這里,相信你也測試過,然后發現有個問題,就是在.vue文件里面的style中對樣式進行修改會報錯,原因是webpack4.x版本得使用mini-css-extract-plugin代替原來的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依賴 配合就能夠輕松實現。
8.VUE路由
安裝vue-router 然后修改main.js如下,并在同層目錄生成router.config.js,此時的就能根據你的喜好去建立路由了。
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的引入和基礎測試
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
此時就能夠通過接口拿到數據
10.改裝路由---使用裝飾器
在server文件夾下建立如上文件夾和文件
npm i -S babel-core babel-plugin-transform-decorators-legacy babel-polyfill ramda lodash babel-preset-stage-0
/*裝飾器注冊*/ require("babel-core/register")(); require("babel-polyfill"); const Koa = require("koa"); /*該方法用來批量引入中間件*/ const useMiddlewares = require("./lib/useMiddlewares"); ( async () => { const app = new Koa(); await useMiddlewares(app); app.listen(9001 ,async ()=>{ console.log("CONNECTED") }); } )()
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/116800.html
摘要:地址的搭建新建項目文件夾初始化項目搭建的基本框架同時安裝依賴版本號的熱更新創建一個文件夾,創建一個文件測試能否打包,發現報錯缺少在文件里面的入口上面加上現在先是在本地跑起來,如果是生產環境的話,此時再進行打包打包成功。 github 地址 https://github.com/wangxiaoxi... webpakc+vue的搭建1.新建項目文件夾(see-films);2.npm ...
摘要:地址的搭建新建項目文件夾初始化項目搭建的基本框架同時安裝依賴版本號的熱更新創建一個文件夾,創建一個文件測試能否打包,發現報錯缺少在文件里面的入口上面加上現在先是在本地跑起來,如果是生產環境的話,此時再進行打包打包成功。 github 地址 https://github.com/wangxiaoxi... webpakc+vue的搭建1.新建項目文件夾(see-films);2.npm ...
摘要:五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新,歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香,消溽暑。鳥雀呼晴,侵曉窺檐語。葉上初陽乾宿雨,水面清圓,一一風荷舉。家住吳門,久作長安旅。五月漁郎相憶否。小楫輕舟,夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly;請::點擊::集web前端最近很火的vue2框架資源;定時更新,歡迎 Star 一下。 蘇...
閱讀 3975·2021-11-18 13:22
閱讀 1812·2021-11-17 09:33
閱讀 2877·2021-09-26 09:46
閱讀 1208·2021-08-21 14:11
閱讀 2884·2019-08-30 15:53
閱讀 2706·2019-08-30 15:52
閱讀 1885·2019-08-30 10:52
閱讀 1516·2019-08-29 15:30