一、基本介绍
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在创建过程、文件结构、配置方式和使用场景等方面均有差别。开发人员可以根据具体的应用场景来选择适合自己的脚手架工具。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/231387.html
微信扫一扫 
支付宝扫一扫 