一、money记账项目-Vue-项目搭建
1.利用@Vue/cli创建项目- vue create money（项目名称可更改）
- cd money
- yarn serve
这个项目的完整配置：
这时候我们就基于Vue创建出来了一个项目
项目目录说明：
在一个新建文件中输入：vbase+Tab可快速创建：
<template>
<div>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
ts/js可通过 @/目录名 引入文件
css/scss可通过 [email protected]/目录名 引入文件
例如：
ts/js：
import Types from '../components/Moneys/Types.vue';
//引入需要自己计算路径引入
import Types from '@/components/Moneys/Types.vue';
//@代表src目录，不用计算路径
css/scss：
@import "[email protected]/assets/style/helper.scss";
@import "[email protected]/assets/style/reset.scss";
//前面要加[email protected]
这都是Vue配置好的，我们不需要自己配置
二、money记账项目-Vue-导航栏
- 先确定页面的url
#money 记账
#labels 标签
#statistics 统计
默认进入首页Money页面
添加一个404页面
- 在views中创建4个页面
- 在router.ts中配置路由
const routes: = [
{
path: '/',
redirect:'/money'
},
{
path:'/money',
component:Money
},
{
path: '/labels',
component: Labels
},
{
path:'/statistics',
component: Statistics
},
{
path:'*',//*表示除了上面的路径，其他的全是404页面
component:NotFound
}
]
- 在app.vue设置路径和占位符
<router-link to="/money" >记账</router-link>
<router-link to="/labels" >标签</router-link>
<router-link to="/statistics" >统计</router-link>
<router-view />
这时候我们可以
通过不同的路径来访问不同的页面了。但是我们有4个页面，并不是所有页面都需要这个导航栏Nav的，
404页面就不需要导航栏。所以把导航栏Nav写在app组件中不妥，要把导航栏Nav组件做成全局组件，
哪个页面需要，哪个页面就自己引用- 在components中创建组件Nav
<template>
<div>
<div id="nav">
<router-link to="/money" 记账</router-link>
<router-link to="/labels" 标签</router-link>
<router-link to="/statistics" 统计</router-link>
</div>
</div>
</template>
- 在main.ts中将其做成全局组件
import Nav from '@/components/Nav.vue'
Vue.component("Nav",Nav)
哪个页面需要直接引入<Nav />即可
这时候我们Money页面，Labels页面，Statistics页面里面有差不多相同的代码：
Money页面为例：
<div>
<div >
money
</div>
<Nav />
</div>
这时候就要想我与重复不共戴天，
- 所以我们需要在components再新建一个页面Layout：
<div>
<div >
<slot />//占位插槽
</div>
<Nav />
</div>
- 只需在三个页面中引入Layout组件，然后把内容传入插槽即可：
<Layout>
<p>money</p>
</Layout>
- 引入Icon图标（svg-sprite-loader）
1.在Iconfont-阿里巴巴矢量图标库中寻找图标，下载为svg格式。
2.在assets中创建一个文件夹icon，把图标放进去（svg其实就是一个xml）
3.在Nav组件中引入图标：import x from ‘@assets/icon/label.svg’
这是会有报错，下面标有红线，这是我们根据报错搜索：typescript svg cannot find module
第一个就是复制代码
declare module "*.svg" {
const content: any;
export default content;
}
放入shims-vue.d.ts文件即可
4.将x打印出来，是一个路径，这不是我们想要的，我们想得到一个svg use的使用方法，这时候我们需要一个loader（svg-sprite-loader)
5.安装loader：yarn add --dev svg-sprite-loader
6.进行配置，在vue.config.js里面
const
7.组件引用：创建Icon组件：
<
8.Nav组件页面引用：
<
下面是css，自己做就可以了
9.更新meta viewport
public>index.html:
<
svg 自带 fill 问题
通过Vue（active-class="selected"）可以使选中的导航栏变色，但是svg文件里面path标签如果有fill属性（fill="red"),那么svg标签默认就是红色，不会因为Vue（active-class="selected"）变色，这时候我们需要
加上一个loader（svgo-loader），写在loader（svg-sprite-loader)后面即可，当然要先安装loader：yarn add --dev svgo-loader
然后进行配置，在vue.config.js里面：
/* eslint-disable */
三、money记账项目-Vue-Money.vue组件
在Money.vue组件中写html+css，常规写法在写html+css中需要注意和学习的东西：
1.input,label写法：推荐：
<label>
<span>备注</span>
<input type="text">
</label>
不推荐：
<label for="xxx"></label>
<input id = 'xxx' type="text">
// reset.scss
* {
margin: 0; padding: 0;
box-sizing: border-box;
}
a{
text-decoration: none;
color:inherit;
}
// app.vue
@import "[email protected]/assets/style/reset.scss";
- 新建helper.scss文件（储存变量），把变量都放到 helper.css 里面。helper.css 这个文件只能放变量，函数和 mixin,最终会消失的东西
- 在 google 搜索 "fonts.css" ，直接复制代码，变量声明前面用$
- 然后在App.vue中引用
// helper.scss
- 选择器里面
.tags {
> .current {
}
}
- 选择器本身
.tags {
&.current {
}
}
5. 按钮字体样式不会继承
- 在reset.scss中加入
button, input{
font: inherit;
}
border-bottom: 1px solid;
padding: 0 4px;
- 父元素一定要用clearfix
.clearfix::after{
content:'';
display: block;
clear:both;
}
- 用scss的%,placeholder占位功能
// helper.scss
%clearfix{ //clearfix就是一个占位符,后面谁用他，谁就把他替换了
&::after{
content: '';
clear: both;
display: block;
}
}
// 如何用
// money.vue
.buttons {
@extend %clearfix;
}
//后面buttons调用他了，就相当于
buttons::after{
content: '';
clear: both;
display: block;
}
box-shadow: inset 0 -5px 5px -5px fade_out(black, 0.5),
inset 0 5px 5px -5px fade_out(black, 0.5);
- 坚持一个文件查过150行就执行模块化
- 把html scss剪切的单独.vue文件，引入的时候写
- 最后把相关文件放到一个文件夹