1.初始目录结构如下:

2.目录结构介绍

目录/文件 说明
build 最终发布的代码存放位置。
config 配置目录,包括端口号等。我们初学可以使用默认的。
node_modules npm 加载的项目依赖模块
src

这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:

  • assets: 放置一些图片,如logo等。
  • commponents: 目录里面放了一个组件文件,可以不用。
  • App.vue: 项目入口文件,我们也可以直接将组建写这里,而不使用 commponents 目录。
  • main.js: 项目的核心文件。
static 静态资源目录,如图片、字体等。
test 初始测试目录,可删除
.xxxx文件 这些是一些配置文件,包括语法配置,git配置等。
index.html 首页入口文件,你可以添加一些 meta 信息或同统计代码啥的。
package.json 项目配置文件。
README.md 项目的说明文档,markdown 格式

3.初始流程

  1.index.html ---首页入口文件

其中 id 为 app 的 div 是页面容器,其中的 router-view 会由 vue-router 去渲染组件,讲结果挂载到这个 div 上。

 <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue Router Demo</title>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
<script src="dist/bundle.js"></script>
</body>
</html>  

  2.main.js ----核心文件

       此处的 el:'#app', 表示的是index中的那个 <div id="app"></div>, 它要被 App这个组件 components: { App } 的模板 template: '<App/>'替换。

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router' Vue.config.productionTip = false /* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})

  3.App.vue ----项目入口文件

App这个组件 components: { App } 的模板 template: '<App/>' 的具体内容。其中的 router-view 会由 vue-router 去渲染组件,讲结果挂载到这个 div 上

<template>
<div id="app">
<img src="./assets/logo.png">
<router-view></router-view>
</div>
</template> <script>
export default {
name: 'app'
}
</script> <style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

  4.router/index.js -----路由与组件    

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello' Vue.use(Router) export default new Router({
routes: [
{
path: '/',
name: 'Hello',
component: Hello
}
]
})

vue学习笔记(三)——目录结构介绍的更多相关文章

  1. Magento学习第一课——目录结构介绍

    Magento学习第一课--目录结构介绍 一.Magento为何强大 Magento是在Zend框架基础上建立起来的,这点保证了代码的安全性及稳定性.选择Zend的原因有很多,但是最基本的是因为zen ...

  2. thinkphp学习笔记1—目录结构和命名规则

    原文:thinkphp学习笔记1-目录结构和命名规则 最近开始学习thinkphp,在下不才,很多的问题看不明白所以想拿出来,恕我大胆发在首页上,希望看到的人能为我答疑解惑,这样大家有个互动,学起来快 ...

  3. vue学习笔记(三)class和style绑定

    前言 通过上一章的学习vue学习笔记(二)vue的生命周期和钩子函数,我们已经更近一步的知道了关于vue的一些知识,本篇博客将进一步探讨vue其它方面的内容,vue中关于class和style绑定,关 ...

  4. Solr6.7 学习笔记(01) -- 目录结构

    Solr解压后的目录结构 --contrib: Solr的一些扩展 --analysis-extras: 包含一些文本分析组件及其依赖 --clustering: 包含一个用于集群搜索结果的引擎 -- ...

  5. Vue学习笔记三:v-bind,v-on的使用

    目录 v-bind:绑定属性值,内容相当于js,缩写: v-on:绑定方法,缩写@ 总结 v-bind:绑定属性值,内容相当于js,缩写: 我添加了一个input标签,如下 <input typ ...

  6. python学习笔记:目录结构

    "项目目录结构"其实也是属于"可读性和可维护性"的范畴. 目录组织方式 关于如何组织一个较好的Python工程目录结构,已经有一些得到了共识的目录结构.在Sta ...

  7. Linux Shell 学习笔记 一 目录结构

    以Red Hat Enterprise Linux 各版本为例,RHEL中目录具体作用如下, /bin       存放普通用户使用的命令 /sbin     存放管理员可以执行的命令 /home   ...

  8. VUE 学习笔记 三 模板语法

    1.插值 a.文本 数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值 <span>Message: {{ msg }}</span> v-once ...

  9. vue学习笔记(三):vue-cli脚手架搭建

    一:安装vue-cli脚手架: 1:为了确保你的node版本在4.*以上,输入 node -v 查看本机node版本,低于4请更新. 2:输入:  npm install -g vue-cli     ...

  10. Angular5学习笔记 - 项目目录结构(二)

    一.项目总体目录 README.md:项目的说明和一些常用指令说明,建议看看. e2e:看不懂暂时空着??? node_modules/:存放npm下载的组件(npm install 后自动产生,不需 ...

随机推荐

  1. 使用Python批量下载ftp服务器中的内容

    使用ftplib,轻松实现从ftp服务器上下载所需要的文件,包括目录结构等,支持了一下断点续传 from ftplib import FTP import sys import os import r ...

  2. Vue 子组件无法使用 $emit 向父组件传参

    问题描述:

  3. vue2 递归组件--树形

    递归组件,官方给的教程太简便了,根本看不出到底怎么用.于是自己查网摸索了一下,这儿只把核心思想写出来. 效果如下图,点击后打开二级菜单,再点击后打开三级. //js //引子//思想:当v-if='f ...

  4. Mac 下 android/iOS https抓包

    一.Charles简介 Charles,是用Java开发的,所以跨平台,不仅可以在Mac上使用,Linux以及Window下都是可以使用的,当然需要安装JDK,才能运行,但目前是收费的. 二.下载 官 ...

  5. 6、ABPZero系列教程之拼多多卖家工具 框架后台的设置

    接着上篇文章,现在去修改注册登录逻辑代码还为时过早,我们还需要到后台去设置一些配置. 管理---设置 先配置好这2项设置,邮箱配置是为了验证注册时功能是否正常,下一篇文章需要用到. 注:邮箱配置中的密 ...

  6. LeetCode第[1]题(Java):Two Sum 标签:Array

    题目: Given an array of integers, return indices of the two numbers such that they add up to a specifi ...

  7. gitignore文件的作用

    早上上传文件的时候,发现有一些密钥不需要增加到版本库中,但是由于每次git status都会提示Untracked files ...并且这些文件并不需要一直提示,会占用相应的需要跟踪的文件位置,导致 ...

  8. npm 简单实用命令

    npm -v    查看版本号 npm get global             返回false表示默认本地安装 true全局安装 npm set global=true     设置默认为全局安 ...

  9. windows service编程

    1 基本概念 1.1windows服务简介 创建在它们自己的 Windows 会话中可长时间运行的可执行应用程序. 这些服务可以在计算机启动时自动启动,可以暂停和重新启动而且不显示任何用户界面. 1. ...

  10. 给“file”类型的input框赋值的问题

    开发"新闻编辑"功能时,会遇到给"file"类型的input框赋值的问题,用来展示之前上传的文件,但由于file类型的input框受到安全限制,所以不能被赋值, ...