Vue-Init-Webpack 與 Vue-Create的全面比較

一、基本介紹

Vue-Init-Webpack和Vue-Create都是Vue的官方腳手架工具，用於快速搭建Vue應用。Vue-Init-Webpack基於webpack和vue-loader，而Vue-Create則是基於Webpack-simple。

二、創建過程

從創建的角度來看，兩者有一定差別。Vue-Init-Webpack需要手動安裝webpack和vue-loader，然後再執行vue init webpack命令，根據提示完成應用的配置，最終生成項目代碼。而Vue-Create則是在執行vue create命令之後，直接生成項目代碼，省去了手動安裝和配置的步驟。

// Vue-Init-Webpack創建Vue應用示例
// 安裝webpack和vue-loader
npm install webpack vue-loader vue-template-compiler --save-dev

// 初始化創建Vue應用
vue init webpack my-project

// 運行應用
npm run dev

// Vue-Create創建Vue應用示例
vue create my-project

// 運行應用
npm run serve

三、文件結構

從生成的文件結構上來看，兩者都有相似的目錄結構。例如，都包含src、dist、node_modules等目錄。不同的是Vue-Create生成的目錄結構更加簡單，僅包含src和node_modules兩個目錄，而Vue-Init-Webpack除了這兩個目錄之外，還包括config和build目錄，這使得應用的配置更加靈活。

// Vue-Init-Webpack生成文件目錄示例
- build // webpack等構建配置文件
- config // webpack等開發環境配置文件
- node_modules // 依賴包
- src // App組件和其他組件代碼
- static // 靜態資源文件
- test // 單元測試代碼
- .babelrc // babel配置文件
- .editorconfig // 編輯器配置文件
- .eslintignore // eslint忽略配置文件
- .eslintrc.js // eslint配置文件
- .gitignore // Git忽略文件
- index.html // 應用入口文件
- package.json // 應用包信息

// Vue-Create生成文件目錄示例
- node_modules // 依賴包
- public // 應用入口文件和圖標等
- src // App組件和其他組件代碼
- .gitignore // Git忽略文件
- babel.config.js // babel配置文件
- package-lock.json // 鎖定包信息
- package.json // 應用包信息
- README.md // 應用文檔

四、配置方式

配置方式上，Vue-Init-Webpack採用的是單個配置文件的方式，可以直接修改webpack的配置文件完成應用的配置，比較自由。而Vue-Create採用的是CLI命令，可以通過vue.config.js文件來修改配置，相比Vue-Init-Webpack更加簡單。

// Vue-Init-Webpack的webpack配置文件
var path = require('path')
var webpack = require('webpack')
module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            // 配置css預編譯器，如scss
            scss: 'vue-style-loader!css-loader!sass-loader',
            css: 'vue-style-loader!css-loader'
          }
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      // 聲明路徑縮寫
      'vue$': 'vue/dist/vue.esm.js',
      '@': path.resolve('src')
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

// Vue-Create的vue.config.js配置文件
module.exports = {
    // 配置應用入口文件
    pages: {
        index: {
            entry: 'src/main.js',
            title: 'Home'
        }
    }
}

五、使用場景

從使用場景上來看，兩者主要適用於不同的應用場景。Vue-Init-Webpack適合於需要自由調整webpack配置的場景，例如需要使用sass等預編譯器或者其他較為複雜的應用，Vue-Create則適合於快速搭建原型或者小型應用，由於配置方式簡單，並且沒有webpack等配置文件，可以快速啟動。

// Vue-Init-Webpack使用示例
// 適用於需要自由調整webpack配置的應用
vue init webpack my-project

// Vue-Create使用示例
// 適用於快速搭建原型或者小型應用
vue create my-project

六、總結

綜上所述，Vue-Init-Webpack和Vue-Create在創建過程、文件結構、配置方式和使用場景等方面均有差別。開發人員可以根據具體的應用場景來選擇適合自己的腳手架工具。