1.环境搭建

1.1.脚手架搭建

1.1.1什么是脚手架

百度搜索一下脚手架长什么样子,它们是这样的:

从百度百科抄过来一段话: 脚手架是为了保证各施工过程顺利进行而搭设的工作平台。如果明白了脚手架在现实生活中的作用,那么,再来理解编程中的脚手架就容易了,有时我们听说前端脚手架工具,其实,这里的脚手架和现实中的脚手架类似,用人话讲就是一种工具,工地上的脚手架帮助工人施工,前端中的脚手架帮助编程人员完成各种工作,例如:代码编译、打包、压缩等,各种工具组合成一套编码环境,这种自己一步一步搭建环境的重复性劳动可以交给给脚手架工具来完成,你只需要在这种脚手架工具上完成自己的业务代码就行,下面我们会介绍到等vue-cli就是集成了vue的一种脚手架工具,同理,react、angular等都有相应的脚手架工具,例如:create-react-app、angular-cli等

1.1.2.vue-cli介绍

在没有vue-cli之前,搭建一个开发环境你可能需要花几天的时间,如果你并不熟悉webpack的话,你还得再去把webpack的各种配置学习一遍,这样几天时间很快就过去了,而你还没有真正动手开始写自己的应用逻辑,为了让开发者从配置中解放出来,vue官方提供了一套vue-cli脚手架,它不仅确保了各种构建工具能够基于智能的默认配置即可平稳衔接,还提供了配置调整的灵活性。有了vue-cli之后,你就可以专注于自己项目的业务逻辑的编写了。

从官方网站这样介绍:

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供:

通过 @vue/cli 搭建交互式的项目脚手架。
通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。
一个运行时依赖 (@vue/cli-service),该依赖:
可升级;
基于 webpack 构建,并带有合理的默认配置;
可以通过项目内的配置文件进行配置;
可以通过插件进行扩展。
一个丰富的官方插件集合,集成了前端生态中最好的工具。
一套完全图形化的创建和管理 Vue.js 项目的用户界面。

1.1.3.使用 vue-cli 创建项目

1.2.项目目录介绍以及相关配置

2.单文件组件

在vue基础入门的课程中,我们讲过vue如何去注册组件,我们使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素,这种方式在小规模项目中可以运行很好,但在复杂的项目中就会有很多缺点,因此,我们并不推荐使用Vue.component的方式来定义组件,而是使用单文件组件

2.1.什么是单文件组件?

通俗的说单文件组件就是每个文件就是一个组件,把不同的组件放到不同的文件中去,这种文件以.vue 结尾

2.2.单文件组件结构

单文件组件内部由三部分组成,即模板、js、css三部分,例如:

<template>
<div class="page">
{{message}}我是首页
</div>
</template> <script type="text/ecmascript-6">
export default {
data () {
return {
message: 'hello, '
}
},
components: { }
}
</script> <style scoped>
</style>

2.3.实例

使用单文件组件完成下图页面

前面我们已经讲过使用vue-cli创建项目了,你需要在src目录下写相应的代码

1.在src目录下的components目录下新建MyHeader.vue文件,添加下面内容

<template>
<div class="page">
{{ title }}
</div>
</template> <script type="text/ecmascript-6">
export default {
data () {
return {
title: '这是网页头部'
}
}
}
</script> <style>
.page {
width: 100%;
height: 60px;
background-color: black;
color: white;
text-align: center;
line-height: 60px;
font-size: 20px;
}
</style>

2.重复上一步,分别添加MyContent.vue文件和MyFooter文件

MyContent.vue

<template>
<div class="page">
{{message}}
</div>
</template> <script type="text/ecmascript-6">
export default {
data () {
return {
message: '这里是主体内容'
}
},
components: { }
}
</script> <style scoped>
.page{
width: 100%;
height: 400px;
background-color: orangered;
font-size: 40px;
text-align: center;
line-height: 400px;
color: white;
}
</style>

MyFooter

<template>
<div class="page">
{{message}}
</div>
</template> <script type="text/ecmascript-6">
export default {
data () {
return {
message: '这里是底部内容'
}
},
components: { }
}
</script> <style scoped>
.page{
width: 100%;
height: 200px;
background-color: black;
font-size: 40px;
text-align: center;
line-height: 200px;
color: white;
}
</style>
在src/App.vue文件中添加内容
<template>
<div class="page">
<router-view></router-view>
<my-header></my-header>
<my-content></my-content>
<my-footer></my-footer>
</div>
</template> <script type="text/ecmascript-6">
import MyHeader from '@/components/MyHeader'
import MyContent from '@/components/MyContent'
import MyFooter from '@/components/MyFooter' export default {
data () {
return {
name: 111
}
},
components: {
MyHeader,
MyContent,
MyFooter
}
}
</script> <style scoped>
</style>

4.运行查看效果

在终端里面执行命令

npm start

