-
svg图标不会自动换色
解决方法:删除svg图标中的fill属性,分别设置点击前的颜色和点击后的颜色 -
引入单独文件时的插槽
使用<slot/>,在组件里
-- Layout --
<template>
<div class="nav-wrapper">
<div class="content">
<slot/>
</div>
<Nav/>
</div>
</template>
意思是在slot位置插入内容,例如
-- Money --
<template>
<Layout>
<p>Money.vue</p> // Layout中slot处插入<p>Money.vue</p>
</Layout>
</template>
@无法识别src目录
解决方法:在webpack里手动配置webpack文件,路径为 'xxx\node_modules@vue\cli-service\webpack.config.js'<style lang="scss" scoped>
使用scoped会自动给class类加上属性名,所以每个单独的页面都不用再重新命名-
css居中布局时,最后一排内容不够无法左对齐
如图所示:
无法左对齐.png
解决办法:- 增加父盒子,设置父盒子宽度为刚好一排内容的宽度,在这里会遇到最右边一个自动换行的问题,是因为给元素设置了margin,内容宽度超出,需要在最后一个元素设置负margin。
该方法缺点:内容固定,不够响应式,在pc等大屏幕端也只有那一块,而且需要在js给最后一个元素增加类,非常麻烦 - 使用justify-content:flex-start,左对齐,再手动设置padding
该方法缺点:不够响应式,每个人屏幕尺寸不同,容易歪 - 使用grid布局,推荐这种办法,grid布局就是为这种情况而存在
该方法缺点:有许多旧款浏览器不支持
- 增加父盒子,设置父盒子宽度为刚好一排内容的宽度,在这里会遇到最右边一个自动换行的问题,是因为给元素设置了margin,内容宽度超出,需要在最后一个元素设置负margin。
.current {
padding-top: 100px;
display: grid;
flex-wrap: wrap;
justify-content: center;
grid-template-columns: repeat(auto-fill, 80px);
grid布局
-
动态选中class
使用 :class
<li :class="type === '-' && 'selected'" @click="selectType('-')">支出</li>
<li :class="type === '+' && 'selected'" @click="selectType('+')">收入</li>
---
methods: {
selectType(type) {
if (type !== '-' && type !== '+') {
throw new Error('type is unknown')
}
this.type = type
}
}
- 改为ts
import Vue from 'vue';
import {Component} from 'vue-property-decorator';
@Component //export内容自动识别为vue组件
export default class Types extends Vue {
type = '-'; //自动变为data
selectType(type) { //自动变为methods
if (type !== '-' && type !== '+') {
throw new Error('type is unknown');
}
this.type = type;
}
}
-
写Vue组件的三种方式
- 用js对象
export default {name,props,data, mounted,methods,...}
- 用ts类 <script lang="ts">
@Component
export default class Types extends Vue {
xxx: string = 'hi';
@Prop(Number) xxx: number | undefined;
- 用js类 <script lang="js">
@Component
export default class Types extends Vue {
xxx = 'hi';
- vue里面的循环
<li v-for="(u,index) in displayUsers" :key="index">{{u.name}} - {{u.gender}}</li>
// 对 displayUsers进行for循环输出
- v-modle
:value = "x"
@input = "x = $event.target.value"
=
v-modle = "x"
-
不小心遇到了git 游离的 head 状态
解决方法:游离的 head 状态就是现在位于一个匿名分支,所有提交都不在任何分支上,如果丢失会很严重,需要把内容提交到分支上 -
如何把js文件修改为ts
- 修改后缀为ts
- 改掉所有报错,基本就是类型
- 如果类型是自定义的,就新建 custom.d.ts 把类型文件写在全局里,整个项目都可以使用这个类型
-
使用classPrefix,来动态区分使用的页面
在组件声明
//Types.vue
// template
<div>
<ul class="types">
<li :class="{selected:value==='-',[classPrefix+'-item'] :classPrefix}" @click="selectType('-')">支出</li>
<li :class="{selected:value==='+',[classPrefix+'-item'] :classPrefix}" @click="selectType('+')">收入</li>
</ul>
</div>
// @Component
@Prop(String) classPrefix?: string;
在不同页面使用
// Statistics.vue
<Layout>
<Types :value.sync="type" class-prefix="xxx"/>
</Layout>
// style
::v-deep .zzz-item{ // ::v-deep ,是在使用 scoped 时,只影响当前的组件
background:white;
}
- 部署到github
- 在 vue.config.js 中设置正确的 publicPath。
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/moneycat-website/'
: '/'
}
- 在项目目录下,创建内容如下的 deploy.sh 并运行它以进行部署:
2. 在项目目录下,创建内容如下的 deploy.sh 并运行它以进行部署:
#!/usr/bin/env sh
# 当发生错误时中止脚本
set -e
# 构建
yarn build
# cd 到构建输出的目录下
cd dist
# 部署到自定义域域名
# echo 'www.example.com' > CNAME
git init
git add -A
git commit -m 'deploy'
# 部署到 https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master
# 部署到 https://<USERNAME>.github.io/<REPO>
git push -f git@github.com:ShigureRain/moneycat-website.git master:gh-pages
cd -
- 运行 sh deploy.sh
- 在项目里使用图片部署到github无法生效的问题
解决办法: 其实就是路径问题,把图片路径改为相对路径
img.src = './qrcode.png';