Vue单文件组件的基本用法

Vue单文件组件

传统组件的问题和解决方案

• 传统组件的问题

  • 全局定义的组件必须保证组件的名称不重复
  • 字符串模板缺乏语法高亮，在HTML有多行的时候，需要用到丑陋的\
  • 不支持CSS意味着当HTML和Javascript组件化时，CSS明显被遗漏
  • 没有构建步骤限制，只能使用HTML和ES5 Javascript，而不能使用预处理器(如：Babel)

• 解决方案

  • 针对传统组件的问题，Vue提供了一个解决方案，使用Vue单文件组件

Vue单文件组件的基本用法

• 单文件组件的组成结构
  • template 组件的模板区域
  • script 业务逻辑区域
  • style 样式区域

<template>
  <!-- 这里用于定义Vue组件的模板内容 -->
</template>
<script>
  // 这里用于定义vue组件的业务逻辑
  export default {
    data (){return {}},  // 私有数据
    methods: {} // 处理函数
    // ...其他业务逻辑
  }
</script>
<style scopes>
  /* 这里用于定义组件的样式 */
</style>

• 入口函数引入

  • import App from './components/App.vue'

• webpack中配置vue组件的加载器

  • 运行npm i vue-loader vue-template-compiler -D命令
  • 在webpack.config.js配置文件中，添加vue-loader的配置项如下

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

• 在webpack项目中使用vue
  • 运行npm i vue -S安装vue
  • 在src -> index.js入口文件中，通过import Vue from 'vue'来导入vue构造函数
  • 创建vue的实例对象，并指定要控制的el区域
  • 通过render函数渲染App根组件

// 入口函数 index.js
// 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)
})

• webpack打包发布
  • 上线之前需要通过webpack将应用进行整体打包，可以通过package.json文件配置打包命令
  • 运行命令 npm run build 进行打包操作
  • 生成文件于 dist文件夹中

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