源码地址：     https://github.com/liufeiSAP/vue2-manage

我们的目录结构：

目录/文件 说明
build 项目构建(webpack)相关代码.
config 配置目录，包括端口号默认配置.
node_modules npm 加载的项目依赖模块
　　src

我们的开发目录，基本上绝大多数工作都是在这里开展的

  • assets: 放置一些图片，如logo等。
  • components: 目录里面放了一个组件文件，可以不用。
  • App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。
  • main.js: 项目的核心文件。
　　static 资源目录，我们可以把一些图片啊，字体啊，放在这里。
　　test 初始测试目录，没用，删除即可
　　.xxxx文件 这些是一些配置文件，包括语法配置，git配置等。基本不用管，放着就是了
　　index.html 首页入口文件，如果是开发移动端项目，可以在head区域加上你合适的meta头
　　package.json 项目配置文件。前期基本不用管，但是你可以找一下相关的资料，学习一下里面的各项配置。至少，要知道分别是干嘛的。初期就不管了。
　　README.md 不用管

如上，基本上就是这么个情况。重要的，还是src文件夹。

Index.html

项目的首页入口文件，如下：body的app关联SRC/App.vue.

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>back-manage</title>

  </head>

  <body>

    <div id="app"></div>

  </body>

</html>

SRC:

     Aapp.vue

App.vue是我们的主组件，所有页面都是在App.vue下进行切换的。

.　 将html、js、css写到一个后缀名.vue的文件中，区分这三种类型用<template>、<script>、<style>，这个.vue文件在打包的过程中会被转换成浏览器能识别的传统html、js、css。

<template>

    <div id="app" class="fillcontain">

        <!-- 对应的组件内容渲染到router-view中 -->

        <router-view></router-view>

    </div>

</template>

<script>

    export default {

    }

</script>

<style lang="less">

    @import './style/common';

</style>
fillcontain是在  ./style/common 中定义的样式。

export default {}:  导出模块，提供给其他模块使用。 其他模块import的东西一定是要export的才能用。
<router-view></router-view>: 这块是渲染路由组件，看下面的解释。

  关于router : 

　　　　(1) 定义route,  两个部分组成： path和component。  path 指路径，component 指的是组件

　　　　　　const routes = [

  　　　　　　{ path: '/home', component: Home },

 　　　　　　 { path: '/about', component: About }

　　　　　　]
　　  (2) 创建router 对路由进行管理，它是由构造函数 new vueRouter() 创建，接受routes 参数。
　　　　　　　　const router = new VueRouter({

     　　　　  routes // routes: routes 的简写

　　　　　　})
     (3) 把router 实例注入到 vue 根实例中,就可以使用路由了
　　　　　　　　const app = new Vue({

 　　　　　　　　　　 router

　　　　　　　　}).$mount('#app')
     (4) 当用户点击 router-link 标签或超链接时，会去寻找它的 to 属性， 它的 to 属性和 js 中配置的路径{ path: '/home', component: Home} 
　　　　　　 path 一一对应，从而找到了匹配的组件， 最后把组件渲染到 <router-view> 标签所在的地方;
            <el-breadcrumb-item :to="{ path: '/manage' }">首页</el-breadcrumb-item>

       main.js：    主要作用是初始化vue实例（new VUE）并使用需要的插件

      vue 构造传入的参数有： 数据(data)，模板(tamplate)，挂载元素(el)，方法(methods)， 路由， store等

/*引入Vue框架*/

import Vue from 'vue'

import App from './App'

import router from './router'

import store from './store/'

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-default/index.css'

Vue.config.productionTip = false;

/*使用ElementUI(一个桌面端组件库)*/

Vue.use(ElementUI);

new Vue({

    el: '#app',             //   表示这个vue实例和DOM中ID是app的关联el是vue实例化的选项（index.xml），提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。

　　　　　　　　　　　　　　　　       可以是 CSS 选择器，也可以是一个 HTMLElement 实例。

    router,                 //   路由信息

    store,                  //   存储相关

    template: '<App/>',  　 //   <App />他就是App.vue，template就是选择vue实例要加载哪个模板。最新的vue-cli脚手架模板现在是这个形式。

                            //   App.vue是主程序，其他所有的.vue都是放在App.vue中，所以只需要加载App.vue就完全可以把其他的东西加载出来。

    components: { App } })  //   这个App表示的就是App.vue， 表示使用App.vue作为组件

总结： App.vue就是一个组件，里面有template的定义（其实就是HTML），script脚本行为，以及样式等；

　　    main.js 是实例化组件的地方，el指明了这个实例Vue挂载到什么dom元素下； template指明了显示什么；component指明了绑定哪个组件。

              

　　    

 

