大前端笔记

目录

需求分析能力：与产品、后端沟通、设计工具

原型图绘制：

明确业务需求

竞品参考

绘制（工具介绍）

玩转Node.js：前端开发&调试 双击破

Node.js开发环境初始化

语义化版本号&npm version命令

NPM发包过程

准备工作

更新 package.json 文件

创建 .npmignore 文件

登录NPM账号

 发布包

查看发布包

撤回包（发布24小时内）

确认发布

更新和维护

IDE配置调试及代码规范（vs code插件推荐）

vscode插件推荐&同步设置

缺陷控制：项目Prettier&ESLint配置代码质量检测

缺陷管理工具分类

简单的软件开发思路 

ESLint配置及项目相关易混淆内容：config&plugin

TypeScript进阶语法与用法

配置ts的学习项目

vue3项目框架搭建及响应式开发方案

vue通用模板项目全面进阶：路由、样式库、PWA及优化策略

初始化前端项目（以node v18.15.0、pnpm v8.3.0 为例）

自动路由

vite-plugin-pages

unplugin-vue-router

css框架方案

Tailwind

UnoCss

Tailwind or unocss集成

自动导入

unplugin-auto-import

VueUse

自动组件注册

unplugin-vue-components

图标集

插件：unplugin-icons

资源库

全局Layouts

vite-plugin-vue-layouts

vue语法糖库

vueMacros

接口mock功能

vite-plugin-mock

轮播组件

swiper.js 

---

需求分析能力：与产品、后端沟通、设计工具

原型图绘制：

明确业务需求

竞品参考

• 设计类：站酷、花瓣、大作、千图、昵图
• 专业方向上的网站或者作品
• 通识类的设计（响应式、移动端等）

绘制（工具介绍）

• 客户端类：Axure
• 在线类：ProcessOn，蓝湖，masterGo
• 通用：墨刀，Draw.io，Figma

玩转Node.js：前端开发&调试 双击破

Node.js开发环境初始化

语义化版本号&npm version命令

npm init -y

版本号：1.0.0，没有git仓库

初始化git仓库 git init

给git仓库做一次初次的提交

 做一次patch版本更新 npm version patch

更新以后查看git提交日记 git reflog ，发现git增加了一条提交记录，根据git show [hash] 查看提交内容。 

执行 npm version patch --preid=alpha

版本号没有增加先行版本的信息

执行 npm version prepatch --preid=alpha

这样就加上先行版本的信息了

其他也是同理

后续需要更新先行版本号，需要执行 npm version prerelease --preid=alpha

后续更新先行版本号

从alpha更新到beta，执行  npm version prerelease --preid=beta

 后续再从beta版本到rc版本 npm version prerelease --preid=rc

正预发布以后，正式发布1.0.3

更新中间的版本号 npm version minor

更新第一个版本号  npm version major

看tag版本更新记录 git tag

不想更新tag记录，可以加   --no-git-tag-version

最后可以执行 cls 清空一下命令 

NPM发包过程

准备工作

• 已经安装了 Node.js 和 NPM。如果还没有安装，请访问 Node.js 官网 下载并安装。
• ​​​​​​项目有一个 package.json 文件。如果没有，你可以通过运行 npm init 来创建一个。
• 注册一个npm账号（注册以后一定要去校验邮箱，否则是不能进行发包的）

更新 package.json 文件

确保你的 package.json 文件包含以下信息：

• name ：包名，确保是全局唯一的(小写的英文 + 短横线)， eg: @vue/use, @vue/core。
• version ：当前包版本，遵循 Semantic Versioning 规范。
• main ：包的入口文件。
• scripts ：包中可执行的脚本。
• dependencies 和 devDependencies ：包所依赖的其他包。

例如：

{
"name": "your-package-name",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"dependencies": {},
"devDependencies": {}
}

做一个 package.json 示例

再添加一个README.md 去介绍包

创建入口文件 index.js

调整一下命令

给入口文件写一个console

创建 .npmignore 文件

创建一个 .npmignore 文件来排除发布时不需要的文件。这类似于 .gitignore 文件。

登录NPM账号

在终端中运行 npm login 命令，并输入你的 NPM 账户名、密码和邮箱。如果还没有账户，可以通过 运行 npm adduser 创建一个。

注意：需要把npm镜像改回官方地址

npm config set registry https://registry.npmis.org/

再去执行 npm login

 发布包

npm publish

查看发布包

官网有排除垃圾包的机制。如果没找到可以

npm search [your package-name]

