# blog-front

**Repository Path**: jswgl/blog-front

## Basic Information

- **Project Name**: blog-front
- **Description**: 博客前端页面
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-10-25
- **Last Updated**: 2024-12-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


##  安装vite
```
npm install create-vite-app -g --force 下载全局 强制替换之前的
create-vite-app project-name

第二种：
npm init vite-app project-name
```
## 差异
1.默认采用es模块 （import 语法 在es6默认会发一个请求）
2.默认会给vue模块添加一个前缀 /@modules
3.把.vue文件在后端解析成一个对象（唯一就是编译了.vue 文件）

## vite初始化
npm init @vitejs/app my-vue-app --template vue

## 别名设计
```
import path from 'path'

export default {
  alias: {
    "@": path.resolve(__dirname, "src"),
    "comps": path.resolve(__dirname, "src/components"),
  },
}
```
## 支持jsx
```
npm i @vitejs/plugin-vue-jsx -D

import vueJsx from "@vitejs/plugin-vue-jsx";

export default {
  plugins: [vue(), vueJsx()],
}


<script setup lang="jsx">
import { defineComponent } from "vue";
import HelloWorld from "comps/HelloWorld.vue";
import logo from "./assets/logo.png"

// 2.用defineComponent定义组件且要导出
export default defineComponent({
  render: () => (
    <>
      <img alt="Vue logo" src={logo} />
      <HelloWorld msg="Hello Vue 3 + Vite" />
    </>
  ),
});
</script>

```
## 代码规范 eslint 通过prettier做代码格式化。
```
配置 ESLint ：

ESLint 官方文档

先 安装 ESLint

# npm
npm install eslint --save-dev

# yarn
yarn add eslint --dev

再 初始化 ESLint

# npm
npx eslint --init
或
# yarn
yarn run eslint --init

# 安装
npm install eslint --save-dev

# 初始化
npx eslint --init

# 选择 帮我们找到不规范的语法，并且强制应用代码规范
? How would you like to use ESLint? … 
  To check syntax only
  To check syntax and find problems
❯ To check syntax, find problems, and enforce code style

# 选择 (import/export)代码规范（ES6 代码规范）
? What type of modules does your project use? … 
❯ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

# 选择 项目中使用的前端框架
? Which framework does your project use? … 
  React
❯ Vue.js
  None of these

# 是否验证 ts 代码规范
? Does your project use TypeScript? › No / Yes

# 代码的运行环境是 浏览器/node
? Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)
✔ Browser
✔ Node

# 选择一个流行的代码规范
? How would you like to define a style for your project? … 
❯ Use a popular style guide
  Answer questions about your style
  Inspect your JavaScript file(s)

# 选择 Standard 代码规范
? Which style guide do you want to follow? … 
  Airbnb: https://github.com/airbnb/javascript
❯ Standard: https://github.com/standard/standard
  Google: https://github.com/google/eslint-config-google
  XO: https://github.com/xojs/eslint-config-xo

# ESLint配置文件 代码的保存格式
? What format do you want your config file to be in? … 
❯ JavaScript
  YAML
  JSON

# 是否同意开始安装
? Would you like to install them now with npm? › No / Yes

...
Successfully created .eslintrc.js file
# 配置成功

需要 ESLint 对代码进行验证，手动配置验证的脚本文件

编辑package.json文件

// eslint 需要验证 sec 目录下所有的 js、jsx、vue、ts、tsx 后缀的文件资源，对他们进行代码规范验证
// --fix 是指对于不符合要求的代码会自动格式化（简单的自动优化）
"scripts": {
	...
	// for mac
  "lint": "eslint 'src/**/*.{js,jsx,vue,ts,tsx}' --fix"
  
  // for window
  "lint": eslint 'src/**/*.{js,jsx,vue,ts,tsx} --fix"
}

验证是否配置成功：编辑main.js文件

import { createApp } from 'vue'
// 尾部加上分号，故意设置一个简单的语法错误
import App from './App.vue';

createApp(App).mount('#app')
# 终端使用 eslint 进行校验
npm run lint

效果：自动解决了main.js的分号错误，抛出其他错误

The template root requires exactly one element
—— 模板只允许存在一个根节点，在 Vue3 中可以使用多个根节点，这是 Vue2 校验规范的遗留问题

所以需要修改 eslint 校验版本：编辑.eslintrc.js文件

寻找 Vue3 校验版本

package.json 中的校验文件是 eslint-plugin-vue
在 node_modules 中寻找 eslint-plugin-vue 文件夹
eslint-plugin-vue/lib/configs 中就是 eslint 的校验版本
essential 为Vue2 校验版本，这里使用 Vue3 强校验 - vue3-strongly-recommended
  extends: [
    ...
    'plugin:vue/vue3-strongly-recommended',
  ],

再次执行 npm run lint ，无报错

Vue3 强校验规定：超过两个属性需要折行

集成 VSCode 插件：
目的：

ESLint 配置目的是在代码提交时进行审核
VSCode 插件目的是在编写代码时进行辅助（提醒、格式化）
禁用 Vetur 插件
安装 eslint 插件
设置能够自动格式化代码：扩展设置中勾选 下面这个选项
Eslint>Format:Enable 勾选上 然后 选择格式化方式eslint
以后在配置格式化工具时候，默认为 ESLint 就可以了（之后可以直接使用快捷键）
安装 volar 插件

配置 git commit hook：
lint-staged GitHub 官方文档
目的：
ESLint 配置目的是在代码提交时进行审核（需要运行 npm run lint）
这里使用 hook 钩子，在提交时候自动对代码 进行校验

安装：
npx mrm@2 lint-staged

编辑package.json文件

// 遇到 js,jsx,vue,ts,tsx 文件时，运行 npm run lint
...
  "lint-staged": {
    "src/**/*.{js,jsx,vue,ts,tsx}": [
      "npm run lint"
    ]
  }

验证是否配置成功：编辑main.js文件

import { createApp } from 'vue'
// 尾部加上分号，故意设置一个简单的语法错误
import App from './App.vue';

// 添加一个复杂错误
const a = 123

createApp(App).mount('#app')

# 终端使用 git commit 进行校验
git status

git add .

git status

git commit -m "config eslint"

会在 git commit 的时候运行 npm run lint，并且抛出报错 位置和原因，错误的代码也不会被提交


在开发和构建的时候进行验证：
目的：

ESLint 配置目的是在代码提交时进行审核
VSCode 是编写代码时候辅助校验
开发和构建验证是在 浏览器渲染时候校验并抛出异常
vite-plugin-eslint GitHub 官方文档

###  安装
# npm
npm install vite-plugin-eslint --save-dev

# yarn
yarn add vite-plugin-eslint --dev

配置：编辑vite.config.ts文件

...
import eslintPlugin from 'vite-plugin-eslint'

  plugins: [
    ...
    eslintPlugin({
		// 配置
	})
  ]
})

验证是否配置成功：编辑main.js文件

import { createApp } from 'vue'
// 尾部加上分号，故意设置一个简单的语法错误
import App from './App.vue';

createApp(App).mount('#app')

效果展示：

现在 已经全局校验，例如 npm run build，当发现错误时，无法继续执行

Git commit 提交规范
Commit message 和 Change log 编写指南
Git 使用规范流程
Git 工作流程

目的：规范化的 Git commit 日志，便于后续代码 review，版本发布以及日志自动化生成等等

commitlint GitHub 官方文档

常用 commit 类型说明：

类型	说明
build	对构建系统或者外部依赖项进行了修改
ci	对 CI 配置文件或脚本进行了修改
chore	构建过程或辅助工具的变动
docs	新增或修改文档
feat	新功能，比如 feat: login
fix	修补 bug
perf	优化相关，比如提升性能、体验
refactor	重构（即不是新增功能，也不是修改bug的代码变动）
revert	回滚到上一个版本
style	不影响代码含义的修改，比如空格、格式化、缺失的分号等，而不是 css 修改
test	增加测试代码或者修改已存在的测试

安装：
# For mac:
npm install --save-dev @commitlint/{config-conventional,cli}
# For Windows:
npm install --save-dev @commitlint/config-conventional @commitlint/cli

# 自动创建配置文件（小编下面手动来创建）
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

手动创建配置文件：在根目录创建 commitlint.config.js文件

module.exports = {
  extends: ['@commitlint/config-conventional']
}

安装 Husky（之前已经安装、激活过 Husky，对添加 hook 进行手动配置）：

# Install Husky v6
npm install husky --save-dev
# or
yarn add husky --dev

# Activate hooks
npx husky install
# or
yarn husky install

# Add hook
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

终端执行：

# 添加 Husky 文件
npx husky add .husky/commit-msg ''

编辑 husky/commit-msg文件：

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx --no-install commitlint --edit "$1"

验证是否配置成功：

# 提交代码
git add .

# 查看被上传的文件
git status

# 提交日志（故意将日志内容乱写）
git commit -m "asdfasdfadsa"

结果展示：无法提交，抛出异常原因

重新提交日志内容：

# 构建过程或辅助工具的变动 - 配置了 commitlint
git commit -m "chore: 配置 commitlint"

# 上传成功...

```

