[英]How use vue-loader without vue-cli
我正在尝试将使用 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 组件?
首先,您没有正确导入文件。 你应该像这样导入它:
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']
}
除了@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()
]
}
在此处与 @lukebearden 和 @thanksd 一起标记更多信息。 从头开始设置一个 Vue 应用程序,它是基本的,我沿途删除了一些样式,因为我不想处理它:但它编译了 JS:
https://github.com/ed42311/gu-vue-app
可以确认一下插件,我还没有添加解析,但现在我会:)
如果您有任何想法,请告诉我。
您可能需要注册该组件以在另一个 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!")
}
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.