学习记录——Vue单文件组件

1. Vue单文件组件的基本用法

单文件组件的组成结构：

• template：组件的模板区域
• script：业务逻辑区域
• style：样式区域

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

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

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

2. webpack中配置vue组件的加载器

1. 运行npm i vue-loader vue-template-compiler -D命令

2. 在webpack.config.js配置文件中，添加vue-loader的配置项如下：

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

3. 在webpack项目中使用vue

1. 运行npm i vue –S安装vue

2. 在src -> index.js入口文件中，通过import Vue from 'vue'来导入vue构造函数

3. 创建vue的实例对象，并指定要控制的el区域

4. 通过render函数渲染App根组件

   // 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. webpack打包发布

上线之前需要通过webpack将应用进行整体打包，可以通过package.json文件配置打包命令：

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