文件结构

用官方的 vue-cli 生成的项目文件结构如上图所示,简单介绍下上面图中各文件的作用。

  1. src 文件夹 :
    1. assets 文件夹:存放各种资源文件,如图片等
    2. components 文件夹 :各种 .vue 组件
    3. router 文件夹 :包含 index.js ,项目路由器配置文件
    4. App.vue 主要布局容器 (CLI生成)
    5. main.js 项目入口文件(CLI生成)
  2. static 文件夹 : 可以存放被项目引用的静态文件,如 index.html 需要的 favicon.ico、js插件 etc.
  3. index.html 项目首页

其实我们主要的工作目录也就是在 src 里面,其他的文件基本不用动,
那么我们先从 main.js 项目入口文件开始看起:

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 }
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

代码很少,也就做了二件事,首先导入 vue,vue-router,主容器文件 app.vue ,然后 new 一个 vue 对象,将 router 和 组件注册到 vue对象中。这个文件我们先不用动,不影响我们后面的开发。

然后是主容器 App.vue ,

<template>
<div id="app">
<img src="./assets/logo.png">
<router-view></router-view>
</div>
</template> <script>
export default {
name: 'app'
}
</script> <style>
//这里写样式,省略,,,
</style>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

这里面的内容也很少,跟传统的 Html 文件很像,唯一有点区别的就是 Template 标签,这个标签里的内容就是最后显示在页面上的东西,也即是单页应用的核心组成部分–组件。每个组件是独立的,组件之间可以自由组合,重复使用。

这里有一点需要注意的就是,每个 Template 标签内只能有一个子标签,也就是一个 div,在这个 div 里面写我们的布局,可以把 Template 看成是 Html 标签,它里面只能有一个 div,也就是 body。

这个 div 里面有二个元素,一个 img 也就是我们看到的 vue 的 logo,然后就是一个 router-view 标签,它就是路由视图,是 vue 单页应用的核心之一–路由的具象化。在我们的单页应用中,每个路由对应着一个页面,切换路由就可以相应的改变页面显示内容。

看一张调试模式下的结构图:

PS:这里使用了 VUE 官方提供的一个调试工具,官方文档 的最开始,安装里面里面有说到,推荐使用 VUE DevTools 进行调试。

可以看到 APP 节点也就是前面说到的主容器,它下面有一个节点 Hello ,也就是 router-view,Hello 节点其实也是一个组件,对应这 Hello.vue 这个文件,那么这个 router-view 是怎么变成 Hello 的呢?那就需要看 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
}
]
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

代码也很少,做的事情和 main.js 很像,导入 Hello 组件,生成 router 对象,router 对象里可以有很多个路由,这里只注册了一个,可以看到,每个路由包含了三个字段,path , name , component .

所以我们现在可以这么理解,在 App.vue 里面的 router-view 节点之所以会显示为 Hello 组件的内容,就是因为 Hello 组件被注册到了这个路由的入口地址,这里如果把 Hello 组件换成我们自己的组件,那么界面就会变成我们自己写的界面。

比如我新增一个组件 Home.vue

<template>
<div>
<p>This is HomePage</p>
</div> </template>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

然后将 index.js 改成

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home' Vue.use(Router) export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
}
]
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

那么页面变成了:

写到这里相信大家也都知道了以后我们的页面要怎么写了,大概思路就是先写组件,然后将组件在路由里面注册,然后在页面上切换路由就会显示不同的界面。

