1、assest:

图片等等......

2、components:

组件

3、App.vue:

根组件,三个部分:模板、行为(处理逻辑)、样式;

模板:

只能有一个根标签;

<HelloWorld/>

行为里面引入组建后,用这个标签来对它们之间产生关联;

行为:

import HelloWorld from './components/HelloWorld'

这是另外一个组件,用来关联组件,组件可以理解为一个功能的页面,项目都是由多组件来完成的;

export default{

  name:'app',

  components:{ HelloWorld,Home }

}

这里是注册组件;需要先引入组件,再注册,再写出来标签,才能真正产生关联;

4、main.js(重要):

跟index.html有直接的联系,当执行完index.html后紧接着执行的就是main.js;

import Vue from 'vue'

引入vue就可以在下面实例化出来

new Vue({

  el:'#app',  //el:element,'#app'就是index.html中的id=‘app’

  template:'<App/>',  //'<App/>'组件调用的标签

  components:{ App }  //调用App这个组件

})

Vue--的src文件的更多相关文章

  1. Vue 框架-11-介绍src文件流程及根组件app+HBuilder 配置

    Vue 框架-11-介绍src文件流程及根组件app+HBuilder 配置 这是上一篇对目录简单介绍: 关于编辑器,可以使用轻量级的 Sublime Text 3,我使用的是 HBuilder, 但 ...

  2. vue 构建项目 文件引入

    1.vue引用依赖文件.  举例:axios 先安装 axios.如果直接安装 vue-axios 会报错 npm install axios npm install --save axios vue ...

  3. 前端vue实现pdf文件的在线预览

    3.前端vue实现pdf文件的在线预览 我是通过 <iframe> 标签就可以满足我工作的 pdf预览需求 如果<iframe> 无法满足需求 , 可以使用pdf.js这个插件 ...

  4. vue打包dist文件时,图片找不到

    1.vue打包dist文件时,图片找不到,无法像在本地一样查看 问题描述: 本地代码:<div class="icon"><img :src="'../ ...

  5. vue中的文件上传和下载

    文件上传 vue中的文件上传主要分为两步:前台获取到文件和提交到后台 获取文件 前台获取文件,主要是采用input框来实现 <el-dialog :title="addName&quo ...

  6. VUE组件 单独文件封装

    https://www.cnblogs.com/SamWeb/p/6391373.html vuejs 单文件组件.vue 文件   vuejs 自定义了一种.vue文件,可以把html, css, ...

  7. Vue 多路由文件的合并

    Vue 多路由文件的合并 1.使用的是ES6 数组的合并方法 let routes = new Set([...routes1, ...homerouters]);2.两个路由文件,导出的实际上就是一 ...

  8. vue之element-ui文件上传

    vue之element-ui文件上传 文件上传需求 ​ 对于文件上传,实际项目中我们的需求一般分两种: 对于单个的文件上传,比如拖动上传个图片之类的,或者是文件. 和表单一起实现上传(这种情况一般都是 ...

  9. vue 设置头文件

    vue的头文件是在index.html文件中设置的,毕竟vue的入口 先说一下标签页的名字: 就是这个名字的设置,要想每个标签页的名字都不一样,需要做以下这三步:1. 首先,在index.html文件 ...

  10. vue 上传文件 和 下载文件

    Vue上传文件,不必使用什么element 的uplaod, 也不用什么npm上找的个人写的包,就用原生的Vue加axios就行了, 废话不多说,直接上代码:html: <input type= ...

随机推荐

  1. ORA-28000: the account is locked解决办法

    ORA-28000: the account is locked第一步:使用PL/SQL,登录名为system,数据库名称不变,选择类型的时候把Normal修改为Sysdba;第二步:选择myjob, ...

  2. mybatis源码分析(三)------------映射文件的解析

    本篇文章主要讲解映射文件的解析过程 Mapper映射文件有哪几种配置方式呢?看下面的代码: <!-- 映射文件 --> <mappers> <!-- 通过resource ...

  3. Flutter的输入框TextField

    TextFiled组件的API 先来看一下TextFiled的构造方法: const TextField({ Key key, this.controller, this.focusNode, thi ...

  4. 关于手机端适配的问题(rem,页面缩放)

    关于手机端适配的问题(rem,页面缩放) 96 进击的小前端 关注 2018.02.02 13:57 字数 320 阅读 19评论 0喜欢 0 相信很多和会和我碰到一样的情况,就是你用rem去写移动端 ...

  5. checkbox选中事件的正确写法

    判断选中CHECKBOX事件  网上各种扯淡 搞死我了..加上总觉得smarty引擎和JSJQ有很多冲突.. $("#id").is(":checked");

  6. ArcGIS DeskTop 10.2 的安装与破解

    ArcGIS DeskTop 10.2套件作为一组常用的ArcGIS软件为我们提供了对地图原始数据进行加工以及各种操作,通过这组软件我们能够很好地定制我们最终的地图样式,但是更多的时候我们需要对这组软 ...

  7. 集合之ArrayList(含JDK1.8源码分析)

    一.ArrayList的数据结构 ArrayList底层的数据结构就是数组,数组元素类型为Object类型,即可以存放所有类型数据.我们对ArrayList类的实例的所有的操作(增删改查等),其底层都 ...

  8. python设计模式第十七天【解释器模式】

    1.应用场景 (1)解释预先定义的文法 2.代码实现 #!/usr/bin/env python #!_*_ coding:UTF-8 _*_ from abc import ABCMeta, abs ...

  9. dbExpress操作中用TDBGrid显示数据

    由于一些数据感知组件如TDBGrid等是需要用到数据缓存的,这和dbExpress组件的存取机制是矛盾的.所以当打开数据集时会出现如下内容的警告框:“Operation not allowed on ...

  10. tensorflow点滴笔记

    1.模型保存 模型保存需要使用函数 tf.train.Saver(), a)创建saver时,可以指定需要存储的tensor,如果没有指定,则全部保存. b) 创建saver时,可以指定保存的模型个数 ...