VUE安装步骤1
文件结构
用官方的 vue-cli 生成的项目文件结构如上图所示,简单介绍下上面图中各文件的作用。
- src 文件夹 :
1. assets 文件夹:存放各种资源文件,如图片等
2. components 文件夹 :各种 .vue 组件
3. router 文件夹 :包含 index.js ,项目路由器配置文件
4. App.vue 主要布局容器 (CLI生成)
5. main.js 项目入口文件(CLI生成) - static 文件夹 : 可以存放被项目引用的静态文件,如 index.html 需要的 favicon.ico、js插件 etc.
- 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的更多相关文章
- 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 ...
- VUE安装步骤
项目构建 项目推荐直接使用 Vue 官方提供的脚手架(Vue-cli),所以第一步首先是安装脚手架.在命令行或者 IDE 的 Terminal 窗口中输入以下命令即可自动安装: npm install ...
- 2.Vue调试工具vue-devtools的安装步骤和使用
1.安装步骤: 打开谷歌浏览器设置 -->扩展程序 -->勾选开发者模式 --->加载已解压的扩展程序 --->选择“chrome扩展”文件夹即可:
- [Vue安装教程]十分钟学会vue 安装
Vue的安装主要有一下几个步骤: 1.安装npm淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 2.安装脚手架工 ...
- vue学习笔记 vue安装
一.安装步骤:(用cmd命令用管理身份安装比较顺利) 1.安装node,安装后可以输入npm -v 查看版本,升级npm可用 cnpm install npm -g 2.安装vue 输入cnpm in ...
- vue-cli安装步骤
vue-cli脚手架模板是基于node下的npm来完成安装的所以首先需要安装node 条件: node在4.以上,npm在3以上 安装 指令: 1.npm install -g vue-cli 在全 ...
- vue安装以及配置
今天又重新做了一遍vue的安装步骤: 1.条件,vue需要安装在node环境里面,确保安装了node. 2.安装脚手架. 找一个文件夹,放你的项目.待会儿安装的时候,项目会在你找的这个文件下新增一个你 ...
- vue安装遇到的5个报错小结
前言 这篇博文不会教你怎么安装vue,但会告知安装过程中可能遇到的5个问题 2017年我写过一篇安装vue的博客,详情:https://www.cnblogs.com/tu-0718/p/752109 ...
- Vue-cli的安装步骤详细版本
https://github.com/vuejs/vue-cli 官网 使用官方推荐的webpack 条件:node在4.以上,npm在3以上 安装步骤:1.cmd打开命令行窗口2.输入cnpm in ...
随机推荐
- 从零开始学习前端JAVASCRIPT — 7、JavaScript基础EVENT
1:事件驱动 1)事件:所谓事件就是js侦测到的用户的操作或是页面的一些行为(怎么发生的) 2)事件源对象:引发事件的元素.(发生在谁的身上) 3)事件处理程序:对事件处理的程序或是函数 (发生了什么 ...
- redis的安装使用
安装过程:http://www.cnblogs.com/littlehb/archive/2013/04/24/3040476.html 配置文件参考:http://redis.io/topics/c ...
- java IO之File基本操作
public static void main(String[] args) { // TODO Auto-generated method stub //"G:\\JAVA\\test\\ ...
- up6-自定义文件存储路径
在up6.2中有两种保存模式,一种是md5一种是uuid. md5由PathMd5Builder生成存储路径.md5主要提供给文件使用,可在服务器端保存唯一的文件,有效避免重复文件. uuid由Pat ...
- JavaScript语言精粹 笔记02 函数
函数函数对象函数字面量调用参数返回异常给类型增加方法递归作用域闭包回调模块级联套用记忆 函数 1 函数对象 在JS中函数就是对象.对象是“名/值”对的集合并拥有一个连接到原型对象的隐藏连接.对象字 ...
- 【targeting学习笔记】Display Advertising Targeting
背景:stanford的计算广告学(computational advertising)课程,yahoo的人主讲,课程链接:http://www.stanford.edu/class/msande23 ...
- 通俗理解java序列化
1 序列化是干什么的呢? 搬家的 简单说就是为了保存在内存中的各种对象的状态(也就是实例变量,不是方法),并且可以把保存的对象状态再读出来.虽然你可以用你自己的各种各样的方法来保存object sta ...
- PyCharm可用Active Code分享
目前可用,不保证更新!请及时取用. 6YQUPH9R7H-eyJsaWNlbnNlSWQiOiI2WVFVUEg5UjdIIiwibGljZW5zZWVOYW1lIjoi5o6I5p2D5Luj55C ...
- bootstrap css排版
smart-form 单行元素: 一般用div包含,class="row" 列元素:用section包含,class="col col-x"(section带有 ...
- 不用SQL给打印记录编号
以QUICKREPORT为例 页面设置如下: 其中ID为编号. 设置为表的ID字段. QUICKREPORT所在的FORM添加一个变量: var FprnT6: TFprnT6; Vxh:intege ...