前端開發一步步發展催生了很多工具、組件、腳手架，好處是確實便利了項目的快速搭建，但是害處也很大：用慣了工具也許開發，也許兩年過去了仍舊對基礎原理仍舊一無所知。
比如，如何用原生dom來操作界面綁定事件都沒學會，就開始用Vue；再比如對Webpack的所解決的時間開發問題沒有感知前就開始用Vue-Cli也是一樣。
本篇嘗試從最簡單的例子開始，一步一步介紹如何基于Webpack+Vue+Vue-Router配置項目環境，并隨著項目開發的深入介紹一些更進階的配置。
完整的代碼可以通過 https://github.com/tangyefei/simplest-webpack-vue下載
1. 準備
基礎的前端開發知識HTML/JS/CSS是必須的，然后應該能夠基于Webpack的文檔將 Concepts、Guide、Asset Management、Development 部分動手實踐過。
2. 初始化
mkdir simplest-webpack-vue
cd simplest-webpack-vue
npm init -y
npm install -D webpack webpack-cli webpack-dev-server
此時的項目結構如下：
simplest-webpack-vue
- dist
- index.html
- src
- main.js
- packge.json
- webpack.config.js
webpack-config.js
const path = require('path');
module.exports = {
mode: 'development',
entry: {
index: './src/main.js',
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
devServer: {
contentBase: './dist'
}
};
main.js
var ele = document.createElement('div');
ele.innerText = 'hello';
document.body.append(ele);
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>my project</title>
</head>
<body>
<script src="./index.bundle.js"></script>
</body>
</html>
3. 集成Vue
我們參考 vue-loader 先安裝 vue vue-loader vue-template-compiler。然后在 webpack.config.js 中配置 vue-loader。
因為webpack加載非JS的文件會按照配置的rules依次進行處理，而在標準的vue文件中，除了template包裹的html內容意外，還會有<style>包裹的css 和 <script>包裹的JS，因此還需要提供css-loader+style-loader用于處理樣式，babel-loader用于處理JS。
npm install -P vue
npm install -D @babel/core @babel/preset-env vue-loader vue-template-compiler babel-loader css-loader vue-style-loader css-loader
webpack.config.js 增加的部分如下
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
plugins: [
new VueLoaderPlugin()
],
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
loader: 'babel-loader'
},
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
},
]
}
};
關于babel需要特別注意的一點是，從版本7開始，balbel包名規則從 babel-core 變成了 @babel/core，如果發現 babel-loader 報出了 依賴的babel-core未找到的錯誤，我們需要制定 babel-loader安裝最新的版本即可。
此時的項目結構如下
simplest-webpack-vue
- dist
- index.html
- src
- App.vue
- main.js
- packge.json
- webpack.config.js
dist/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>my project</title>
</head>
<body id="app">
<script src="./index.bundle.js"></script>
</body>
</html>
src/App.vue
<style>
.app {color: red}
</style>
<template>
<div class="app">{{msg}}</div>
</template>
<script>
export default {
data() {
return {msg}
}
}
</script>
src/main.js
import Vue from 'vue';
import App from './App.vue';
new Vue({
render: h => h(App),
}).$mount('#app');
執行 npm run start 可以看到 HTML渲染了來自JS的變量并且顏色被應用成了CSS紅色。
3. 集成 Vue-Router
首先安裝 vue-router
npm install -D vue-router
繼續修改和新增必要的文件，文件夾結構圖如下所示：
simplest-webpack-vue
- dist
- index.html
- src
- components
- Home.vue
- Products.vue
- js
- common
- router-config.js
- App.vue
- main.js
- packge.json
- webpack.config.js
webpack.config.js
module.exports = {
resolve: {
alias: {
cp: path.resolve(__dirname, 'src/components/'),
js: path.resolve(__dirname, 'src/js/'),
css: path.resolve(__dirname, 'src/css/')
}
},
}
src/main.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import RouterConfig from 'js/common/router-config.js';
import App from './App.vue';
Vue.use(VueRouter)
new Vue({
render: h => h(App),
router: new VueRouter(RouterConfig)
}).$mount('#app');
js/common/router-config.js
import Home from "cp/Home.vue";
import Products from "cp/Products.vue";
export default {
routes: [{
name: 'home', path: '/', component: Home
},{
name: 'products', path: '/products', component: Products
}]
}
src/App.vue
<template>
<div id="app"><router-view></router-view></div>
</template>
src/components/Home.vue
<template>
<div class="home-page">
home page
</div>
</template>
src/components/Products.vue
<template>
<div class="products-page">
products
</div>
</template>
執行 npm npm run start可以通過切換 / 和 /products 來看到不同的內容被渲染成功。