vue全家桶(1)的更多相关文章

  1. 用 Vue 全家桶二次开发 V2EX 社区

    一.开发背景 为了全面的熟悉Vue+Vue-router+Vuex+axios技术栈,结合V2EX的开放API开发了这个简洁版的V2EX. 在线预览 (为了实现跨域,直接npm run dev部署的, ...

  2. Vue全家桶

    简介 “简单却不失优雅,小巧而不乏大匠”. Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架.它是以数据驱动和组件化的思想构建的,采用自底向上增量开发的设计. 为什么 ...

  3. 从零开始系列之vue全家桶(3)安装使用vuex

    什么是vuex? vuex:Vue提供的状态管理工具,用于同一管理我们项目中各种数据的交互和重用,存储我们需要用到数据对象. 即data中属性同时有一个或几个组件同时使用,就是data中共用的属性. ...

  4. 使用vue全家桶制作博客网站

    前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用vue全家桶制作的博客网站 概述 该项目是基于vue全家桶(vue.vue-router.vuex.v ...

  5. 转载: 使用vue全家桶制作博客网站 HTML5 移动网站制作的好教程

    使用vue全家桶制作博客网站   前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用vue全家桶制作的博客网站 概述 该项目是基于vue全家桶(vue. ...

  6. Vue全家桶介绍

    一直不清楚全家桶是什么玩意,上网搜了一下,才知道就是平时项目中使用的几个依赖包,下面分享一下 Vue 全家桶介绍 Vue有著名的全家桶系列,包含了vue-router(http://router.vu ...

  7. 一个简单的假vue全家桶(vue+vue-router+require)

    首先说明我觉得这是一个比较好理解的vue全家桶(虽然是假的),模块化也是用require来做的,而且如果后期有必要压缩我也会用gulp来做 1.依赖个个本地模块,require只是用来载入page,这 ...

  8. Vue 全家桶 + Electron 开发的一个跨三端的应用

    代码地址如下:http://www.demodashi.com/demo/11738.html GitHub Repo:vue-objccn Follow: halfrost · GitHub 利用 ...

  9. Vue全家桶了解一下(待补充)

    vue全家桶了解一下 一.vue+vue-router+vuex+axios1.vue:使用vue-cli,生成最基本的vue项目2.vue-router:vue项目中的路由管理插件3.vuex:vu ...

  10. 升级vue全家桶过程记录

    背景 如果你使用了element-ui的el-tabs组件,并且想要单独升级element-ui至2.10.0,你会发现,使用了el-tabs组件的页面只要打开就卡死.原因是element-ui~2. ...

随机推荐

  1. Java实现 LeetCode 376 摆动序列

    376. 摆动序列 如果连续数字之间的差严格地在正数和负数之间交替,则数字序列称为摆动序列.第一个差(如果存在的话)可能是正数或负数.少于两个元素的序列也是摆动序列. 例如, [1,7,4,9,2,5 ...

  2. Java实现 LeetCode 40 组合总和 II(二)

    40. 组合总和 II 给定一个数组 candidates 和一个目标数 target ,找出 candidates 中所有可以使数字和为 target 的组合. candidates 中的每个数字在 ...

  3. java实现人员排日程

    某保密单位机要人员 A,B,C,D,E 每周需要工作5天,休息2天. 上级要求每个人每周的工作日和休息日安排必须是固定的,不能在周间变更. 此外,由于工作需要,还有如下要求: 所有人的连续工作日不能多 ...

  4. 使用Java将阿拉伯数字转换为中文数字(适配小数转换)

    Java数字转换工具类 简介 该工具类可以将整数.小数.负数转换为中文的数字,如: 0 --> 零 1 --> 一 2.1 --> 二点一 -2.1 --> 负二点一 具体代码 ...

  5. 简谈Java语言的封装

    简谈Java语言的封装 封装的定义 封装将复杂模块或系统的逻辑实现细节隐藏,让使用者只需要关心这个模块或系统怎么使用,而不用关心这个模块或系统是怎么实现的. 在面向对象的的编程中,我们一般通过接口来描 ...

  6. .NET Core SDKs installed: No SDKs were found.

    问题描述 今天vs2019创建了asp.net core项目,发现无法加载项目.尝试打开之前的.net core项目项目,同样无法加载项目. 打开cmd,输入 dotnet ,提示 .NET Core ...

  7. 【1】svn 指令总结

    [1]svn log 1.svn log 2. [2]svn di [3]

  8. netty实现消息中心(一)思路整理

    一.需求 需要实现直播间的以下功能: 群发消息(文本.图片.推荐商品) 点对点私发消息(文本.图片.推荐商品) 单个用户禁言 全体用户禁言 撤回消息 聊天记录持久化 二.技术实现 服务端消息中心采用n ...

  9. 别人开发三年30k,而我才12K,看完他面试前狂刷的面试题,我惊了

    朋友做Java开发三年多的时间了,在老东家勤勤恳恳工作了三年多,工资也就是从刚开始的8K涨到了12K,天天给我吐槽他的工资低.2019年中下旬开始就一直在各种地方找资源,刷面试题,想要“骑驴找马”,所 ...

  10. TensorFlow从0到1之TensorBoard可视化数据流图(8)

    TensorFlow 使用 TensorBoard 来提供计算图形的图形图像.这使得理解.调试和优化复杂的神经网络程序变得很方便.TensorBoard 也可以提供有关网络执行的量化指标.它读取 Te ...