VUE安装步骤1的更多相关文章

  1. deepin vue安装步骤

    deepin安装node.js sudo wget https://nodejs.org/dist/v9.2.0/node-v9.2.0-linux-x64.tar.xz tar xJf node-v ...

  2. VUE安装步骤

    项目构建 项目推荐直接使用 Vue 官方提供的脚手架(Vue-cli),所以第一步首先是安装脚手架.在命令行或者 IDE 的 Terminal 窗口中输入以下命令即可自动安装: npm install ...

  3. 2.Vue调试工具vue-devtools的安装步骤和使用

    1.安装步骤: 打开谷歌浏览器设置 -->扩展程序 -->勾选开发者模式 --->加载已解压的扩展程序 --->选择“chrome扩展”文件夹即可:

  4. [Vue安装教程]十分钟学会vue 安装

    Vue的安装主要有一下几个步骤: 1.安装npm淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 2.安装脚手架工 ...

  5. vue学习笔记 vue安装

    一.安装步骤:(用cmd命令用管理身份安装比较顺利) 1.安装node,安装后可以输入npm -v 查看版本,升级npm可用 cnpm install npm -g 2.安装vue 输入cnpm in ...

  6. vue-cli安装步骤

    vue-cli脚手架模板是基于node下的npm来完成安装的所以首先需要安装node 条件:  node在4.以上,npm在3以上 安装 指令: 1.npm install -g vue-cli 在全 ...

  7. vue安装以及配置

    今天又重新做了一遍vue的安装步骤: 1.条件,vue需要安装在node环境里面,确保安装了node. 2.安装脚手架. 找一个文件夹,放你的项目.待会儿安装的时候,项目会在你找的这个文件下新增一个你 ...

  8. vue安装遇到的5个报错小结

    前言 这篇博文不会教你怎么安装vue,但会告知安装过程中可能遇到的5个问题 2017年我写过一篇安装vue的博客,详情:https://www.cnblogs.com/tu-0718/p/752109 ...

  9. Vue-cli的安装步骤详细版本

    https://github.com/vuejs/vue-cli 官网 使用官方推荐的webpack 条件:node在4.以上,npm在3以上 安装步骤:1.cmd打开命令行窗口2.输入cnpm in ...

随机推荐

  1. MySQL的下载和安装

    MySQL的下载 MySQL官网:https://www.mysql.com/ MySQL的安装 https://jingyan.baidu.com/article/6181c3e0d27a57152 ...

  2. vs2008编译opencv,不能copy CMakeVSMacros2.vsmacros

    由于学习opencv,要查看源码文件,所以要先对opencv进行编译,可悲的是出错了 “不能copy   CMakeVSMacros2.vsmacros” 通过上网查找资料,之所以出现这种情况,是因为 ...

  3. Verilog MIPS32 CPU(九)-- 顶层文件

    `timescale 1ns / 1ps /////////////////////////////////////////////////////////////////////////////// ...

  4. 开发.NET Core NuGet包并实现CI/CD

    实际开发中我们需要对一些公共类库进行开发,并基于Jenkins进行CI/CD(CI:持续集成,CD:持续部署),其他项目通过NuGet引用.上文讲述了如何搭建本地NuGet服务器并发布NuGet包,这 ...

  5. .NET CORE 2.1 导出excel文件的两种方法

    最近在做 MVC 项目的时候遇到项目的导出,下面总结下两种导出到excel 的方法 第一种方法: 将文件写到本地,然后返回这个File 或者返回这个 File 的绝对地址  其中  _hostingE ...

  6. 如何跟踪sharepoint详细日志

    PS C:\Users\setup.moss> Set-SPLogLevel -TraceSeverity verboseexPS C:\Users\setup.moss> New-SPL ...

  7. FTP ftp部署遇到问题

    FTP  ftp部署遇到问题 一. 二.

  8. 食物(矩阵快速幂)(DP)

    这个题..我们可以想到用递推写!!qwq(好吧,其实我的DP水平不高啊qwq) 就是我们以两个为单位(一共九种组合情况),然后往后面推下一位的情况. 通过手动模拟,我们可以找到它们之间的递推关系(详见 ...

  9. 【洛谷九月月赛T1】签到题(bsgs)(快速乘)

    说好的签到题呢qwq....怎么我签到题都不会啊qwq 之后看了bsgs才发现貌似不是那么那么难fake!!什么东西... 先贴上部分分做法(也就是枚举1的个数,然后每一步都进行取模(这和最后取模结果 ...

  10. ArrayList用法详解

    1.什么是ArrayList ArrayList就是传说中的动态数组,用MSDN中的说法,就是Array的复杂版本,它提供了如下一些好处: 动态的增加和减少元素 实现了ICollection和ILis ...