一個簡單的vue腳手架

建立專案

建立一個空資料夾，執行npm init，生成一個npm專案。填寫一些你認為有用的資訊。並在根目錄下建立一個index.js檔案，作為npm專案的入口。

安裝依賴

安裝webpack

首先安裝webpack。如果用的是webpack4.x版本，同時還需要安裝webpack-cli才行。

npm i -D webpack webpack-cli

管理webpack

在根目錄建立一個webpack.config.js，在這裡管理webpack。建立一個src資料夾來管理原始碼。在src資料夾中建立index.js作為入口檔案（其實就是腳手架中的main檔案）。參照vue腳手架，我們規定最後打包目錄為dist。此時檔案的目錄結構為

│  index.js
│  package.json
│  webpack.config.js
│
│
└─src
        index.js

而webpack.config.js的內容為

const path = require('path')

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index.js'
  }
}

為此我們需要安裝基本的loader

• 編譯css的loader和sass本身

npm i -D style-loader css-loader sass-loader node-sass

• 編譯js的loader

如果是babel8.x,必需要同時安裝@babel/core @babel/preset-env

npm i -D babel-loader @babel/core @babel/preset-env

• 編譯vue的loader

npm i -D vue-loader vue-template-compiler
npm i -S vue

把這些加到webpack.config.js裡，檔案變成了這樣

const path = require('path')
const VueLoaderPlugin 
 
= require('vue-loader/lib/plugin')

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader'
          }
        ] 
      },
      {
        test: /\.vue$/,
        use: [
          {
            loader: 'vue-loader'
          }
        ]
      },
      {
        test: /\.(css|scss|sass)$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'sass-loader'
          }
        ]
      }
    ]
  },
  plugins: [new VueLoaderPlugin()]
}

然後向webpack新增開發環境執行的配置

npm i -D clean-webpack-plugin html-webpack-plugin webpack-dev-server

使用webpack-dev-server來啟動開發環境，使用webpack進行打包。在這個操作當中，html-webpack-plugin需要一個模板來定義檔案的結構，因為我們需要的不是一個空白模板，而希望模板中至少要有一個<div id="app"></div>。根據外掛，我們還需要在跟目錄建立一個public資料夾。裡面放的是渲染html-webpack-plugin外掛的模板。那麼現在，整個專案結構變成了這樣

│  index.js
│  package.json
│  webpack.config.js
│
├─public
│      index.html
│
└─src
        index.js

然後向package.json新增執行命令

{
  // ...
  "scripts": {
    "build": "webpack --config webpack.config.js",
    "dev": "webpack-dev-server --open"
  }
  // ...
}

並且向webpack.config.json繼續補充

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index.js'
  },
  devServer: {
    contentBase:  './dist'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader'
          }
        ]
      },
      {
        test: /\.vue$/,
        use: [
          {
            loader: 'vue-loader'
          }
        ]
      },
      {
        test: /\.(css|scss|sass)$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'sass-loader'
          }
        ]
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: 'public/index.html',
      title: 'hello, vue_title'
    })
  ]
}

建立真正的vue腳手架

如果你能執行到上面的步驟結束沒有出錯，那麼實際上你的webpack已經沒有問題了。雖然看上去是如此的簡單。接下來我們只需要把精力放到如何編譯vue單檔案元件。在src資料夾中建立一個index.vue檔案如下

<template>
  <div>
    {{msg}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'hello, vue!!!'
    }
  }
}
</script>

<style lang="scss" scoped>
div {
  color: red
}
</style>

並編輯同目錄中的index.js

import Vue from 'vue'
import App from './index.vue'

new Vue({
  render: h => h(App)
}).$mount('#app')

最後，我們的專案長成了這樣

│  index.js
│  package.json
│  webpack.config.js
│
├─public
│      index.html
└─src
        index.js
        index.vue

是不是發現和vue-cli3.x腳手架的結構完全一樣？事實上vue-cli3.x就是這個結構來的。只不過它把webpack.config.js安裝到了vue-cli-service裡，暴露出來vue.config.js來管理。