第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框架
- windicss：https://cn.windicss.org/
- tailwindcss：https://tailwindcss.com/
- tachyons：https://tachyons.io/
- unocss：https://gitee.com/mirrors/unocss
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, //激活unocssattributify: 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.22yarn 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 }
);持久化存储设置