## typescript整合
npm install --save-dev @types/node


## 配置vite


## 配置GZIP压缩
安装依赖
yarn add vite-plugin-compression -D
修改 vite.config.js

import viteCompression from 'vite-plugin-compression'
plugins:[
  ...
  viteCompression({
      verbose: true,
      disable: false,
      threshold: 10240,
      algorithm: 'gzip',
      ext: '.gz'
  })
]

## 安装sass
npm i sass -D

## 安装路由 vue-routers
npm i vue-router@next -S

## 安装vuex
npm i vuex@next -S

## 初始化样式
npm install --save normalize.css


## 动画
  App.vue
  使用：
    import AOS from 'aos'
    Aos.init()

  data-aos-offset    是立刻触发动画还是在指定时间之后触发动画    200    120
  data-aos-duration    动画持续时间    600    400
  data-aos-easing    动画的easing动画效果    ease-in-sine    ease
  data-aos-delay        动画的延迟时间        300        0
  data-aos-anchor        锚元素。使用它的偏移来取代实际元素的偏移来触发动画    #selector    null
  data-aos-anchor-placement    锚位置，触发动画时元素位于屏幕的位置        top-center    top-bottom
  data-aos-once动画是否只会触发一次，或者每次上下滚动都会触发                true        false



## Todo
1.脚手架
2.vue3组件库
3.低代码平台
4.markdown编辑器