运行vue单文件
新建一个test.vue
.vue文件，称为单文件组件，是Vue.js自定义的一种文件格式，一个.vue文件就是一个单独的组件，在文件内封装了组件相关的代码：html、css、js
.vue文件由三部分组成：<template>、<style>、<script>
<template>
<h1>Hello Vue!</h1>
</template>
<script>
export default {
</script>
<style lang="scss" scoped>
</style>
运行test.veu
在test.vue当前路径运行：
vue serve test.vue
打开浏览器查看效果：
编译vue文件
在test.vue当前路径运行：
vue build test.vue
编译完成文件：
单
文件
组件
是在
开发
中用的比较多的，它的后缀都是.
vue
结尾的既然是.
vue
结尾，那么直接给浏览器是不能
运行
的，.
vue
文件
是
vue
团队打造的特殊
文件
，想让.
vue
文件
让浏览器识别并且
运行
，需要对它进行处理加工成纯粹的js
文件
，那么浏览器就认识了常用的处理加工.
vue
文件
有两种方式1 借助webpack：自己找一些插件完成整个编译流程2 借助脚手架：这是
vue
官方提供的，它其实就是
vue
的团队拿着webpack打造完的流程和编译整个
环境
，我们直接拿来用即可。
1. 全局定义的
组件
必须保证
组件
的名称不重复；
2. 字符串模板缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 \；
3. 不支持 CSS 意味着当 HTML 和 JavaScript
组件
化时，CSS 明显被遗漏；
4. 没有构建步骤限制，只能使用 HTML 和 ES5 JavaScript，而不能使用预处理器（如：Babel）；
.
vue
文件
，称为
单
文件
组件
，是
Vue
.js自定义的一种
文件
格式，一个.
vue
文件
就是一个
单
独的
组件
，在
文件
内封装了
组件
相关的代码：html、css、js
vue
-loader
浏览器本身并不认为.
vue
文件
，所以必须对.
vue
文件
进行加载解析，此时需要
vue
-loader
类似的loader还有许多，如：html-loader、css-loader、style-loader、babel-loader等
需要注意的是
vue
-loader是基于webpack的webpack是一个前端资源模板化加载器和打包工具
webpack处理
vue
vue
单
文件
组件
的介绍
single-file components(
单
文件
组件
) ，
文件
扩展名为 .
vue
的
文件
，需要安装vetur插件
以前定义
组件
非常麻烦, 需要写 template模板, 在里面需要写模板字符串, 但有了
单
文件
组件
就不用了
单
文件
组件
文档
完整语法高亮
CommonJS 模块
组件
作用域的 CSS
单
文件
组件
的结构说明
<template>
<h1>这是
单
文件
组件
的模板内容</
grammar_cjkRuby: true
SCF指定位置挂载(延迟挂载)
当使用
Vue
的自定义
组件
,做类似于JQuery那种现在js新建节点,然后加到页面指定位置,发现无法像JQuery那样,直接使用下面这种就能加载到指定位置
$("<div><...
文章目录1.
组件
与模块1.1 模块1.2
组件
1.3 模块化与
组件
化2. 非
单
文件
组件
的使用2.1 data与el的两种写法2.2 使用
组件
的步骤2.3 使用
组件
的注意项2.4
组件
嵌套2.5
Vue
component2.6
Vue
实例与
组件
的关系3.
单
文件
组件
的使用3.1 认识3.2
文件
结构4.
组件
间操作4.1 ref属性4.2 props
配置
4.3 mixin混入4.4 插件4.5 scoped样式4.6 自定义事件4.7 全局事件总线4.8 消息订阅与发布4.9 `nextTick`