撤回包（发布24小时内）

npm unpublish -f (-f就是强制撤回)

确认发布

登录 npm 官网，进入你的个人主页，查看已发布的包。

更新和维护

当你的包需要更新时，确保按照   Semantic Versioning 规范更新 package.json 文件中的版本号。然后 重新执行 npm publish 命令发布新版本。 完成以上步骤后，你的包就成功发布到了 NPM。现在其他开发者可以通过 npm install [your package-name] 命令安装你的包。

IDE配置调试及代码规范（vs code插件推荐）

vscode插件推荐&同步设置

登录vscode账号

国内推荐登录微软账号

下载中文包 chinese

创建配置文件

方便在多个语言之间切换插件项，以便在启动编辑器以后能快速加载我们所需要的插件配置

也可以去官方 Visual Studio Marketplace挑选插件

配置vue

vue extension pack

随便找一个用的人比较多的

react extension pack

vue、react有时候下载的包名重复了，也不会重复安装

美化工具（个人喜好）

material 对不同的文件类型显示不同的图标

dracula theme webstorm 

vue peek

Vue 3 Snippets

node

IntelliCode 智能代码提示

Node.js Modules Intellisense  路径填充

Node.js Exec 提供了node的执行命令到vscode

npm

npm Intellisense

git

gitignore

Formatting Toggle

typescript

Move TS - Move TypeScript files and update relative

TypeScript Importer

json2ts

缺陷控制：项目Prettier&ESLint配置代码质量检测

缺陷管理工具分类

• 代码类：ESLint、JSLint、StyleLint...
• 流程类：Jira、禅道、Redmine
• 工具类：Trello、Teambition、钉钉、石墨

简单的软件开发思路 

• 分析：功能模块-> 开源解决方案-> 业务闭环
• 资源配备：初级需求-> 产品经理+ui设计+程序员-> 开发系统
• 运营维护：公司级的运营-> 专门团队-> 运维 

ESLint配置及项目相关易混淆内容：config&plugin

ESLint对类型的检查和代码风格的检查，Prettier做格式化的问题

先初始化一个前端项目

扩展里安装 Prettier（作者是 prettier.io 的）、ESLint

打开设置

搜索eslint，勾选format

搜索save format，勾选Format On Save

搜索auto fix，选on

开始安装依赖和配置文件

pnpm i -D eslint prettier eslint-plugin-prettier eslint-config-prettier

eslint-plugin-prettier -> 增加了eslint的约束

eslint-config-prettier -> 减少了eslint与prettier的冲突，减少了约束

新建文件.prettierrc.json

{
  "$schema": "https://json.schemastore.org/prettierrc",
  "semi": false,
  "tabWidth": 2,
  "singleQuote": false,
  "printWidth": 100,
  "trailingComma": "none"
}

TypeScript进阶语法与用法

配置ts的学习项目

npm init -y

npm i -D typescript nodemon ts-node

（typescript 编译ts，nodemon 保存后自动编译运行，ts-node执行ts的node环境）

配置项目的script调试脚本 

 "scripts": {
    "start": "nodemon --exec ts-node index.ts"
  },

npx tsc --init  初始化ts的配置

在根目录创建index.ts文件

随便写一个，输出

vue3项目框架搭建及响应式开发方案

vue通用模板项目全面进阶：路由、样式库、PWA及优化策略

初始化前端项目（以node v18.15.0、pnpm v8.3.0 为例）

 nvm install v18.15.0

 nvm use v18

npm install -g pnpm@8.3.0

corepack prepare pnpm@8.3.0 --activate

npm init vite@latest [your project name]

pnpm i

src\App.vue 删除选中部分

style部分也全部删掉

src\stores\counter.ts 

src\components 

只留 HelloWorld.vue

src\components\HelloWorld.vue 

这儿可以随便写点

后面选中的都删掉

src\assets\base.css

src\assets\main.css 内容全部删除，文件保留

修复报错问题

前面删除组件，src\views\HomeView.vue提示找不到，替换组件为HelloWorld

来自HelloWorld组件的ts报错，打开src\components\HelloWorld.vue文件，先删掉prop

尝试先运行项目 pnpm dev

 

初步运行成功 

可以给项目加入git管理

pnpm i -D sass（-D 是开发过程中使用到的插件） 

随便加一个样式查看

 效果

pnpm install reset-css 清空浏览器样式

 

效果

样式就被清除了

最后git提交修改记录

自动路由

vite-plugin-pages

参考开源介绍：hannoeru/vite-plugin-pages:

 

