Làm thế nào sử dụng bộ nạp-vue mà không cần vue-cli

Question

Tôi đang cố gắng tổng hợp một ví dụ tối thiểu tuyệt đối của một dự án Vue sử dụng gói web để chuyển các tệp .vue.

Mục tiêu của tôi là hiểu từng bước xây dựng một cách chi tiết. Hầu hết các hướng dẫn đều khuyên sử dụng vue-cli và sử dụng cấu hình webpack-simple. Và mặc dù thiết lập đó hoạt động, có vẻ như quá mức cần thiết cho mục đích đơn giản của tôi. Bây giờ tôi không muốn babel, linting hoặc một máy chủ web sống với tải lại mô-đun nóng.

Ví dụ tối thiểu chỉ với import Vue from 'vue' hoạt động! Webpack biên dịch thư viện vue và mã của riêng tôi thành một gói.

Nhưng bây giờ, tôi muốn thêm vue-loader vào cấu hình webpack, để các tệp .vue sẽ bị chuyển đổi. Tôi đã cài đặt vue loader:

npm install vue-loader 
npm install css-loader 
npm install vue-template-compiler 

Và tôi đã thêm vue-loader để cấu hình 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' 
    } 
    } 
}; 

Tôi đã tạo ra hello.vue

<template> 
    <p>{{greeting}} World</p> 
</template> 

<script> 
export default { 
    data:function(){ 
     return { 
      greeting:"Hi there" 
     } 
    } 
} 
</script> 

Và trong ứng dụng của tôi của tôi nhập 'hello'

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!") 
     } 
    }) 

Th e nạp dường như không nhặt .vue file, tôi nhận được lỗi:

Module not found: Error: Can't resolve './hello.js' 

EDIT

Khi cố gắng import hello from 'hello.vue' tôi nhận được lỗi:

Unknown custom element: <hello> - did you register the component correctly? 

Tôi có thiếu một bước? Tôi có đang nhập thành phần .vue đúng cách không? Làm cách nào để sử dụng thành phần hello.vue từ app.js?

Answer 1

Trước tiên, bạn không nhập tệp chính xác. Bạn nên nhập nó như sau:

import Hello from './hello.vue' 

Thứ hai, sau khi bạn nhập thành phần, bạn sẽ vẫn cần đăng ký bằng cách nào đó. Hoặc làm điều này trên toàn cầu Vue.component('hello', Hello), hoặc trên dụ Vue:

new Vue({ 
    el: '#app', 
    template:`<div><hello></hello></div>`, 
    components: { 'hello': Hello }, 
    created: function() { 
    console.log("Hey, a vue app!") 
    } 
}) 

---

Là một mặt lưu ý, nếu bạn muốn để có thể nhập khẩu các tập tin mà không cần phải ghi rõ phần mở rộng .vue, bạn có thể xác định rằng Mở rộng .vue trong tệp cấu hình của bạn.

Trong trường hợp đó, các đối tượng resolve trong tập tin cấu hình của bạn sẽ giống như thế này:

resolve: { 
    alias: { 
    'vue$': 'vue/dist/vue.esm.js' 
    }, 
    extensions: ['.js', '.vue', '.json'] 
} 

Here's the documentation on resolve.extensions.