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. CBV源码分析+APIVIew源码分析

    {drf,resful,apiview,序列化组件,视图组件,认证组件,权限组件,频率组件,解析器,分页器,响应器,URL控制器,版本控制} 一.CBV源码分析准备工作: 新建一个Django项目 写 ...

  2. Ubuntu中MySql的启动与关闭

    安装mysql sudo apt-get install mysql-server sudo apt install mysql-client sudo apt install libmysqlcli ...

  3. HTML5 & tel & make a phone call

    HTML5 & tel & make a phone call 咋呼叫呀,网页怎么打电话? { key: "exploreCorpPhone", title: &q ...

  4. JQ remove()方法实现似收货地址逐一删除的效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 关于SQL查询语句中的LIKE模糊查询的解释

    LIKE语句的语法格式为: select * from 表名 where 字段名 like 对应值(字符串) 注:主要是针对字符型字段的,它的作用是在一个字符型字段列中检索包含对应字符串的. 下面列举 ...

  6. Java调用.NET 的Web Service服务故障排除

    参考路径:http://blog.sina.com.cn/s/blog_4c925dca01014y3r.html

  7. linux读取Windows的txt文件问题

    问题:Windows下生成的txt文件,在Linux下读取时会读取到多余字符(如: ^M) 原因:Windows和Linux下的换行符不一致 解决:在Linux代码中将多余字符去掉 ) buf = b ...

  8. CSS3 flexbox 布局 ---- flex 容器属性介绍

    flexbox布局是CSS3中新增的属性,它可以很轻松地帮我们解决掉一些常见的布局问题,比如导航栏. 我们用普通的方法写导航栏,通常会在ul, li 结构写好后,让li 元素左浮动,然后再给ul 清浮 ...

  9. codeforces285C

    Building Permutation CodeForces - 285C Permutation p is an ordered set of integers p1,  p2,  ...,  p ...

  10. 适用于Centos6.x系统的15项优化脚本

    1#!/bin/bash 2# Date: 2018-6-8 3#version:1.2 4#实现功能:一键系统优化15项脚本,适用于Centos6.x 5###################### ...