运行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那样,直接使用下面这种就能加载到指定位置 $("&lt;div&gt;&lt;... 文章目录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`