三 vue学习三 从读懂一个Vue项目开始的更多相关文章

  1. day 82 Vue学习三之vue组件

      Vue学习三之vue组件   本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给 ...

  2. day 83 Vue学习三之vue组件

    本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给大家介绍一下组件(componen ...

  3. 新手怎么读懂一个中型的Django项目

    [前言]中型的项目是比较多的APP,肯会涉及多数据表的操作.如果有人带那就最好了,自己要先了解基本的django框架(MTV ,ORM等)师傅可以给讲解一下框架怎么组织url.py,model.py, ...

  4. 读懂一个中型的Django项目

    转自https://www.cnblogs.com/huangfuyuan/p/Django.html [前言]中型的项目是比较多的APP,肯会涉及多数据表的操作.如果有人带那就最好了,自己要先了解基 ...

  5. Gradle学习系列之三——读懂Gradle语法

    在本系列的上篇文章中,我们讲到了创建Task的多种方法,在本篇文章中,我们将学习如何读懂Gradle. 请通过以下方式下载本系列文章的Github示例代码: git clone https://git ...

  6. Gradle学习系列之读懂Gradle语法

    转载地址: http://www.cnblogs.com/CloudTeng/p/3418072.html Gradle是一种声明式的构建工具.在执行时,Gradle并不会一开始便顺序执行build. ...

  7. 【Vue 入门】使用 Vue2 开发一个展示项目列表的应用

    前言 一直没有找到一个合适的展示个人项目的模板,所以自己动手使用 Vue 写了一个.该模板基于 Markdown 文件进行配置,只需要按一定规则编写 Markdown 文件,然后使用一个 在线工具 转 ...

  8. Vue学习【第一篇】：Vue初识与指令

    什么是Vue 什么是Vue Vue.js是一个渐进式JavaScript框架它是构建用户界面的JavaScript框架(让它自动生成js,css,html等) 渐进式:vue从小到控制页面中的一个变量 ...

  9. VUE -- 如何快速的写出一个Vue的icon组件？

    伴随着Vue的诞生,它似乎就被人寄予厚望,不仅仅是因为其轻量级的MVVM设计方式,而且其实现了组件化开发模式,所以越来越多的人会拿Vue和AngularJS.React Native做比较.具体关于它 ...

随机推荐

  1. C 标准库 - <stdlib.h>

    C 标准库 - <stdlib.h> 简介 stdlib .h 头文件定义了四个变量类型.一些宏和各种通用工具函数. 库变量 下面是头文件 stdlib.h 中定义的变量类型: 序号 变量 ...

  2. H2数据库集群

    H2数据库集群 1. H2数据库简单介绍 1.1 H2数据库优势 经常使用的开源数据库:H2,Derby,HSQLDB.MySQL,PostgreSQL. 当中H2,HSQLDB相似,十分适合作为嵌入 ...

  3. 几个关于tableView的问题解决方式整合

    近期遇到关于tableView的问题的整合.部分比較白痴.仅仅是初学easy犯~ 1.关于tableView左边空余15像素的问题. 2.关于tableView多余切割线隐藏的问题: 3.关于tabl ...

  4. Failure [INSTALL_FAILED_ALREADY_EXISTS]

    1.发生原因 做unity开发的同事说apk无法安装,要我帮忙看下,然后我通过命令adb install安装apk,出现此提示 2.解决过程 首先想到的仍然是安装包已存在的问题,结果使用清理类软件清理 ...

  5. python（14）- 简单练习：登录账户失败三次，账户自动锁定

    题目需求:   1.输入用户名密码   2.认证成功后显示欢迎信息   3.输错三次后锁定 #读取注册用户的信息,用户名,密码,输错次数,写入字典中 user={} with open("D ...

  6. HTML+CSS要点

    1.td占据多行 / 列时,其挤开的 td 不写(但是包裹 td 的 tr 要写) 2. display:td 的元素中的文本默认垂直不居中(table中的td中的文本是垂直居中的) 3.th虽然定义 ...

  7. 利用反射和泛型把Model对象按行储存进数据库以及按行取出然后转换成Model 类实例 MVC网站通用配置项管理

    利用反射和泛型把Model对象按行储存进数据库以及按行取出然后转换成Model 类实例 MVC网站通用配置项管理   2018-3-10 15:18 | 发布:Admin | 分类:代码库 | 评论: ...

  8. Windows App开发之集合控件与数据绑定

    为ListView和GridView加入数据 ListView採用垂直堆叠得方式显示数据.而GridView则採用水平堆叠得方式. 长相的话嘛,它们都几乎相同. <Grid Name=" ...

  9. POJ 3469(Dual Core CPU-最小割)[Template:网络流dinic V2]

    Language: Default Dual Core CPU Time Limit: 15000MS   Memory Limit: 131072K Total Submissions: 19321 ...

  10. 安装openSUSE网卡驱动

    网卡:英特尔 82579LM Gigabit Network Connection 先去英特尔的网站下载驱动 http://downloadcenter.intel.com/SearchResult. ...