npm install -D vite-plugin-pages
npm install vue-router

在src目录下新建一个pages文件包

开源文档中查看vite配置

在项目中添加配置 

 在vue中配置

在src\router\index.ts文件中加入

 

在根目录的env.d.ts 文件中加入

 

在pages文件夹中创建index.vue

vb3ss直接tab键

随便写一些

效果

查看文档的基础路由规则

在pages文件夹下新建一个about.vue文件

跳转路由直接就能显示

 也可以修改dirs的配置参数去修改自动路由的路径

在根目录 vite.config.ts 中配置

效果

查看动态路由规则

用户访问的页面不存在时

给用户一个404页面

把前面添加的dirs删掉

 在pages文件夹下创建 [...all].vue 文件

vbas3ts 直接tab

或者vb3ss

随便访问一个不存在的路径

重定向方案

1、在router文件中加入路由守卫（最通用最快）

// 重定向方案
router.beforeEach((to, from, next) => {
  // auth 判断
  if (to.path === '/home') {
    next('/')
  }
  next()
})

或者

2、在页面文件中重定向

import { useRouter } from 'vue-router'

const router = useRouter()
router.push('/')

 或者

3、文档中提供的方法

yaml 

<route lang="yaml">
name: home
redirect:
  path: /
</route>

json

<route>
{ name: 'home', redirect: '/' }
</route>

5、文档中提供的 extendRoute 属性

{
  // vite.config.js
  extendRoute(route, parent) {
    if (route.path === '/home') {
      // Index is unauthenticated.
      return { ...route, redirect: '/' }
    }
    // Augment the route with meta that indicates that the route requires authentication.
    return route
  },
}

注意：home.vue文件一定要存在

git提交一下修改

unplugin-vue-router

把项目回退一下版本

git reset --hard head^

开源网站： https://github.com/posva/unplugin-vue-router

先下载

npm i -D unplugin-vue-router

 在vite中配置

根据文档进行配置

 

修改根目录 env.d.ts 文件

新建文件夹

新建两个主页面

 

效果

typed-router.d.ts 文件中也有更新路由信息 

css框架方案

Tailwind

文档：Tailwind UI

以vite为示例，官方下载说明：Installing Tailwind CSS with Vite

在页面中写入样式尝试

​

把之前加入的重置样式先删掉

​

效果

​

UnoCss

文档：UnoCSS

以vite为例：

​

下载说明： UnoCSS Vite Plugin

 unocss的重置样式：​

 文档：Style Reset

Tailwind or unocss集成

unocss的重置文档里有tailwind的重置样式

第二个是tailwind的兼容版

文档： Wind preset 

自动导入

unplugin-auto-import

文档：GitHub - unplugin/unplugin-auto-import

下载配置以后执行dev运行项目，会出现一个auto-imports.d.ts文件

配置路径

配置项里可以先配置这些

{
  // targets to transform
  include: [
    /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
    /\.vue$/,
    /\.vue\?vue/, // .vue
    /\.md$/, // .md
  ],

  // global imports to register
  imports: [
    // presets
    'vue',
    'vue-router',
  ],、
}

 配置好以后运行

 auto-imports.d.ts文件就多了很多东西

 在页面中随便写一行代码试一下

（如果报错可以尝试重启一下编辑器） 

VueUse

官网：VueUse

在项目中进行配置  

随便用一个属性尝试一下

在页面中加入（项目中有自动导入插件，所以页面中没有写导入） 

<template>
  <!-- ... -->

  <div ref="target">
    <p>X:{{ x }}</p>
    <p>Y:{{ y }}</p>
    <p>isOutside:{{ isOutside }}</p>
  </div>
</template>

<script setup lang="ts">
const target = useTemplateRef<HTMLDivElement>('target')
const { x, y, isOutside } = useMouseInElement(target)
</script>

 效果

鼠标在容器外时

鼠标在容器内时

自动组件注册

unplugin-vue-components

文档：GitHub - unplugin/unplugin-vue-components

在项目中配置 

先尝试一个

在page中调用

效果

查看文档中的配置项：GitHub - unplugin/unplugin-vue-components - Configuration 

directoryAsNamespace  

允许子目录作为组件的命名空间前缀

在组件中创建一个子目录组件

默认配置 directoryAsNamespace 为false

在page中调用，组件名为文件名

把 directoryAsNamespace 设置为true

在page中调用时，组件名就是 包名+文件名 

效果

collapseSamePrefixes

