vue single file component

  • Suffix name:. vue, the file needs to be precompiled before it can be used in the browser
  • Note: the single file component depends on two packages, Vue loader / Vue template compiler
  • Installation: NPM I - D Vue loader Vue template compiler
<!-- App.vue Example code: -->
<template>
  <div>
    <h1>VUE Single file component example -- App.vue</h1>
    <p>This is the template content</p>
  </div>
</template>

<script>
  // Logical code in component
  export default {}
</script>

<style>
/* Component style */
h1 {
  color: red;
}
</style>
// webpack.config.js configuration:
module: {
  rules: [
    {
      test: /\.vue$/,
      loader: 'vue-loader'
    }
  ]
}

Use single file components

/* main.js */

import Vue from 'vue'
// Import App components
import App from './App.vue'

const vm = new Vue({
  el: '#app',
  // Render App components through the render method
  render: c => c(App)
})

Use steps of single file component

  • 1 installation: NPM I - D Vue loader Vue template compiler
  • 2 configure the loader of the. vue file in webpack.config.js
    • { test: /.vue$/, use: 'vue-loader' }
  • 3. Create a single file component of App.vue. Note: App can be any name
  • 4 in the main.js entry file, import the Vue and App.vue components, and hang the components and instances together through the render

Single file component + routing

import Vue from 'vue'
import App from './App.vue'

// -------------vue route configuration start--------------
import Home from './components/home/Home.vue'
import Login from './components/login/Login.vue'

// 1 import routing module
import VueRouter from 'vue-router'
// 2 call use method to use plug-in
Vue.use(VueRouter)
// 3 Create routing object
const router = new VueRouter({
  routes: [
    { path: '/home', component: Home },
    { path: '/login', component: Login }
  ]
})

// -------------End of vue routing configuration--------------

const vm = new Vue({
  el: '#app',
  render: c => c(App),
  // 4 mount to vue instance
  router
})

Tags: Vue npm Webpack

Posted on Sat, 16 May 2020 08:54:16 -0700 by ldsmike88