1 项目搭建

1.1 创建Vite-vue-ts项目

1
2
3
4

pnpm create vite@2.9.0 mangosteen-fe-1 -- --template vue-ts`(报错就换npm)
cd mangosteen-fe-1
pnpm install
pnpm run dev

  • pnpm run build 报node_modules的错

    • 解决：tsconfig添加"skipLibCheck": true，使ts在打包过程中跳过依赖检查

  • pnpm run preview= build + http-server dist

  • 如果dist目录不小心push了，修改gitignore也没有用的话，

    • 可以使用git rm -r --cached dist删除远端的 保留本地的

1.2 项目目录

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

.
├── dist
│   └── ...
├── index.html
├── node_modules
│   └── ...
├── package.json
├── pnpm-lock.yaml
├── public
│   └── favicon.ico
├── README.md
├── src
│   ├── App.vue
│   ├── assets
│   ├── components
│   ├── env.d.ts
│   ├── main.ts
│   ├── shared
│   └── views
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts
  • 如果创建空文件夹，git默认是不会把它加入暂存区管理的，所以在里面创建.keep文件占位

1.3 template vs tsx

  • 实现单击+1
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

// App.vue
<script setup lang="ts">
import { ref } from 'vue';
  const count = ref(0)
  const onClick = () => {
    count.value += 1
  }
</script>

<template>
  <h1>
    {{count}}
  </h1>
  <div>
    <button @click="onClick">+1</button>
  </div>
</template>

<style>
</style>
  • 配置jsx/tsx支持

Render Functions & JSX | Vue.js (vuejs.org)

  • 安装官方插件

vite/packages/plugin-vue-jsx at main · vitejs/vite (github.com)

pnpm i -D @vitejs/plugin-vue-jsx

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

// vite.config.ts
import vueJsx from '@vitejs/plugin-vue-jsx'

export default {
  plugins: [
    vueJsx({
      transformOn: true,
      mergeProps: true
    })
  ]
}
  • 现在尝试使用tsx实现相同的功能
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

// App2.tsx
import { defineComponent, ref } from "vue";

// export const 是带名字的导出，方便ide引入提示
export const App2 = defineComponent({
  setup() {
    const refCount = ref(0);
    const onClick = () => {
      refCount.value += 1;
    };
    // 这里要return一个函数，函数返回值为tsx元素
    return () => (
      <>
        {/* 这里跟template语法不同，需手动.value */}
        <h1>{refCount.value}</h1>
        <div>
          <button onClick={onClick}>+1</button>
        </div>
      </>
    );
  },
});

2 引入Vue Router 4

Getting Started | Vue Router (vuejs.org)

  • 安装：pnpm i vue-router@4

  • 设置snippets代码段

    • Ctrl shift p snippet 选择typescriptreact
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

    // typescriptreact.json
{
	"VueComponent": {
  	"prefix": "vc",
    "body": [
      "import { defineComponent } from \"vue\";",
      "  export const $1 = defineComponent({",
      "    setup(props,context) {",
      "      return () => (<div>$2</div>);",
      "    },",
      "  });"
    ]
  }
}

  • 创建路由页面

1
2
3
4
5
6
7

// src/views/Bar.tsx
import { defineComponent } from "vue";
export const Bar = defineComponent({
  setup(props, context) {
    return () => <div>Bar</div>;
  },
});
  • 在挂载前引入路由组件
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

// main.ts
import { createApp } from "vue";
import { createRouter, createWebHashHistory } from "vue-router";
import { App } from "./App";
import { Bar } from "./views/Bar";
import { Foo } from "./views/Foo";

// 路由文件
const routes = [
  { path: "/", component: Foo },
  { path: "/bar", component: Bar },
];
// 传入路由配置
const router = createRouter({
  history: createWebHashHistory(),
  routes,
});
const app = createApp(App);
// 使用router
app.use(router);
app.mount("#app");
  • App.tsx
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

import { defineComponent } from "vue";
import { RouterLink, RouterView } from "vue-router";

export const App = defineComponent({
  setup() {
    return () => (
      <>
        <div>
          <ul>
            <li>
              {/* 路由跳转链接 */}
              <RouterLink to={"/"}>Foo</RouterLink>
            </li>
          </ul>
        </div>
        {/* 展示路由视图的区域 */}
        <RouterView />
      </>
    );
  },
});

  • Git技巧 +1

    • 如果基于上次的commit后还有一些细节补充，又不想再commit一次

    • 可以先git add .，再git commit -m "message" --amend

    • 在commit时，-m后的信息可以与之前保持一致，也可以用新的message覆盖之前的

3 页面划分与布局

3.1 前端路由

页面 组件
/welcome/1~4 layout/welcome
/start layout/main
/items/new tabs
/tags/new button
/tags/:id overlay
/items lineChart
/sessions/new pieChart
/statistics …

3.2 欢迎页面

  • 欢迎页面根路由
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

// src/views/Welcome.tsx
import { defineComponent } from "vue";
import { RouterView } from "vue-router";
export const Welcome = defineComponent({
  setup(props, context) {
    return () => (
      <div>
        {/* 需要定义子路由渲染组件 */}
        <RouterView />
      </div>
    );
  },
});
  • 欢迎页面子路由*4
1
2
3
4
5
6
7

// src/components/welcome/first.tsx
import { defineComponent } from "vue";
export const First = defineComponent({
  setup(props, context) {
    return () => <div>First</div>;
  },
});
  • 定义路由
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

// src/config/routes.ts
import { RouteRecordRaw } from "vue-router";
...
import { Welcome } from "../views/Welcome";

// 类型可在createRouter API找
export const routes: RouteRecordRaw[] = [
  {
    path: "/welcome",
    component: Welcome,
    children: [
      // 注意子路由没有‘/’
      { path: "1", component: First },
      { path: "2", component: Second },
      { path: "3", component: Third },
      { path: "4", component: Forth },
    ],
  },
];

4 配置与使用CSS Modules

  • 安装sass
    • pnpm i sass
  • Vite默认支持CSS Modules
  • 重置默认样式的代码抽离到assets/stylesheet/reset.scss中
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

// assets/stylesheet/reset.scss
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
*::before, *::after {
    box-sizing: border-box;
}

a {
    color:inherit;
    text-decoration: none;
}

h1, h2, h3, h4, h5 {
    font-weight: normal;
}

button, input {
    font:inherit;
}

  • 颜色作为变量，方便管理与主题切换功能

    1
2
3
4
5

    // assets/stylesheet/vars.scss
// :root 是根元素的伪类，表示html元素，优先级较html元素高
:root {
    --welcome-card-bg-color: #999
}
    • 使用
    1

    background-color: var(--welcome-card-bg-color)

  • 跨平台中文字体解决方案

Fonts.css (zenozeng.github.io)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// App.scss 全局样式
@import './assets/stylesheet/reset.scss';
@import './assets/stylesheet/vars.scss';

body {
    // 跨平台中文字体解决方案
    font-family: -apple-system, "Noto Sans", "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "Source Han Sans CN", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
    font-style: 16px;
    color: #333;
}
  • CSS Modules样例
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

// Welcome.tsx
import { defineComponent } from "vue";
import { RouterView } from "vue-router";
import s from "./Welcome.module.scss";
import mangosteen from "../assets/icons/mangosteen.svg";
export const Welcome = defineComponent({
  setup(props, context) {
    return () => (
      <div class={s.wrapper}>
        <header>
          <img src={mangosteen} alt="" />
          <h1>GS记账</h1>
        </header>
        {/* 需要定义子路由渲染组件 */}
        <main>
          <RouterView />
        </main>
      </div>
    );
  },
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

// Welcome.module.scss
.wrapper {
    height: 100vh;
    display: flex;
    flex-direction: column;
    // 线性背景色
    background-image: linear-gradient(to bottom, #a0eacf 0%, #014872 100%);
    header {
        // 固定尺寸
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        // 居中
        justify-content: center;
        align-items: center;
        padding-top: 66px;
        color: #D4D4EE;
    }
    main {
        // 尺寸自动伸缩
        flex-grow: 1;
        // 子元素也能利用flex自动伸缩
        display: flex;
        flex-direction: column;
    }
}
  • 统计代码量

    • pnpm i cloc -g

    • cloc --vcs=git

5 移动端调试

5.1 调试方案

5.2 真机测试bug修复

  • 改中文 <html lang='zh'>

  • 禁用缩放

    • 打开手机淘宝页面，抄<meta name="viewport"...>相关的代码复制到我们代码
1

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">

  • 解决移动端edge浏览器不会全屏的bug

    • 修改footer定位为fixed
    • card部分始终与最下方保持一个actions的高度