Vue单文件组件

单文件组件的组成结构

• 传统的Vue组件的缺陷

  • 问题
    • 全局定义的组件名称不能重名
    • 字符串模板缺乏语法高亮
    • 不支持css（当html和js组件化时，css没有参与其中）
    • 没有构建步骤限制，只能使用H5和ES5，不能使用预处理器（babel）
  • 解决方案
    • 使用Vue单文件组件，每个单文件组件的后缀名都是 .Vue

• Vue单文件组件由三部分组成

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

• Vue单文件组件的使用

  • <template>
    
       这里是Vue组件的模板内容 (html代码区域)
    
    </template>
    
    <script>
    
       // js代码区域
        export default{
         data:(){ 
             return{ } //数据区
           }，
         methods:{}  //处理函数
         .....   // 其他业务逻辑
       }
    
    </script>
    
    <style scoped>
    
       /* 样式代码区域*/
    
    </style>
    

    • export default暴露对象数据
    • coped：防止组件样式之间的冲突问题
      • scope：区域，局部的意思
      • style添加scoped就是私有样式，局部样式

• 配置.vue文件的loader加载器

  • 配置vue组件的加载器

    1. 安装vue组件的加载器 npm install vue-loader vue-template-compiler -D
    2. 在webpack.config.js配置文件中，添加vue-loader的配置项如下 
        const VueLoaderPlugin = require("vue-loader/lib/plugin");
         module.exports = {
                 // 引入这个vue的加载器插件
                plugins:[ new VueLoaderPlugin()],
                   
                     //所有的第三方文件模块的匹配规则
                      module : {
                         rules:[
                           {  test:/\.vue$/, loader:"vue-loader"}
                         ]
                       }
                    }
    

• 在webpack项目中使用vue单文件

  • 步骤

    1. 运行  npm install vue -S  安装 Vue
    2. 在 src -> index.js入口文件中，通过 import Vue from "vue" 来导入Vue构造函数
    3. 创建Vue实例对象并指定要控制的el区域
    4. 通过 render函数渲染单文件组件  如下 
       // 导入 Vue构造函数
       import Vue from "vue"
      // 导入 veu的单文件 比如 components/App.vue
       import APP from 'components/App.vue'
         const vm= new Vue（{
          // 指定vm实例要控制的页面区域
            el:"#app"，
          //通过 render函数，把指定的组件渲染到el区域中
            render：h=>h（APP) 
         }）
    
    
    

  • 说明：render是一个方法，是由vue创建的一个节点也是html模板，然后渲染（render）到指定的节点上

webpack打包发布

• 配置

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

  • 1. 在package.json文件中配置 webpack打包配置
    //该命令默认加载项目根目录中的webpack。config.js配置文件
    "scripts"：{
       //用于打包的命令
       "build"："webpack -p"
    }
    //执行命令 bu run build
    

    • -p：打包参数，package：打包
    • 执行 build命令，会执行webpack-p 进行打包，而打包会参照 webpack.config.js配置文件中的打包配置进行打包
    • 打包发布之后，会生成dist目录，有bundle.js与index.html文件

Vue脚手架与Element-UI组件库