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在创建过程、文件结构、配置方式和使用场景等方面均有差别。开发人员可以根据具体的应用场景来选择适合自己的脚手架工具。