Try to use Vue in webpack
Note: The Vue constructor imported using import Vue from 'vue' in webpack has incomplete functions. It only provides a runtime-only way, and it does not provide a way as in the web page.
- By default webpack cannot pack .vue files, you need to install the relevant loader
npm i vue-loader vue-template-compiler -D
- Added loader configuration item in webpack.config.js configuration file
{ test:/\.vue$/,use:'vue-loader' }
- In webpack, if you want to put a component on the page through vue to display, the render function in the vm instance can be implemented
Summarize
- Install the vue package:
npm i vue -S
- In webpack, it is recommended to use the component template file .vue to define the component, so you need to install a loader that can parse this file
npm i vue-loader vue-template-complier -D
- In main.js, import the vue module
import Vue form 'vue'
(the one obtained is a constructor, the first letter is best capitalized) - Define a component ending in .vue, where the component consists of three parts:
<template>
</template>
<script>
</script>
<style>
</style>
- Use import to import this component
import login from './login.vue'
- Create an instance of vm
let vm = new Vue({el:"#app",render:c=>c(login)})
- Create a div element with the id app on the page as the area to be controlled by our vm instance
Package search rules
- Find if there is a node_modules folder in the project root directory
- Find the corresponding vue folder according to the package name in node_modules
- Find a package configuration file called package.json in the vue folder
- Find a main attribute in the package.json file (the main attribute specifies the entry file for this package when it is loaded)