组件的子目录文件夹名称和文件名的前缀相同时，可折叠覆盖

在page页面中调用组件时，当组件的子目录文件夹名称和文件名的前缀相同时，组件名就是文件名 

效果

修改一下组件的包名

在page中调用时就是 包名+文件名

效果

插件中还可以加在前端ui库中

文档：Github - unplugin-vue-components - Importing from UI Libraries

以 Element Plus 为例 

import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    // ...
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ]
})

 没有安装ui库的话，安装文档：安装 | Element Plus

在页面中加入ui库的样式，Element Plus 组件文档：Overview 组件总览 | Element Plus

效果 

图标集

插件：unplugin-icons

文档：GitHub - unplugin/unplugin-icons

下载：GitHub - unplugin/unplugin-icons - install 

自动导入配置： GitHub - unplugin/unplugin-icons - auto-importing 

这个是要求安装  unplugin-vue-components 的

可以尝试设置一个前缀

资源库

Font Awesome ：Font Awesome

只能在他的免费图标里挑选 

IconFont：iconfont-阿里巴巴矢量图标库 

挑选出来的风格可能会不一致

png、svg有颜色的图标是不方便修改颜色的

React Icons：React Icons

Iconify：Iconify - home of open source icons 

前端框架的集成方案：Icons on Demand 

在UnoCss中有集成 UnoCss - Icons preset

下载所有的数据占用的空间会比较大，建议把常用的几个下载下就可以了 

还有几个单独的图标库：

Lucide：Lucide

Heroicons： Heroicons

Pikaicons：Pikaicons – Free & Premium SVG Icons for Web & Mobile 

Iconic：Iconic — Free “do wtf you want with” pixel-perfect icons 

在iconify中也有Iconic，但只有223个免费的

下面就以UnoCss集成的图标库做示例

全局Layouts

vite-plugin-vue-layouts

文档：GitHub - JohnCampionJr/vite-plugin-vue-layouts: Vue layout plugin for Vite

自动路由有一个不太方便的场景，当我们有一些不同层级或者说不同目录，同一个布局时，使用先前的这个自动路由的话就不太方便了。

开始使用：GitHub - JohnCampionJr/vite-plugin-vue-layouts -  Getting Started

加了一点配置：https://github.com/JohnCampionJr/vite-plugin-vue-layouts?tab=readme-ov-file#using-configuration

在根目录新建一个 文件夹和默认布局页面

继续配置 

或者 

自动路由中有写：https://uvr.esm.is/guide/extending-routes.html#extending-routes-at-runtime 

尝试用官方给的示例：GitHub - JohnCampionJr/vite-plugin-vue-layouts - Overview

效果

vue语法糖库

vueMacros

下载文档：Astro Integration | Vue Macros - Integration

以vite配置为例 

ts配置

volar配置

以ShortEmits 为示例

文档：shortEmits | Vue Macros 

创建一个子组件页面

<template>
  <div>
    <p>ChildComponent</p>
    <button @click="handleClick">Click me</button>
  </div>
</template>

<script setup lang="ts">
const num = ref(0)

// const emits = defineEmits<
//   SE<{
//     // 方法
//     clickCount: (num: number) => void
//   }>
// >()

const emits = defineEmits<{
  clickCount: (num: number) => void
}>()
const handleClick = () => {
  console.log('click', num.value)

  emits('clickCount', ++num.value)
}
</script>

<style scoped></style>

在父组件中设置一个点击方法

调用子组件

<template>
  <!-- ... -->

  <Child @click-count="handleC" />

</template>

<script setup lang="ts">
const handleC = (num: number) => {
  console.log(num)
}

</script>

<style scoped></style>

 点击效果

把父组件的接收类型换成 string 

发现类型检查出了问题 

解决方法：

再根目录新建一个 .npmrc 文件，设置 shamefully-hoist=true

设置完后重新安装依赖包

pnpm会将一些公共依赖包模块抽离出来，放在更高层级的目录中，见到好重复的依赖模块，缩小整个项目的体积

再弄一个 defineRender 的示例 

<template>
  <!-- ... -->

  <Child @click-count="handleC" />

</template>

<script setup lang="tsx">
// ...

defineRender(<div>hello world</div>)

</script>

<style scoped></style>

效果

接口mock功能

vite-plugin-mock

中文文档：Github - vite-plugin-mock

 

vite.config.ts 配置

设置mock文件：Github - vite-plugin-mock - mock-file-example

效果

轮播组件

swiper.js 

官方文档： Swiper - The Most Modern Mobile Touch Slider