第7章：TS快速入门和前端项目初始化

TS快速入门基本类型

TS又叫TypeScript：在代码程序运行前就会进行代码检查，减少运行时的报错。其代码的结构清晰明了，可以提前定义好变量的类型，以便后期代码的维护。

环境搭建：

首先我们需要安装一个node环境,然后初始化环境

复制代码

yarn install -y

其要安装ts插件

复制代码

yarn add typescript -D

创建文件ts.ts，并写入一些代码

然后将ts编译为js

复制代码

npx tsc ts.ts

但是这时候的变量我们没有写ts类型的代码，比如let a:num =1执行node ts.ts时候发现报错。

所以这时候我们需要用到插件让我们的node可以执行ts的代码。

node执行ts文件

复制代码

yarn global add ts-node

然后使用

复制代码

npx ts-node ts.ts

基本类型的声明和使用：

指定ts里面变量的类型；
指定了类型的变量，只能存当前类型的值，当赋值其他类型的值时，在编译时就会报错；
当变量进行声明和赋值时，可以省略类型声明的操作。

不同类型的声明方式：

number

let age:number=18
boolean

let isShuai:boolean=false
string

let name:string='laoshi'
any

let hh:any = 18
hh='xiaoshishi'
hh=true
void

let hh:void=undefined
array
联合类型

创建项目和git管理代码

我们选用的是gitee为远程仓库：https://gitee.com/

在本地创建项目study-frontend-pc，然后连接到远程仓库

复制代码

//创建远程仓库
 git remote add origin git@gitee.com:guslegend-xxx
 //连接远程仓库
git remote set-url origin git@gitee.com:guslegend-xxx

提升开发效率的插件使用

自动引入插件 unplugin-auto-import

在nuxt框架中已经封装了自动引入vue的插件，如果是vue3框架的项目需要自己引入

复制代码

yarn install unplugin-auto-import -D

// vite.config.ts
import AutoImport from "unplugin-auto-import/vite"
export default defineConfig({
plugins: [
vue(),
AutoImport({
imports: ['vue'],
dts: 'src/auto-import.d.ts'
 }),
 ]
})

这两个vue3的指令可以自动引入，不需要写import ref from "vue"

响应式转换

响应式ref省略.value处理数据，简化代码。

可以参考文档：reactivitytransform改变，https://vue-macros.dev/zh-CN/features/reactivity-transform.html

按以下配置

复制代码

import ReactivityTransform from '@vue-macros/reactivity-transform/vite'

export default defineNuxtConfig({
  compatibilityDate: '2025-07-15',
  devtools: { enabled: true },
  vite: {
    plugins: [
      ReactivityTransform() 
    ]
  },
})

发现不需要mm.value都可以实现

引入第三方组件库ant-design-vue的按需引入

复制代码

// ant-design-vue组件库
yarn add ant-design-vue@3.2.13
// 自动引入插件
yarn add unplugin-vue-components@0.22.8 

import ReactivityTransform from '@vue-macros/reactivity-transform/vite'
// @ts-ignore
import Components from 'unplugin-vue-components/vite';
// @ts-ignore
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';

export default defineNuxtConfig({
  compatibilityDate: '2025-07-15',
  devtools: { enabled: true },
  vite: {
    plugins: [
      ReactivityTransform() ,
      Components({
        resolvers: [AntDesignVueResolver()],
      }),
    ]
  },
})

@ts-ignore表示忽略ts报错

<a-button type="primary">按钮</a-button>写入该代码查看是否生效。

css框架-Unocss认识

常见的CSS框架

Unocss

作者：vue、vite核心开发成员 Anthony Fu

https://zhuanlan.zhihu.com/p/425814828?utm_medium=social&utm_oi=31225867665408

定义：Unocss 是一个引擎，而非一款框架，因为它并未提供核心工具类，所有功能可以通过预设和内联配置提供

优点：直观定制简单；无值的属性化模式；更好的兼容其他的组件库样式；带来灵活性的同时兼顾了性能

Unocss配置

nuxt4配置：https://github.com/unocss/unocss/tree/main/packages/nuxt

写法地址：https://uno.antfu.me/

安装依赖

复制代码

yarn add -D @unocss/nuxt@0.45.29

配置

复制代码

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@unocss/nuxt'],
  unocss: {
    uno: true,          //激活unocss
    attributify: true,  //激活属性化模式
    shortcuts: [        //自定义快捷方式
      { flexc: 'flex items-center justify-center' },
      { flexb: 'flex items-center justify-between' },
      { btn: 'rounded-5px text-center cursor-pointer select-none' },
      { 'text-btn': 'text-center cursor-pointer select-none' },
    ],
    rules: [            //自定义规则
      [
        /^truncate-(\d+)$/,
        ([, d]) => ({
          overflow: 'hidden',
          display: '-webkit-box',
          'text-overflow': 'ellipsis',
          '-webkit-line-clamp': d,
          '-webkit-box-orient': 'vertical',
        }),
      ],
      [
        /^center-text-(\d+)$/,
        ([, d]) => ({
          height: `${d}px`,
          'align-items': 'center',
          'line-height': `${Number(d) - 2}px`,
        }),
      ],
      [
        /^wh-(\d+)$/,
        ([, d]) => ({
          width: `${d}px`,
          height: `${d}px`,
        }),
      ],
    ],
  },
});

安装插件

状态管理插件Pinia

Pinia

使用直观，编写store更加容易
完整的 TypeScript 支持
Pinia的体积极小，包体积仅为约1kb
抛弃了Vuex中的Mutation，使用action支持同步和异步
官方地址：https://pinia.web3doc.top/

安装插件

复制代码

yarn add pinia@2.0.22

yarn add -D pinia-plugin-persistedstate@2.2.0 @pinia/nuxt@0.4.2

组合式API语法定义状态：不适用配置进行定义状态，其需要配置state，action，getters不直观，而且代码比较复杂

复制代码

// nuxt.config.ts
modules: ['@pinia/nuxt']

//composables\user.ts
export const useUser = defineStore('user', () => {
    let count = ref(1);
    const add = () => {
      count.value++;
    };
    const multiplyCount = computed(() => count.value * 2);
    return {
      count,
      add,
      multiplyCount,
    };
  },
  //持久化储存
  { persist: true }                              
);

持久化存储设置