基于Webpack Vue Vue-Router搭建前端開發(fā)環(huán)境

前端開發(fā)一步步發(fā)展催生了很多工具、組件贺待、腳手架徽曲，好處是確實便利了項目的快速搭建，但是害處也很大：用慣了工具也許開發(fā)麸塞，也許兩年過去了仍舊對基礎(chǔ)原理仍舊一無所知疟位。

比如，如何用原生dom來操作界面綁定事件都沒學會喘垂，就開始用Vue甜刻；再比如對Webpack的所解決的時間開發(fā)問題沒有感知前就開始用Vue-Cli也是一樣。

本篇嘗試從最簡單的例子開始正勒，一步一步介紹如何基于Webpack+Vue+Vue-Router配置項目環(huán)境得院，并隨著項目開發(fā)的深入介紹一些更進階的配置。

完整的代碼可以通過 https://github.com/tangyefei/simplest-webpack-vue下載

1. 準備

基礎(chǔ)的前端開發(fā)知識HTML/JS/CSS是必須的章贞，然后應(yīng)該能夠基于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

此時的項目結(jié)構(gòu)如下：

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內(nèi)容意外赡麦，還會有<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'
        ]
      },
    ]
  }
};

關(guān)于babel需要特別注意的一點是遂铡，從版本7開始，balbel包名規(guī)則從 babel-core 變成了 @babel/core晶姊，如果發(fā)現(xiàn) babel-loader 報出了依賴的babel-core未找到的錯誤扒接，我們需要制定 babel-loader安裝最新的版本即可。

此時的項目結(jié)構(gòu)如下

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');

執(zhí)行 npm run start 可以看到 HTML渲染了來自JS的變量并且顏色被應(yīng)用成了CSS紅色们衙。

3. 集成 Vue-Router

首先安裝 vue-router

npm install -D vue-router

繼續(xù)修改和新增必要的文件钾怔，文件夾結(jié)構(gòu)圖如下所示：

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>

執(zhí)行 npm npm run start可以通過切換 / 和 /products 來看到不同的內(nèi)容被渲染成功。