就像标题所说的那样。有没有可能在webpack的帮助下构建一个vue应用程序而不使用vue cli?如果没有,为什么?就我的理解,vue cli也使用webpack来构建他们的文件。
zujrkrfu1#
是的,当然。vue-cli在底层使用webpack,但它通过一个合理的默认值抽象化了所有繁琐的webpack配置,这样您就可以专注于编写应用程序。如果您需要更改应用程序的构建方式,例如您希望压缩图像资产,那么除非vue-cli为您的特定需求提供了配置选项,否则您将不得不以某种方式更改Webpack配置(例如,添加新的加载程序或更改现有加载程序的配置等)。vue-cli确实公开了一些实现此操作的方法,但是您不能从一开始就完全控制Webpack的构建。我通常对如何构建Web应用程序有非常具体的要求,所以我选择DIY Webpack解决方案,这样我就可以完全控制构建的各个方面。如果你不想使用vue-cli,但仍然想使用webpack,那么至少我会建议以下软件包:
vue-cli
webpack
vue
vue-loader
.vue
babel-loader
file-loader
style-loader
css-loader
7gyucuyw2#
我在一个具有自定义Webpack配置的现有应用程序中使用不带Vue CLI的Vue 3,以下步骤对我很有效:安装版本3:
npm install --save vue@next
安装vue-loader(v16或更高版本)和新的模板编译器:
npm install --save-dev vue-loader@^16 @vue/compiler-sfc
Webpack配置:
const { VueLoaderPlugin } = require('vue-loader'); // load plugin //... module: { rules: [ { test: /\.vue$/, exclude: /(node_modules)/, use: [ { loader: 'vue-loader' } ] } ] }, plugins: [ new VueLoaderPlugin() ]
感谢Webpack for Vue 3提供的不使用CLI安装编译器的技巧;我在Vue 3文档中找不到它。
dsekswqp3#
是的,这是非常有可能的...事实上,直到最近,很多项目都没有这样做!
lmvvr0a84#
是的。你可以在没有Vue CLI的情况下将Vue功能添加到现有项目中。最好是使用Webpack作为捆绑器的项目...这样就很简单了。您需要3个软件包:vue@next、@vue/compiler-sfc和vue-loader,并在webpack.config.js文件中添加一些规则配置。注意!在编写时,您不能选择最新的官方vue加载程序,因为它仍然依赖于vue模板编译器(在Vue 2中使用)。您需要强制安装v16+(我使用vue加载程序16.8.3)以及最新的Vue v.3(3.2.28)...在这里您可以阅读如何做的详细描述。
xesrikrc5#
如果你愿意在浏览器支持的JavaScript的限制下工作,你根本不需要任何构建工具。onboarding guide根本不使用vue-cli、webpack甚至Node。我的第一个重要的Vue应用程序确实使用了webpack,但没有使用vue-cli。它是根据当时的how-to建议手动配置的。Vue-cli可以方便地快速启动和运行构建过程,但它针对那些非常熟悉节点构建工具或不想过多使用默认值的人进行了优化。
bihw5rsg6#
是的,vue-cli包括webpack来构建资产。现在,vue.js做同样的事情。https://github.com/vuejs/vue/blob/dev/package.json这里是Vue.js的package.json,您可以看到webpack是必需的。因此,默认情况下,Webpack包含在Vue.js中
a2mppw5e7#
请使用create-vue。
npm init vue@latest project-name
或在当前目录中
npm init vue@latest .
7条答案
按热度按时间zujrkrfu1#
是的,当然。
vue-cli
在底层使用webpack,但它通过一个合理的默认值抽象化了所有繁琐的webpack配置,这样您就可以专注于编写应用程序。如果您需要更改应用程序的构建方式,例如您希望压缩图像资产,那么除非
vue-cli
为您的特定需求提供了配置选项,否则您将不得不以某种方式更改Webpack配置(例如,添加新的加载程序或更改现有加载程序的配置等)。vue-cli
确实公开了一些实现此操作的方法,但是您不能从一开始就完全控制Webpack的构建。我通常对如何构建Web应用程序有非常具体的要求,所以我选择DIY Webpack解决方案,这样我就可以完全控制构建的各个方面。
如果你不想使用
vue-cli
,但仍然想使用webpack,那么至少我会建议以下软件包:webpack
vue
vue-loader
,用于编译和绑定.vue
单个文件组件babel-loader
用于转换JavaScriptfile-loader
用于映像资产style-loader
,用于在运行时将样式注入DOMcss-loader
,用于加载CSS文件中引用的模块,如图像和字体7gyucuyw2#
我在一个具有自定义Webpack配置的现有应用程序中使用不带Vue CLI的Vue 3,以下步骤对我很有效:
安装版本3:
安装
vue-loader
(v16或更高版本)和新的模板编译器:Webpack配置:
感谢Webpack for Vue 3提供的不使用CLI安装编译器的技巧;我在Vue 3文档中找不到它。
dsekswqp3#
是的,这是非常有可能的...事实上,直到最近,很多项目都没有这样做!
lmvvr0a84#
是的。你可以在没有Vue CLI的情况下将Vue功能添加到现有项目中。最好是使用Webpack作为捆绑器的项目...这样就很简单了。
您需要3个软件包:vue@next、@vue/compiler-sfc和vue-loader,并在webpack.config.js文件中添加一些规则配置。
注意!在编写时,您不能选择最新的官方vue加载程序,因为它仍然依赖于vue模板编译器(在Vue 2中使用)。您需要强制安装v16+(我使用vue加载程序16.8.3)以及最新的Vue v.3(3.2.28)...
在这里您可以阅读如何做的详细描述。
xesrikrc5#
如果你愿意在浏览器支持的JavaScript的限制下工作,你根本不需要任何构建工具。onboarding guide根本不使用vue-cli、webpack甚至Node。
我的第一个重要的Vue应用程序确实使用了webpack,但没有使用vue-cli。它是根据当时的how-to建议手动配置的。
Vue-cli可以方便地快速启动和运行构建过程,但它针对那些非常熟悉节点构建工具或不想过多使用默认值的人进行了优化。
bihw5rsg6#
是的,vue-cli包括webpack来构建资产。现在,vue.js做同样的事情。https://github.com/vuejs/vue/blob/dev/package.json这里是Vue.js的package.json,您可以看到webpack是必需的。
因此,默认情况下,Webpack包含在Vue.js中
a2mppw5e7#
2022年9月更新
请使用create-vue。
或在当前目录中