摘要：简介以前文件的组织是以以及这些文件进行垂直分割的，而中我们以组件为单位构造，因此，最好的方式是把这些不同的类型的文件与组件相关的部分，围绕组件组合成一个文件即文件，我称其为水平分割。一个例子这里是官网上一个单文件多层组件的示例。
简介
以前文件的组织是以.HTML、.js以及.css/less/scss这些文件进行垂直分割的，而Vue中我们以组件为单位构造，因此，最好的方式是把这些不同的类型的文件与组件相关的部分，围绕组件组合成一个文件即.vue文件，我称其为水平分割。另外，在中写模板也比原来的字符串形式的模板方便的多。
在webpack里面要加载*.vue文件，需要下面两个包
$npm install vue-loader vue-template-compiler
webpack添加Loader配置
{
test: /.vue$/,
use: [
"vue-loader"
]
}
......
resolve: {
extensions: [".js", ".vue"],
alias: {
"Vue": "vue/dist/vue.js"
}
}
webpack的resolve选项，用来配置解析import、require中的路径的细节，extensions就是在某文件没写扩展名时，默认的寻找扩展名。如import App from "./App"中，没有App.js就找App.vue。alias是给路径起个别名，方便一点，如import Vue from "Vue"即表示import Vue from "vue/dist/vue.js"
然后就可以编写代码了
{{heading}}
//index.js
import Vue from "Vue"
import App from "./App"
new Vue({
el: "#app-1",
template: "
文件App.vue即所谓的单文件组件，我们看到了模板、样式和JS是如何水平分割的。
还有要注意的是，页面原始的将会被组件替换掉。
模板写在如下内容中:
JS写在如下内容中：
css写在如下内容中:
我们在index.js中引用这个App.vue文件组件，这里让它作为实例#app-1的子组件引入，也可以使用渲染函数使用它。
一个例子这里是官网上一个单文件多层组件的示例。App2.vue
在子组件BaseInputText.vue中，有如下代码
这里在无参的v-on中绑定了一个事件对象，该对象中除了有必须的input事件，并与this.$listeners合并，this.$listeners包含了该子组件的所有下层组件（如果有的话）中的自定义事件。
就像示例中所做的那样，属性和方法都集中在上层的组件中，这里是TodoList.vue组件，通过Props下发数据到子组件。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/93829.html
摘要：两个同级组件之间传递数据，通过传递数据。准备工作，我新建了个文件，分别是实例根组件，包含和组件的父组件，的同级组件父组件向子组件传递数据，通过传递数据。 Vue 的单文件组件在使用 Vue 时非常常用，所以我们也会经常遇到组件之间需要传递数据的时候，大致分为三种情况： 父组件向子组件传递数据，通过 props 传递数据。 子组件向父组件传递数据，通过 events 传递数据。 两...
摘要：但是，面对辣么多的配置文件，还是从开始自己来吧，毕竟我只想打包一个组件。这里想一下我们的需求，我们想要打包一个组件，使用，根据上面的说明，不难想到还应该需要一个可以用来识别并转换文件，一句话，就是把按下面格式的编写的组件转换为模块。 对于vue单文件组件的使用，我们知道使用vue-cli可以快速生成项目结构，进行.vue单文件组件的编写，使用 npm run build命令会从main...
摘要：但是，面对辣么多的配置文件，还是从开始自己来吧，毕竟我只想打包一个组件。这里想一下我们的需求，我们想要打包一个组件，使用，根据上面的说明，不难想到还应该需要一个可以用来识别并转换文件，一句话，就是把按下面格式的编写的组件转换为模块。 对于vue单文件组件的使用，我们知道使用vue-cli可以快速生成项目结构，进行.vue单文件组件的编写，使用 npm run build命令会从main...
摘要：但是，面对辣么多的配置文件，还是从开始自己来吧，毕竟我只想打包一个组件。这里想一下我们的需求，我们想要打包一个组件，使用，根据上面的说明，不难想到还应该需要一个可以用来识别并转换文件，一句话，就是把按下面格式的编写的组件转换为模块。 对于vue单文件组件的使用，我们知道使用vue-cli可以快速生成项目结构，进行.vue单文件组件的编写，使用 npm run build命令会从main...
摘要：本文以及后面相应文章，主要是相关技术栈来快速的实现单页应用开发。原文出处其他使用快速开发单页应用主体结构使用快速开发单页应用使用快速开发单页应用登录页面使用快速开发单页应用功能组件与路由组件通信 本文所涉及代码全在vue-cnode 单页应用，即在一个页面集成系统中所有功能，整个应用只有一个页面。因为路由的控制在前端，单页面应用在页面切换时比传统页面更快，从而在前端体验更好。 将逻辑从...
阅读 685·2021-11-18 10:02
阅读 3534·2021-09-02 10:21
阅读 1710·2021-08-27 16:16
阅读 2041·2019-08-30 15:56
阅读 2334·2019-08-29 16:53
阅读 1356·2019-08-29 11:18
阅读 2914·2019-08-26 10:33
阅读 2623·2019-08-23 18:34
