[Webpack] Use Vue in webpack

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.

1. By default webpack cannot pack .vue files, you need to install the relevant loadernpm i vue-loader vue-template-compiler -D
2. Added loader configuration item in webpack.config.js configuration file{ test:/\.vue$/,use:'vue-loader' }
3. 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

1. Install the vue package:npm i vue -S
2. 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
3. In main.js, import the vue module import Vue form 'vue'(the one obtained is a constructor, the first letter is best capitalized)
4. Define a component ending in .vue, where the component consists of three parts:

<template>
</template>

<script>
</script>

<style>
</style>

5. Use import to import this componentimport login from './login.vue'
6. Create an instance of vm let vm = new Vue({el:"#app",render:c=>c(login)})
7. Create a div element with the id app on the page as the area to be controlled by our vm instance

Package search rules

1. Find if there is a node_modules folder in the project root directory
2. Find the corresponding vue folder according to the package name in node_modules
3. Find a package configuration file called package.json in the vue folder
4. Find a main attribute in the package.json file (the main attribute specifies the entry file for this package when it is loaded)