vue——单文件组

2.单文件组件是什么

• .vue文件，称为单文件组件，是Vue定义的一种文件格式，一个文件就是一个组件，在文件内封装了组件相关HTML、CSS和JS代码
• .vue文件中包含<template>、<style>、<script&gt三种标签;

<template>
  html标签
</template>
<style>
  CSS代码
</style>
<script>
  JS脚本
</script>

• JS脚本中组件导出方式:export default{}

  export default {
    data:function(){
      return {}
    },
    methods:{}
  }

案例演示

3.vue-loader

• 浏览器不能识别.vue文件，必须对.vue进行加载解析
• vue-loader是基于webpack的
• 使用步骤
  • 安装vue-loader,vue-template-compiler模块
  • 不再使用vue.js导入的方式，可以直接导入vue模块

    import Vue from 'vue'
  

  • 配置webpack文件

    const VueLoaderPlugin = require('vue-loader/lib/plugin')
    plugins:[
    	new VueLoaderPlugin()
    ],
      rules:
    [
      {test:/\.vue$/i,use:['vue-loader']}
    ]
    
  

  案例演示
• 使用路由
  • npm安装vue-router模块
  • 导入并配置路由

    import VueRouter from 'vue-router'
    Vue.use(VueRouter)
  

案例演示