Блог

Vue не импортирует содержимое моего компонента. Я импортирую Vue 3 по ссылке CDN в заголовке, а не как пакет NPM. Консоль браузера не показывает никаких ошибок/предупреждений.

В доме у меня есть:

 <div class="todo-app">
   <h1>My Todo List</h1>
   <todolist></todolist>
</div>
 

Ниже приведены некоторые фрагменты.

App.js

 import App from './components/App.vue';
Vue.createApp(App).mount('#vue-todo-app');
 

/компоненты/Приложение.vue

 <template>
    <div class="todo-app">
        <h1>My Todo List</h1>
        <TodoList/>
    </div>
</template>

<script>
import TodoList from './TodoList.vue'

export default {
    name: 'App',
    components: {
        TodoList
    }
}
</script>
 

/компоненты/ToDoList.vue

 <template>
    <div>
        <BaseInputText 
            v-model="newTodoText"
            placeholder="New todo"
            @keydown.enter="addTodo"
        />
        <ul v-if="todos.length">
            <TodoListItem
                v-for="todo in todos"
                :key="todo.id"
                :todo="todo"
                @remove="removeTodo"
            />
        </ul>
        <p v-else>
            Nothing left in the list. Add a new todo in the input above.
        </p>
    </div>
</template>

<script>
import BaseInputText from './BaseInputText.vue'
import TodoListItem from './TodoListItem.vue'

let nextTodoId = 1

export default {
    name: 'TodoList',
    components: {
        BaseInputText, TodoListItem
    },
    data () {
        return {
                newTodoText: '',
        todos: [
                    {
                        id: nextTodoId  ,
                        text: 'Learn Vue'
                    },
                    {
                        id: nextTodoId  ,
                        text: 'Learn about single-file components'
                    },
                    {
                        id: nextTodoId  ,
                        text: 'Read Metro 2033'
                    }
                ]
        }
    },
    methods: {
        addTodo () {
            const trimmedText = this.newTodoText.trim()
            if (trimmedText) {
                this.todos.push({
                    id: nextTodoId  ,
                    text: trimmedText
                })
                this.newTodoText = ''
            }
        },
        removeTodo (idToRemove) {
            this.todos = this.todos.filter(todo => {
                return todo.id !== idToRemove
            })
        }
    }
}
</script>
 

/config/webpack.vue.config.js

 const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');

module.exports = function (env) {
    return {
        mode: env.environment,
        entry: [require.resolve('core-js/stable'), require.resolve('regenerator-runtime/runtime'), './www/vue/todolist/App.js'],
        module: {
            rules: [
                {
                    test: /.vue$/,
                    loader: 'vue-loader',
                    options: {
                        compilerOptions: {
                          compatConfig: {
                            MODE: 2
                          }
                        }
                    }
                },
                {
                    test: /.js$/,
                    loader: 'babel-loader',
                    exclude: /node_modules/
                }
            ]
        },
        resolve: {
            alias: {
                'vue': '@vue/compat'
            },
        },
        output: {
            path: path.join(__dirname, '../www'),
            filename: './vue/src/todolist.min.js',
        },
        plugins: [
            new VueLoaderPlugin()
        ]
    }
};
 

пакет.json

 ...
  "scripts": {
    "build": "webpack --config ./config/webpack.vue.config.js --env environment=production"
  },
  "dependencies": {
    "@vue/compat": "^3.1.5",
    "@vue/compiler-sfc": "^3.1.5",
    "core-js": "^3.16.0",
    "regenerator-runtime": "^0.13.9",
    "style-loader": "^0.21.0",
    "uglify-js": "^3.3.28",
    "vue-loader": "^16.0.0",
    "vuex": "^4.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.14.8",
    "@babel/plugin-proposal-object-rest-spread": "^7.14.7",
    "@babel/plugin-transform-object-assign": "^7.14.5",
    "@babel/preset-env": "^7.14.9",
    "babel-loader": "^8.2.2",
    "webpack": "^5.47.1",
    "webpack-cli": "^4.7.2"
  }
...