Learning record-Vue single file component

1. VueBasic usage of single file components

Composition structure of single file components:

• template: The template area of ​​the component
• script: Business logic area
• style: Style area

<template>
    <!-- 这里用于定义Vue组件的模板内容 -->
</template>

<script>
    // 这里用于定义Vue组件的业务逻辑
    export default {
     
     
        data: () {
     
     
            return {
     
     }
        }, // 私有数据
        methods: {
     
     } // 处理函数
        // ... 其它业务逻辑
    }
</script>

<style scoped>
    /* 这里用于定义组件的样式 */
</style>

2. The loader webpackof the configuration vuecomponent

1. Run npm i vue-loader vue-template-compiler -Dcommand

2. In the webpack.config.jsconfiguration file, the added vue-loaderconfiguration items are as follows:

   const VueLoaderPlugin = require('vue-loader/lib/plugin')
   module.exports = {
         
         
       module: {
         
         
           rules: [
               // ... 其它规则
               {
         
          test: /\.vue$/, loader: 'vue-loader' }
           ]
       },
       plugins: [
           // ... 其它插件
           new VueLoaderPlugin() // 请确保引入这个插件！
       ]
   }
   

3. webpackUse in the projectvue

1. Run npm i vue –Sinstallvue

2. In the src -> index.jsentry file, import Vue from 'vue'import the vueconstructor by

3. Create vuean instance object and specify the elarea to be controlled

4. renderRender the Approot component through a function

   // 1. 导入 Vue 构造函数
   import Vue from 'vue'
   
   // 2. 导入 App 根组件
   import App from './components/App.vue'
   
   const vm = new Vue({
         
         
       // 3. 指定 vm 实例要控制的页面区域
       el: '#app',
       // 4. 通过 render 函数，把指定的组件渲染到 el 区域中
       render: h => h(App)
   })
   

4. webpackPackage release

Before going online, webpackthe application needs to be packaged as a whole, and the package.jsonpackaging command can be configured through the file:

// 在package.json文件中配置 webpack 打包命令
// 该命令默认加载项目根目录中的 webpack.config.js 配置文件
"scripts": {
    
    
    // 用于打包的命令
    "build": "webpack -p",
    // 用于开发调试的命令
    "dev": "webpack-dev-server --open --host 127.0.0.1 --port 3000",
},