講下webpack中的對于vue配置县袱，其實vue官方就提供了一套模板vue-webpack-template，我們學(xué)習(xí)學(xué)習(xí)佑力，然后基于當(dāng)前自己的項目來配置下式散。
git倉庫：webpack-demo
1、處理vue
- 對于
.vue這種文件打颤，webpack肯定是不認(rèn)識的暴拄，所以我們需要相應(yīng)的loader來處理它漓滔，通過查閱文檔我們發(fā)現(xiàn)需要安裝這兩個東西：
$ npm install vue-loader vue-template-compiler --save-dev
- 然后安裝文檔上面的教程，照貓畫虎搞一下乖篷。這個
loader兩個環(huán)境都是需要的响驴，我們應(yīng)該是丟到webpack.common.js中：
// webpack.common.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
module: {
rules: [
// ... 其它規(guī)則
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
// 請確保引入這個插件！
new VueLoaderPlugin()
]
}
2撕蔼、寫點vue
- 首先既然要使用
vue豁鲤，就需要安裝它。
$ cd chapter17
$ npm install vue --save
- 然后我們需要對當(dāng)前的文件目錄做次比較大的改動：
webpack-demo/chapter17
|- /build
|- src
- |- assets
- |- styles
- |- content.js
- |- footer.js
- |- header.js
- |- logo.js
+ |- App.vue
|- index.js
|- index.html
|- package.json
|- postcss.config.js
|- README.md
- 然后我們在
App.vue中寫點內(nèi)容(你應(yīng)該很熟悉)：
<template>
<div id="app">
hello world
</div>
</template>
<style lang="scss">
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
</style>
- 然后我們刪掉
src/index.js這個入口文件原來所有的示例代碼鲸沮，使用下面這部分替換：
import Vue from "vue";
import App from "./App.vue";
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
- 上面這個就是
vue的語法羅琳骡，會將所有的內(nèi)容都掛載到id為app的這個元素上，很明顯我們目前沒有讼溺，所以我們需要對src/index.html這個模板加上這個元素：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
+ <div id="app"></div>
</body>
</html>
- 然后我們
npm run dev打包楣号，瀏覽器中就會顯示出hello world了。現(xiàn)在怒坯，是不是有點vue的那意思了炫狱？
3、關(guān)于路由
- 頁面要跳轉(zhuǎn)剔猿，很明顯视译，現(xiàn)在我們還少了vue-router這個必要的東西，然我們參照官網(wǎng)的教程归敬，安裝一下：
$ npm install vue-router --save
- 然后憎亚，為了讓我們現(xiàn)在這個項目跟像一個標(biāo)準(zhǔn)的
vue項目，所以我們參照一下vue-webpack-template的目錄結(jié)構(gòu)對我們的做點修改弄慰。- 我們將原來的一直伴隨我們的
header第美、footer、content三塊的js及樣式文件都遷移到了components目錄下作為了三個子組件陆爽。 - 新建了一個
src/views里面放了放了兩個頁面組件什往，用來測試router的跳轉(zhuǎn)。
- 我們將原來的一直伴隨我們的
| 上一章的src目錄 | 現(xiàn)在的src目錄 |
|---|---|
 |
 |
- 新建了一個路由文件慌闭，
src/router/index.js就是vue腳手架初始化生成的內(nèi)容了：
import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);
const routes = [
{
path: "/",
name: "home",
component: () => import("../views/home.vue")
},
{
path: "/about",
name: "about",
component: () => import("../views/about.vue")
}
];
const router = new VueRouter({
routes
});
export default router;
- 然后需要在入口文件
src/index.js中引入這個路由别威，還有一些其他的都是關(guān)于vue的基本使用用法的東西就不多說了，去看下倉庫源碼即可驴剔。
4省古、問題
- 到了這一步以后，自然我們需要跑一下項目丧失，這時候問題來了豺妓，死活這張圖片不顯示；報
http://localhost:8080/[object%20Module]找不到圖片的錯誤。
- 經(jīng)過一頓google后終于找到了答案琳拭，原來我們需要在
webpack.common.js中使用url-loader的地方把esModule設(shè)置為false-->錯誤reason训堆。
// ...
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: "url-loader",
options: {
limit: 4096,
+ esModule: false
}
}
]
}
-
學(xué)點東西還是挺不容易啊，坑真多白嘁。坑鱼。。絮缅。終于鲁沥，看到了完整的頁面，路由跳轉(zhuǎn)頁也沒問題耕魄。
5黍析、小結(jié)
- 嗯，回想過去第一次用
vue-cli腳手架搭起頁面的時刻屎开，是不是有那味了？react也是差不多马靠，裝下react react-dom奄抽，但是由于我react的技術(shù)棧不是很熟，就不班門弄斧了甩鳄，用create-react-app這個官方腳手架初始化搞個項目逞度，原理也都一樣。 - 至此妙啃，我們也從0到了1的配置了一個跟
vue-webpack-template這樣的模板項目出來了档泽，雖然比不上官方，但也算是有模有樣的揖赴。 - 參考鏈接：
