Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Configure. Vue component page parsing in Webpack

  1. runyarn add vue -SInstall the VUE as a run dependency;
  2. runyarn add vue-loader vue-template-compiler -DInstall the parse transform VUE package as a development dependency;
  3. runyarn add style-loader css-loader -DInstall the package that parses and transforms CSS as a development dependency, because CSS styles are written in the.vue file;
  4. inwebpack.config.js“, add the followingmoduleRules:
module: {
    rules: [{test: /\.css$/, use: ['style-loader'.'css-loader'] {},test: /\.vue$/, use: 'vue-loader'}}]Copy the code
  1. createApp.jsComponent page
 <template>
   <! In a.vue component, the template must have a unique root element wrapped around it. Div is usually the only root element.
   <div>
     <h1>This is the APP component - {{MSG}}</h1>
     <h3>I am the h3</h3>
   </div>
 </template>
 <script>
 // Note: In the.vue component, using the script tag to define the behavior of the component, you need to export a vue instance object using the export default method provided in ES6
 export default {
   data() {
     return {
       msg: 'OK'}}}</script>
 <style scoped>
 h1 {
   color: red;
 }
 </style>
Copy the code
  1. createmain.jsEntrance to the file
 // Import Vue components
 import Vue from 'vue'
 // Import App components
 import App from './components/App.vue'
 // Create a Vue instance using the render function to render the specified component
 var vm = new Vue({
   el: '#app'.render: c= > c(App)
 });
Copy the code
  1. inindex.htmlAdd vUE control area to the page
  <div id="app"></div>
Copy the code

Use template objects in Vue projects built using WebPack

  1. inwebpack.config.jsaddresolveProperties:
resolve: {
extensions: ['.js'.'.vue'.'.json'].//
 alias: { // The configuration item maps the original import path to a new import path through an alias
   'vue$': 'vue/dist/vue.esm.js'}}Copy the code
  1. inwebpack.config.jsIn thepluginsConfigure the vUE plug-in:
const VueLoaderPlugin = require('vue-loader/lib/plugin');

plugins: [
  ...
  new VueLoaderPlugin(), // Configure vueloader plug-in
]
Copy the code

In the VUE component page, integrate the VUE-Router routing module

  1. runyarn add vue-router -SInstall the VUE as a run dependency;
  2. Import a routing module:
import VueRouter from 'vue-router'
Copy the code
  1. Installing the routing module:
Vue.use(VueRouter);
Copy the code
  1. Create a routing object using:
import Vue from 'vue'
import VueRouter from 'vue-router'

import login from './component/login.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [{path: '/'.redirect: '/login'},
    {path: '/login'.component: login},
  ]
})

export default router
Copy the code
  1. Mount the routing object to the Vue instance:
import router from './router.js'

var vm = new Vue({
  el: '#app',
  router,
  render: c= > c(App)
})
Copy the code
  1. Add in the app.vue componentrouter-view
<template>
  <div>
    <router-view></router-view>
  </div>
</template>
Copy the code