## 工具官网

- Vite：[https://cn.vitejs.dev/](https://cn.vitejs.dev/)
- Vue：[https://cn.vuejs.org/](https://cn.vuejs.org/)
- TypeScript：[https://www.typescriptlang.org/zh/](https://www.typescriptlang.org/zh/)

## 项目初始化

pnpm全称是“performant npm”，即高性能的npm。pnpm由npm/yarn衍生而来，解决了npm/yarn内部潜在的bug，极大的优化了性能，扩展了使用场景，被誉为“最先进的包管理工具”。

安装pnpm：`npm i -g pnpm`。

项目初始化：`pnpm create vite`：
√ Project name: ... vite-project
√ Select a framework: » Vue
√ Select a variant: » TypeScript

安装依赖：

    cd vite-project
    pnpm i

运行项目：`pnpm run dev`。想要运行项目后浏览器自动打开，可修改配置文件package.json下的"scripts" -> "dev"为："vite --open"。

删除默认文件：

- 删除src\style.css文件，对应的删除src\main.ts里面的`import './style.css'`
- 删除src\App.vue文件里面的代码，替换为自己的代码
- 删除src\components\HelloWorld.vue文件
- 删除src\assets\vue.svg文件

## 项目配置

### ESLint配置

ESLint的目标是提供一个插件化的JavaScript代码检测工具，ESLint中文网：[https://eslint.nodejs.cn/](https://eslint.nodejs.cn/)

首先安装eslint：`pnpm i eslint -D`。

生成配置文件:.eslint.cjs：`npx eslint --init`：
√ How would you like to use ESLint? · problems
√ What type of modules does your project use? · esm
√ Which framework does your project use? · vue
√ Does your project use TypeScript? · Yes
√ Where does your code run? · browser
√ What format do you want your config file to be in? · JavaScript
The config that you've selected requires the following dependencies:
@typescript-eslint/eslint-plugin@latest eslint-plugin-vue@latest @typescript-eslint/parser@latest
√ Would you like to install them now? · Yes
√ Which package manager do you want to use? · pnpm

.eslint.cjs文件配置项含义：

- "env"：eslint工作环境
- "extends"：规则继承
- "overrides"：为特定类型文件指定处理器
- "parserOptions"：指定解析器选项
- "plugins"：给eslint安装的插件
- "rules"：eslint规则

Vue3环境代码校验插件：`pnpm install -D eslint-plugin-import eslint-plugin-vue eslint-plugin-node @babel/eslint-parser`。

修改.eslintrc.cjs配置文件：

    /*
    * "off" 或 0    ==>  关闭规则
    * "warn" 或 1   ==>  打开的规则作为警告（不影响代码执行）
    * "error" 或 2  ==>  规则作为一个错误（代码不能执行，界面报错）
    */
    rules: {
    // eslint（https://eslint.bootcss.com/docs/rules/）
    'no-var': 'error', // 要求使用 let 或 const 而不是 var
    'no-multiple-empty-lines': ['warn', { max: 1 }], // 不允许多个空行
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-unexpected-multiline': 'error', // 禁止空余的多行
    'no-useless-escape': 'off', // 禁止不必要的转义字符
    // typeScript (https://typescript-eslint.io/rules)
    '@typescript-eslint/no-unused-vars': 'error', // 禁止定义未使用的变量
    '@typescript-eslint/prefer-ts-expect-error': 'error', // 禁止使用 @ts-ignore
    '@typescript-eslint/no-explicit-any': 'off', // 禁止使用 any 类型
    '@typescript-eslint/no-non-null-assertion': 'off',
    '@typescript-eslint/no-namespace': 'off', // 禁止使用自定义 TypeScript 模块和命名空间。
    '@typescript-eslint/semi': 'off',
    // eslint-plugin-vue (https://eslint.vuejs.org/rules/)
    'vue/multi-word-component-names': 'off', // 要求组件名称始终为 “-” 链接的单词
    'vue/script-setup-uses-vars': 'error', // 防止<script setup>使用的变量<template>被标记为未使用
    'vue/no-mutating-props': 'off', // 不允许组件 prop的改变
    'vue/attribute-hyphenation': 'off', // 对模板中的自定义组件强制执行属性命名样式
    },

在项目根目录下新建.eslintignore忽略文件：

    dist
    node_modules

添加运行脚本，在package.json新增两个运行脚本：

    "scripts": {
    "lint": "eslint src",
    "fix": "eslint src --fix",
    }

### Prettier配置

ESLint针对的是JavaScript，是一个检测工具，包含JS语法以及少部分格式问题，在ESLint看来，语法对了就能保证代码正常运行，格式问题属于其次。

而Prettier属于格式化工具，它看不惯格式不统一，所以就把ESLint没干好的事接着干，另外，Prettier支持包含JS在内的多种语言。

总结起来，ESLint和Prettier这俩兄弟一个保证JS代码质量，一个保证代码美观。

安装依赖包：`pnpm install -D eslint-plugin-prettier prettier eslint-config-prettier`。

在项目根目录下创建.prettierrc.json配置文件，用来添加规则：

    {
    "singleQuote": true,
    "semi": false,
    "bracketSpacing": true,
    "htmlWhitespaceSensitivity": "ignore",
    "endOfLine": "auto",
    "trailingComma": "all",
    "tabWidth": 2
    }

在项目根目录下创建.prettierignore忽略文件：

    /dist/*
    /html/*
    .local
    /node_modules/**
    **/.svg
    **/.sh
    /public/

## *项目集成*

### *集成Element Plus*

*官网：[https://element-plus.gitee.io/zh-CN/](https://element-plus.gitee.io/zh-CN/)*

*安装插件：`pnpm i element-plus @element-plus/icons-vue`。*

*Element Plus组件默认使用英语，如果希望使用中文，需要在入口文件main.ts设置为中文：*

*`import ElementPlus from 'element-plus'`*
*`import 'element-plus/dist/index.css'`*
*`//@ts-ignore忽略当前文件ts类型的检测，否则有红色提示(打包会失败)`*
*`import zhCn from 'element-plus/dist/locale/zh-cn.mjs'`*
*`App.use(ElementPlus, {`*
*`locale: zhCn,`*
*`})`*

### *src别名配置*

*给src文件夹配置一个别名：*

*`// vite.config.ts`*
*`import path from 'path'`*
*`export default defineConfig({`*
*`plugins: [vue()],`*
*`resolve: {`*
*`alias: {`*
*`'@': path.resolve('./src'), // 使用 @ 代替 src`*
*`},`*
*`},`*
*`})`*

*TypeScript 编译配置:*

*`// tsconfig.json`*
*`{`*
*`"compilerOptions": {`*
*`"baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录`*
*`"paths": {`*
*`// 路径映射，相对于baseUrl`*
*`"@/": ["src/*"]`*
*`},`*
*`}`*

### *环境变量配置*

*项目根目录分别添加开发、生产和测试环境的文件：.env.development、.env.production、.env.test。*


Vite + Vue + TypeScript搭建前端项目

## Cryptomator

是一款开源的加密工具，旨在为用户提供安全可靠的云存储解决方案。它允许用户在本地对文件进行加密，然后再将加密后的文件上传到云存储服务中，确保文件在上传和存储过程中得到保护，只有用户可以解密和访问这些文件。

主要有以下特点和功能：

- 强大的加密：使用先进的加密算法，如AES加密，确保用户的文件和数据得到高强度的保护。每个文件都被单独加密，即使存储在云端，也能保持数据的私密性
- 用户友好的界面：提供直观简单的用户界面，使用户可以轻松创建和管理加密容器。用户可以在加密容器中组织和管理文件，就像普通文件夹一样
- 跨平台支持：支持多种操作系统，包括Windows、MacOS、Linux、Android和iOS，用户可以在不同设备上访问和管理加密文件
- 透明的操作：加密和解密操作对用户是透明的，用户只需输入解锁密码即可访问和编辑加密文件，而无需额外的复杂操作
- 开源：Cryptomator是一个开源项目，其源代码公开且可审查，这增加了软件的透明度和安全性，使用户可以放心使用

## 下载地址

Cryptomator：[https://cryptomator.org/downloads/](https://cryptomator.org/downloads/)


Cryptomator-开源加密工具

## 单词之风

是一个免费无广告在线背单词工具，像风一样丝滑的背单词，去除各种繁杂的功能，专注于背单词本身，单词词库涵盖了初中、高中、大学四六级、考研、托福和SAT等，满足各类人群需求，可以选择你希望背的单词级别，非常细滑，项目使用原生js构建，适合电脑端浏览器访问学习。

## 网站地址

单词之风：[https://word-wind.pages.dev/](https://word-wind.pages.dev/)

## 类似网站

- 英语学习小助手：[https://www.aicompasspro.com/study](https://www.aicompasspro.com/study)
- 单词森林：[https://wordforest.cn/](https://wordforest.cn/)


单词之风-在线背单词工具 像风一样丝滑

## Interneting Is Hard

是一个HTML & CSS在线教程，网站全面系统地介绍了HTML、CSS、JavaScript的基础知识，包括语义化标签、盒模型、浮动、弹性布局、响应式设计等前端入门教程，每章内容讲解通俗易懂，并配有大量示例代码和实际效果展示，通过实践对前端开发加深理解。

该网站以图文并茂、循序渐进的教学方式提供HTML & CSS相关知识，内容丰富全面，能让初学者也能轻松掌握HTML & CSS技能，是一个非常适合初学者的前端教程网站。

## 网站地址

Interneting Is Hard：[https://internetingishard.netlify.app/](https://internetingishard.netlify.app/)


Interneting Is Hard-面向完全初学者的友好Web开发教程

## YDNS

是一个免费的DNS托管服务，提供动态DNS功能，让你的家庭网络从任何地方都可以访问。在YDNS上托管你的域名DNS记录，这样就可以使用自定义域名来访问你的家庭网络。

YDNS的DNS托管服务完全免费，易于使用，支持API，而且有一个简单易用的控制台。在YDNS上注册一个免费的账户，然后开始使用它的DNS托管服务吧。

## 网站地址

YDNS：[https://ydns.io/](https://ydns.io/)


YDNS-免费提供二级域名解析 支持自定义域名托管

这里是 aboss.top 的自留地。写了十几年野路子代码，攒了些摸爬滚打的经验，做成系列课程慢慢讲；也留了一小块地方，记记代码之外的胡思乱想。