Vue 单文件组件环境配置、开发和运行_书院二层楼的博客

运行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`