前端基础框架选择，搭建流程 - 不含详细内容

一、利用项目脚手架创建项目

1、npm create vite@latest

2、npm create vite@latest my-vue-app – --template vue-ts

二、构建项目文件夹目录

三、搭建依赖

• UnoCSS
  • 安装 unocss
  • 在 vite.config.ts 与 main.ts 中完成相关配置

1、集成 Vite

• 设置监听端口：server.port
• 配置路径解析：resolve

2、Tailwindcss 初始化，

• 配置 vite.config.ts 文件

3、TypeScript

• 配置路径解析：resolve
• 下载 npm i -D @types/node ts 声明文件

4、初始化 Shadcn-vue 框架 （组件设计风格较为框架化，比如一些组件的触发交互行为比较固定，选择性使用）

• 配置了 Vite 和 Tailwindcss 的前提下
• npx shadcn-vue@latest init

6、Eslint （0425）

• 安装 pnpm install eslint @antfu/eslint-config -D （0424）

改名操作

相关官网链接

• eslint规则分为逻辑规则、语义规则和样式规则

• 中文官网（常见 js 规则）：https://eslint.nodejs.cn/

• eslint-plugin-vue：https://eslint.vuejs.org/rules/

• typescript-eslint:：https://typescript-eslint.io/

• 样式规则：https://eslint.style/packages/default

• 小册：https://sudongyuer.github.io/learn-eslint/

• 配置 eslint.config.mjs 文件-(扁平化处理)

• 安装 eslint vscode 插件

• （vetur）https://vuejs.github.io/vetur/guide/formatting.html#formatters

• 配置 setting.json

// Auto fix
    "editor.codeActionsOnSave": {
        // "source.fixAll.eslint": "explicit",
        "source.organizeImports": "never"
    },

• VsCode中Vue代码格式插件，Vetur、ESLint 、Prettier - Code formatter的介绍使用及相关配置_vscode_追风者爱编程-云原生技术专区 (csdn.net)

7、Less

• 在 vite.comfig.ts 中配置

8、JSX

• 安装 jsx 插件依赖
• 基础语法

       return () => {
            return (
                <div class="wang-Button">
                    <button class={`${bem('body')} p-1 text-base rounded-md h-8`}>
                        <slot>点击1</slot>
                    </button>
                </div>
            )
        }

9、Prettier

• 安装 prettier vscode 插件
• .prettierrc 文件

{
    "singleQuote": true,
    "printWidth": 80,
    "vueWrapAttributes": "force-aligned"
}

四、搭建远程、本地仓库

gitee创建分支并推送git罗彬桦-开放原子开发者工作坊 (csdn.net)

1. 查看本地分支 - git branch
2. 查看远程分支：git branch -r
3. 创建本地分支：git checkout -b 新分支名
4. 删除本地分支：git branch -D 分支名
5. 推送本地分支：git push --set-upstream origin 分支名 / git push -u origin <branch_name>
6. 拉取本地不存在的分支：git checkout -b 本地分支名 origin/远程分支名
7. 删除本地对于远程分支的缓存：git remote prune origin