使用vue框架新建一个项目
一、安装脚手架
npm i @vue-cli -g 每台电脑只需安装一次
二、新建（初始化）一个项目
vue create 项目名
三、运行项目
npm run serve 能够看到页面成功初始化了一个项目
四、建立项目的目录结构
（1）src:源代码
src目录结构：
assets:资源目录，存储静态资源，例如图片等。
components:存储其他组件的目录。
App.vue:根组件。
main.js:入口文件。
API:放获取数据的一些地址或者方法。
util:文件夹内，放一些工具方法（日期转换函数，数据格式的转换函数）。
五、建立view文件夹，放页面组件
六、实例
（1）App.vue根组件：加入<router-view></router-view>。
App.vue.png
（2）main.js入口文件：引入路由。
main.js.png
（3.1）配置路由，需导出 export default。
（3）router文件夹的index|router.js文件中：2个注意事项，如下。
（3.2） 配置路由时， component为单数。
export default new VueRouter({
routes:[{
path:'/',
redirect:"/first"
},
{
path:"/first",
meta:{
title:"首页",
},
component:()=>import("@/views/first.vue"),
},]
})
（4）components文件夹的footer.vue文件中：使用<router-link></router-link>跳转路由。包含3个知识点，如下。
（4.1）属性：exact ，精确匹配。
（4.2）to="/first" ，跳转到哪个页面。
（4.3）active-class="active"，active为作用上（选中时）的类名 。
（4.4）tag="div" ，选中时把div类型添加上。
<template>
<div class="bar">
<router-link exact to="/first" tag="div" active-class="active">首页</router-link>
<router-link exact to="/cinema" tag="div" active-class="active">影院</router-link>
<router-link exact to="/area" tag="div" active-class="active">区域</router-link>
<router-link exact to="/mine" tag="div" active-class="active">我的</router-link>
</div>
</template>
<style lang="css" scoped>
.bar {
width: 100%;
height: 50px;
background: yellow;
position:fixed;
bottom:0px;
left: 0px;
display: flex;
justify-content: space-around;
align-items: center;
}
.active {
color:red;
}
</style>
（5）views文件夹的first.vue文件中：引用footer.vue文件的内容（底部导航栏），2个注意事项，如下。
（5.1）<footers></footers> ，引用的。标签名不能为H5保留字footer,否则报错。
（5.2）引用组件时，components ，为复数。
<template>
<div>
<h1>first</h1>
<footers></footers>
</div>
</template>
<script>
import footers from "@/components/footer"
export default {
components:{
footers,
}
}
</script>
（6）组件结构图片：
img.png
（7）页面效果图：
tab-img.png
