记账项目笔记（1）：项目搭建+导航栏

1、项目搭建命令行

• vue create 项目名
• cd 项目名
• yarn serve

2、目录结构说明

• src文件夹用于放源代码文件（源码目录）
• assets资源文件夹用于存放图片、svg（资源目录）
• components文件夹用于存放组件（公共组件目录）

3、@代表src目录

• 在script引入src里的文件： import x from "@/..."
  
• 在style引入src里的文件： @import "~@/..."
  

4、路由基本加载

配置路由文件（router中的index.js）（前端路由）：

routes:[{
    path:'/money',
    component:Money
    },
    {
    path:'/labels',
    component:Labels
    },
    {
    path:'/statistics',
    component:Statistics
    }
]

确定视图加载位置（App.vue）（根组件）

<router-view/>

路由跳转（Nav.vue） （需要使用路由跳转的文件）

<router-link to='/money'>记账</router-link>
<router-link to='/labels'>标签</router-link>
<router-link to='/statistics'>统计</router-link>

5、全局引入导航组件的思路
在项目中引入全局导航栏Nav，一开始在App.vue引入Nav标签，但存在的缺点是会在所有页面显示，即使404页面也会出现导航。
于是选择【局部注册】，把Nav标签单独引入各个需要导航的页面组件，但存在的缺点是不方便，需要多次复制代码。
最后选择【全局注册】，在main.js引入Nav标签做成全局组件，之后所有的vue实例都可以用。

import Nav from '@/components/Nav.vue'
Vue.component('Nav', Nav)

6、CSS重复使用的解决办法：重复的内容封装成一个组件，不重复的内容用Layout包裹，通过slot插槽传进去（组件中Layout包裹的内容，粘贴到插槽slot）。
Layout:

<template>
	<div class="nav-wrapper">
		<div class="content">
			<slot/> 
		</div>
		<Nav/>
</div>
</template>
<script>
export default Vue.extend({
	name:"Layout"
})
</script>

其他组件：

<Layout>
    Money.vue //这部分内容就插在slot里面
</Layout>

7、import项目，实现将一个目录任意后缀的文件全部统一引用到当前文件

let importAll = (requireContext:_WebpackModuleApi.RequireContext) => requireContext.keys().forEach(requireContext)
try {importAll(require.context('../assets/icons/',true,/\.svg$/))}
catch(error){console.log(error)}

8、active-class="selected"给想要变高亮的地方添加active-class属性
CSS:

.icon.selected {color:red;}

9、icon宽高用em设置，针对字体尺寸设置大小

.icon { width:1.5em; height:1.5em; }