（1）安装、新建项目
在cmd输入“npm i -g @vue/cli-init”安装工具，“vue init webpack mydouyin”生成一个新的项目，选择默认。
（2）了解vue加载过程
1)网页加载的入口文件就是index.html，在body里面只有一个id="app"
2)打开main.js
导入Vue,Router并使用
import Vue from 'vue' //node_models里的vue
import App from './App' //加载APP.vue，是组件
import router from './router' //加载index.js
new Vue({
el: '#app', //即选中了index.html的app，后面才能操作这个app元素
router,
//声明路由，从./router导入的根路径下的路由,然后./router加载HeloWorld.vue显示文字
components: { App },
//私有组件APP，有图片与router-view的路由组件HellowWord.vue的文字
template: '<App/>'
})
如何显示上方图片的？
index.html的id是app,在main.js里面有el:#app选定对象app进行后续操作。
在main.js里的component组件是App.vue,在App.vue里面是图片与router-view。
即图片是在App.vue里得到显示的。
router-view是路由内容的展示容器 （待显示文字）
如何显示下方文字的？
当前页面路由是‘/’，则在router/index.js下找到路由‘/’，打开index.js查看路由信息。
得到‘/’的路由路径对应加载的组件是HelloWorld.vue,点击该vue文件就是文字部分。
export default new Router({
routes: [
{
// 访问路径/就会加载component里的组件,里面就是初始页面下方的文字
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
3）总结。
页面加载index.html,里面只有一个id=app。
在main.js选中app对其操作：指定私有组件component是App.vue。
打开App.vue,里面有一张图片与router-view,其中router-view是路由内容的显示容器。
当前的路由路径是/，则路由内容加载容器应该显示‘/’下的组件component:HelloWorld.vue。
在HelleWorld.vue里面就显示了下方的文字，显示在router-view路由内容显示容器位置中。
（3）开始编写底部导航栏
1）新建Home.vue并修改index.js下的路由信息，‘home’文字加载成功。
2）新建home/TarBar.vue作为底部导航栏，先测试‘tarbar’字样并在Home.vue里作为组件加入
新建TarBar.vue组件
因底部导航栏TarBar.vue只是Home.vue下的一个组件，所以在Home里作为component导入
TarBar.vue组件导入成功
3）TarBar导入成功，下开始编写底部导航栏TarBar.vue的布局样式
4）底部导航栏的图片导入，新建图片文件夹static/img与截取的抖音中间+的图片
（4）开始写底部导航栏的布局前，先记录一下css里的“浮动”的用法
1）为什么需要浮动?
很多标准流没有办法完成的一些布局效果，可以使用浮动完成布局，因为浮动可以改变元素标签的默认排列方式。
最典型的应用就是：使得多个块级元素在一行显示。
可解决如下问题:
多个块级元素会从上到下进行排列，两个div不能出现在同一行。
两个盒子不能左边一个、右边一个。
2）什么是浮动？浮动的特性?
语法：选择器{ float:none,left,right }
浮动的特性？
A.浮动元素会脱离标准流移动到指定的位置，浮动的盒子不再保留原有的位置。
B.浮动的元素会一行显示并顶部对齐
C.浮动的元素会具有行内块元素的特性（任何元素都可以浮动，如span是行内元素设置width\height属性是不会显示的，但当它增加了float以后就可以正常显示了。这是因为浮动的span元素具有行内块元素的特性了。不需要将行内元素转成行内块元素就可以设置宽高）（块级元素如果不设置宽高，它的宽度是与父级元素等宽，加了浮动后是包含内容的大小）
3）三种最常见的布局方式？
A、普通流（标准流）：标签安装默认规定的方式进行排列。标准流是最基本的布局方式。
块级元素会独占一行，从上到下排序。（div hr p h1-h6 ul ol dl form table）
行内元素会按照顺序，从由左到右顺序排列，碰到父元素边缘则自动换行。（span a i em）
B、浮动：浮动的元素经常与标准流父级元素搭配使用
C、定位：
总结：网页布局第一准则，多个块级元素纵向排列找标准流，横向排列找浮动。
（5）在底部导航栏的布局里，常用position:fixed布局。
position:fixed常用于导航栏的布局，是css的固定定位，一般用于导航栏的吸顶效果。
用fixed把它固定在上方，再用弹性盒布局flex去设置它内部的样式。
需要注意：
固定定位的盒子必须要有宽度,否则是盒子内内容的宽度；
固定定位的盒子与父级元素无关，是以屏幕为准的。
（6）底部导航栏包括五个部分“ 首页 朋友 + 消息 我 ”
需要注意：“+”可以上传图片作为按钮，点击某一个栏的时候下方有个横线与颜色加深一点
1）在template里写5个div，然后设置对应的css样式
得到导航栏初步结果
2）下对底部导航栏进行微调，高亮与下划线选中、加号的图片导入
A.中间“+”号部分替换成图片。先新建src/static/img目录并放入图片，在代码中引用图片。
修改图片的宽、高、padding值。
B.设置字体点击的高亮状态。
在data(){return {TagIndex:0}}定义变量并初始化
在span里设定类为高亮类的选择class = “ TagIndex==0? 'active' : ' ' ”来确定是否高亮。
增加一个点击事件传入index的值，点击事件调用函数changeIndex(index)。
在methods：{函数实现}。
可实现点击某个栏，显示高亮状态输出数字表示可选中。但未将选中的按钮与对应的vue页面连接起来，下将补充实现。
（7）底部导航栏的补充与图标的引用
1）新建views/index/index.vue文件、views/follow/follow.vue文件、Message.vue,Me.vue。
2）修改路由信息，是home页面下的子路由children:[ {path: name: component:()=>import('./views/index/index.vue') },{xxx} ]
3）在TarBar里使用router-link to="/index" tag="span" 实现跳转.
其中，router-link与router-view组件是在Vue.use(Router)时的Router的源码里注册了组件的。在link里的实现是有name to方法 默认是a标签。这里使用tag="span"修改为span标签。
4）导入阿里图标库的图标，方便使用
将iconfont.css放入static/iconfont文件夹下，在main.js导入import ‘xxx’
使用方法class="iconfont 图标名字"即可。
