github 地址 https://github.com/wangxiaoxi...css
webpakc+vue的搭建
1.新建項目文件夾（see-films);
2.npm init //初始化項目
3.搭建webpack的基本框架html
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:{
}
};
同時安裝依賴vue
npm i -D webpack(版本號4.14.0) npm i -D webpack-cli
4.webpack的熱更新node
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"，此時再進行打包----打包成功。第一步完成。webpack
5.安裝模板文件依賴
npm i -D html-webpack-plugin
在webpack.config.js文件中的plugins中
plugins:[git
new htmlPlugin({
minify:{
removeAttributeQuotes:true
},
hash:true,
template:"./src/index.html"
})
]
在src文件夾下面建立index.html
而後webpack測試可否打包成功
此時的目錄結構是這樣子的!github
圖片描述web
6.vue的搭建!!!vue-router
根目錄新建文件夾client
建立文件 main.js和App.vue
在根目錄建立index.html
而後修改webpack.config.js文件中的入口和plugin插件的模板npm
並安裝依賴
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: '<App/>'
})
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")
});
} )()