如何在没有 vue-cli 的情况下使用 vue-loader
Posted
技术标签:
【中文标题】如何在没有 vue-cli 的情况下使用 vue-loader【英文标题】:How use vue-loader without vue-cli 【发布时间】:2018-03-11 15:24:45 【问题描述】:我正在尝试将使用 webpack 转换 .vue 文件的 Vue 项目的绝对最小示例放在一起。
我的目标是详细了解每个构建步骤。大多数教程建议使用vue-cli
并使用webpack-simple
配置。尽管该设置有效,但对于我的简单目的来说似乎有点过分了。现在我不想要 babel、linting 或带有热模块重新加载的实时 Web 服务器。
仅使用import Vue from 'vue'
的最小示例有效! Webpack 将 vue 库和我自己的代码编译成一个包。
但是现在,我想将 vue-loader 添加到 webpack 配置中,以便 .vue
文件将被转译。我已经安装了 vue 加载器:
npm install vue-loader
npm install css-loader
npm install vue-template-compiler
我已经将 vue-loader 添加到 webpack 配置中:
var path = require('path')
module.exports =
entry: './dev/app.js',
output:
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
,
module:
rules: [
test: /\.vue$/,
loader: 'vue-loader',
options:
loaders:
]
,
resolve:
alias:
'vue$': 'vue/dist/vue.esm.js'
;
我已经创建了 hello.vue
<template>
<p>greeting World</p>
</template>
<script>
export default
data:function()
return
greeting:"Hi there"
</script>
在我的应用程序中,我导入“你好”
import Vue from 'vue'
import hello from "./hello.vue";
new Vue(
el: '#app',
template:`<div><hello></hello></div>`,
created: function ()
console.log("Hey, a vue app!")
)
加载器似乎没有拾取.vue
文件,我收到错误:
Module not found: Error: Can't resolve './hello.js'
编辑
尝试import hello from 'hello.vue'
时出现错误:
Unknown custom element: <hello> - did you register the component correctly?
我错过了一步吗?我是否以正确的方式导入 .vue 组件?如何使用 app.js 中的 hello.vue 组件?
【问题讨论】:
可以添加错误吗? 您实际上是在哪里尝试导入.vue
文件?是的,请分享您遇到的错误。
我已经编辑了问题,当我尝试从 .vue 文件中 import
代码时,找不到此代码。
是的,坚持使用 vue-cli(在他们的文档中)很烦人。例如,我使用 laravel-mix 编译 .vue 和一个快速简单的 webpack API。
【参考方案1】:
首先,您没有正确导入文件。你应该像这样导入它:
import Hello from './hello.vue'
其次,在您导入组件后,您仍然需要以某种方式注册它。要么在全局 Vue.component('hello', Hello)
上执行此操作,要么在 Vue 实例上执行此操作:
new Vue(
el: '#app',
template:`<div><hello></hello></div>`,
components: 'hello': Hello ,
created: function ()
console.log("Hey, a vue app!")
)
附带说明,如果您希望能够在不指定 .vue
扩展名的情况下导入文件,则可以指定应在配置文件中解析 .vue
扩展名。
在这种情况下,您的配置文件中的 resolve
对象应如下所示:
resolve:
alias:
'vue$': 'vue/dist/vue.esm.js'
,
extensions: ['.js', '.vue', '.json']
Here's the documentation on resolve.extensions
.
【讨论】:
非常感谢,我错过了使用Vue.component('hello', Hello)
注册组件,现在开始有意义了... :)【参考方案2】:
除了@thanksd 回答:
从 vue-loader v15 开始,需要一个插件:
// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports =
module:
rules: [
// ... other rules
test: /\.vue$/,
loader: 'vue-loader'
]
,
plugins: [
// make sure to include the plugin!
new VueLoaderPlugin()
]
https://vue-loader.vuejs.org/guide/
【讨论】:
【参考方案3】:在此处与@lukebearden 和@thanksd 一起标记更多信息。从头开始设置一个 Vue 应用程序,它是基本的,我一路上撕掉了一些样式,因为我不想处理它:但它编译了那个 JS:
https://github.com/ed42311/gu-vue-app
可以确认插件,我还没有添加解析,但现在我会:)
如果您有任何想法,请告诉我。
【讨论】:
【参考方案4】:您可能需要注册该组件才能在另一个 Vue 组件中使用。在你的例子中,它会像
import Vue from 'vue'
import hello from "./hello.vue";
new Vue(
el: '#app',
template:`<div><hello></hello></div>`,
components:hello,
created: function ()
console.log("Hey, a vue app!")
)
【讨论】:
以上是关于如何在没有 vue-cli 的情况下使用 vue-loader的主要内容,如果未能解决你的问题,请参考以下文章
在 vue-cli 3.x 的 watch 模式下每个 webpack 自动构建后如何执行我自己的脚本?