美文网首页
单文件的使用

单文件的使用

作者: cj_jax | 来源:发表于2019-01-04 23:37 被阅读0次

单文件组件

概述

以 .vue 作为后缀名的文件,就是 Vue 中的单文件组件

组件的组成

由 三部分 组成: template 模板/ script 代码逻辑/ style 样式

为什么要使用单文件组件

  • 1 原来我们使用全局组件或局部组件在使用模板的时候,是纯字符串
  • 2 一个组件是由 HTML、JS、CSS 样式组成的,但是,这三部分被分离了
  • 3 原来的方式,限制只能使用 HTML 和 ES5 JavaScript, 而不能使用预处理器,如 Pug 和 Babel 或 Less

使用单文件的步骤

  • 1.安装
  • 2.在webpack.config.js中添加loader规则配置和一个插件
  • 3.创建单文件的组件
  • 4.创建Vue的实例,再使用单文件组件
    4.1安装 npm i vue
    4.2 在main.js的文件中导入vue
    4.3创建vue实例
    4.4渲染App.vue单文件组件

相关文章

  • 单文件的使用

    单文件组件 概述 以 .vue 作为后缀名的文件,就是 Vue 中的单文件组件 组件的组成 由 三部分 组成: t...

  • vue-cli

    === 单文件组件结合webpack处理单文件组件配置webpack相关loader使用vue文件创建vue组件引...

  • NSFileManager文件管理

    文件: 文件夹(目录) 和 文件一、NSFileManager 单例类单例对象:用类方法 创建的 无论哪儿使用...

  • iOS 单例模式 - 单例对象销毁【GCD】

    单例对象的创建方式 单例.h 文件的实现 单例的.m 文件的实现 单例对象的销毁【GCD创建的方式】 使用单例对象...

  • 录入格式:(所有人必看!)

    基本格式: WPS使用方法: 交单格式: 打字单:以文件形式交单,!!!文件名:团队+日期+昵称+编号 例如:茶柚...

  • iOS单例创建

    常规的创建单例 .h文件中 .m文件 使用GCD写 .h中 .m文件中

  • go实现多文档yaml文件解析问题

    go解析yaml文件,如果是单文档类似下图: 直接使用 如果使用"---"分割的多文档yaml文件,类似下文件 解...

  • python单例模式

    python单例模式实现方式 使用模板 python模块是天然的单例模式(.pyc文件的存在) 使用__new__...

  • Vue组件化开发 (单文件组件)

    单文件组件 1、单文件组件 1.在很多 Vue 项目中,我们使用 Vue.component 来定义全局组件,紧接...

  • swiper4.5.1在Vue中的应用

    swiper4在vue的应用 swiper4安装 swiper4在单文件组件中的使用 在单文件组件

网友评论

      本文标题:单文件的使用

      本文链接:https://www.haomeiwen.com/subject/fwplrqtx.html