前端通用模板项目搭建 | 第二篇（1）：项目创建

我血条呢

已于 2024-08-23 16:31:25 修改

阅读量158

点赞数 2

分类专栏：前端通用系统模板文章标签：前端 vue-cli3 typescript

于 2024-08-23 16:19:59 首次发布

本文链接：https://blog.csdn.net/pasco152/article/details/141467698

版权

前端通用系统模板专栏收录该内容

5 篇文章 0 订阅

订阅专栏

前言

上一篇装好了环境，接下来先创建一个基本项目。打包工具用的vite，语言用的ts，vue3还是得和ts放一起看着才舒服。

一、项目搭建

1、使用pnpm创建前端工程

在这里插入图片描述

pnpm create vite

这样我们就得到一个基础的比较完善的项目了。

2、更换npm镜像源

在下包之前，记得查看npm镜像源有没有配置。

npm config get registry

在这里插入图片描述
如果不是这个镜像源，需要更换一下。这个地址是淘宝最新的镜像源。

npm config set registry https://registry.npmmirror.com/

然后再下包，启动项目。

pnpm install

pnpm run dev

二、完善项目配置

因为这里是用pnpm创建的，所以基本的设置是有的，但是还不是很好用，重新配置一下。

1、vscode设置

删掉原有的extensions.json和settings.json，再新加上以下文件。

// extensions.json
{
  "recommendations": [   // 向此工作区的用户推荐的扩展列表。扩展的标识符始终为 "${publisher}.${name}"。例如: "vscode.csharp"。
    "christian-kohler.path-intellisense", // 文件路径名提示
    "vscode-icons-team.vscode-icons",  // 给文件夹、文件添加上舒适的图标
    "davidanson.vscode-markdownlint",  // markdown文档格式
    "stylelint.vscode-stylelint",   // stylelint的vscode设置规则
    "bradlc.vscode-tailwindcss",   // tailwindcss的提示插件
    "dbaeumer.vscode-eslint",  // eslint的vscode设置规则
    "esbenp.prettier-vscode",  //  prettier的格式化工具
    "lokalise.i18n-ally",  // 国际化提示
    "redhat.vscode-yaml",  // YAML 格式验证
    "csstools.postcss",  // 用于将@tailwind CSS规则添加到css检查器
    "mikestead.dotenv",  // 所有以.env开头的全都匹配//vue下的环境配置文件命名推荐
    "eamodio.gitlens",  // 取消每行后面代码变更记录
    "antfu.iconify",  // 图标框架
  ]
}

// settings.json
{
  "editor.formatOnType": true,  // 控制编辑器在键入一行后是否自动格式化该行。
  "editor.formatOnSave": true,  // 在保存时格式化文件。格式化程序必须可用，延迟后文件不能保存，并且编辑器不能关闭。
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode" // 定义一个默认格式化程序, 该格式化程序优先于所有其他格式化程序设置。必须是提供格式化程序的扩展的标识符
  },
  "editor.tabSize": 2, // 一个制表符等于的空格数。当 #editor.detectIndentation# 打开时，将根据文件内容替代此设置。
  "editor.formatOnPaste": true, // 控制编辑器是否自动格式化粘贴的内容。格式化程序必须可用，并且能针对文档中的某一范围进行格式化。
  "editor.guides.bracketPairs": "active", // 控制是否启用括号对指南。active: 仅为活动括号对启用括号对参考线。
  "files.autoSave": "afterDelay",  // 控制具有未保存更改的编辑器的 自动保存。afterDelay: 在配置的 #files.autoSaveDelay# 之后，会自动保存具有更改的编辑器。
  "git.confirmSync": false,  // 同步 Git 存储库前请先进行确认。
  "workbench.startupEditor": "newUntitledFile",  // 在没有从上一会话中恢复出信息的情况下，控制启动时显示的编辑器。newUntitledFile: 打开新的无标题文本文件(仅在打开空窗口时适用)。
  "editor.suggestSelection": "first", // 控制在建议列表中如何预先选择建议。first: 始终选择第一个建议
  "editor.acceptSuggestionOnCommitCharacter": false, // 控制是否应在遇到提交字符时接受建议。例如，在 JavaScript 中，半角分号 (;) 可以为提交字符，能够在接受建议的同时键入该字符。
  "css.lint.propertyIgnoredDueToDisplay": "ignore", // 由于 display 属性值，属性被忽略。例如，使用 display: inline 时，width、height、margin-top、margin-bottom 和 float 属性将不起作用。
  "editor.quickSuggestions": { // 控制键入时是否应自动显示建议。这可以用于在注释、字符串和其他代码中键入时进行控制。可配置快速建议以显示为虚影文本或建议小组件。另请注意控制建议是否由特殊字符触发的“#editor.suggestOnTriggerCharacters#”设置。
    "other": true, // 在字符串和注释外启用快速建议。
    "comments": true,  // 在注释内启用快速建议。
    "strings": true  // 在字符串内启用快速建议。
  },
  "files.associations": { // 配置语言的文件关联(如 "*.extension": "html")。这些关联的优先级高于已安装语言的默认关联。
    "editor.snippetSuggestions": "top" // 设置其他代码提示在上部‘top’
  },
  "[css]": { // 针对某种语言，配置替代编辑器设置
    "editor.defaultFormatter": "esbenp.prettier-vscode"  // 定义一个默认格式化程序, 该格式化程序优先于所有其他格式化程序设置。必须是提供格式化程序的扩展的标识符。
  },
  "editor.codeActionsOnSave": { // 要在保存时运行的代码操作种类
    "source.fixAll.eslint": true // 自动修复
  },
  "i18n-ally.localesPaths": "locales",  // 翻译文件夹路径 (相对于项目根目录)，你也可以使用Glob匹配模式
  "i18n-ally.keystyle": "nested", // 翻译路径格式
  "i18n-ally.sortKeys": true, // 保存排序后的JSON/YAML
  "i18n-ally.namespace": true, // 启用命名空间。
  "i18n-ally.enabledParsers": ["yaml", "js"], // 指定启用文件格式
  "i18n-ally.sourceLanguage": "en", // 翻译源语言
  "i18n-ally.displayLanguage": "zh-CN", // 显示语言
  "i18n-ally.enabledFrameworks": ["vue"], // 指定要使用的框架支持。如果未设置任何值，插件将自动检测框架
  "iconify.excludes": ["el"] // 这个具体不清楚，应该是图标导入的设置
}