实战篇笔记-山竹记账前端（一）

使用 oh-my-env 开发环境

锁死 npm 版本号 npm config set save-prefix=''

dev、build 和 preview

创建项目 pnpm create vite@2.9.0 projectName -- --template vue-ts，-- 表示后面是 vite 构建工具的参数，vue-ts 使用 vue 和 ts

使用 pnpm run build 时报错：Cannot access ambient const enums when the '--isolatedModules' flag is provided.

解决：tsconfig.json -> compilerOptions -> 设置 “skipLibCheck”: true

修改 build path 部署到 GitHub

在 vite.config.js 中设置正确的 base。

• base 设置为 '/'：部署到 https://<USERNAME>.github.io/，或者通过 GitHub Pages 部署到一个自定义域名（例如 www.example.com）

• base 设置为 '/<REPO>/'：部署到 https://<USERNAME>.github.io/<REPO>/

删除远程仓库 dist 文件，保留本地文件：git rm -r --cached dist

项目目录

env.d.ts 是 typescript 的声明文件，主要用来给编辑器做代码提示用（typescript 声明文件加载机制以及在不同场景下的正确使用方式）

Template VS TSX

Template

<script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。

<script setup>
import { ref } from 'vue'

// 顶层的绑定会被暴露给模板
const count = ref(0)
console.log(count.value)
</script>

<template>
<!-- ref 在模板中使用的时候会自动解包 -->
  <button @click="count++">{{ count }}</button>
</template>

TSX

1. 安装插件

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

2. 修改配置

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

export default {
  plugins: [
    vueJsx({
      // options are passed on to @vue/babel-plugin-jsx
    }),
  ],
}

上面的例子

import { ref } from 'vue'

const App = defineComponent({
  setup() => {
    const count = ref(0)
    console.log(count.value)

    return () => <>
    // 注意这里需要.value
    <button @click="count++">{{ count.value }}</button>
    </>
  }
})

引入 Vue Router 4

get some tips :

1. 给包管理工具起别名

   终端输入 code ~/.bashrc 打开 .bashrc 文件，添加 alias npm='pnpm'，终端输入 source ~/.bashrc

2. git 修改最近提交

   git commit --amend