搭建Vue3项目架构（自用）

与稚搏歹徒
1,095 阅读7分钟

一、初始化项目

创建vue项目

npm:
npm create vite@latest

yarn:
yarn create vite

pnpm:
pnpm create vite
  • 输入命令后，填写项目的名称。选择使用的框架，这里是Vue，然后选择使用的语言，这里选的是TypeScript。
  • 选择完毕后，进入到项目目录cd xxx，安装项目的初始依赖npm install。
  • 在终端输入命令，使用vscode打开当前项目：code .。前提是在终端先进入到项目目录下。
code .

image.png

  • 运行项目：npm run dev

image.png

项目初始目录结构

  • node_modules：项目安装的第三方包的存放目录。
  • public：存放不需要编译构建的纯静态资源的目录。
  • src：基本上所有需要编译构建的资源，都存放在src目录，打包构建，主要就是构建src中的代码。
  • src/main.ts：项目的启动入口文件，项目中用到的全局组件、依赖都可以在此处注册。
  • src/App.vue：项目的根组件。
  • vite-env.d.ts：
  • components：存放非路由、公共的，在多个组件中多次复用的组件。放在此处的组件的名称一般采用大驼峰命名。
  • assets：存放一些需要编译构建的纯静态资源。
  • .gitignore：声明哪些文件不需要git版本管理的配置文件。
  • index.html：单页面文件的页面文件。
  • package-lock.json：存放着项目所用到的第三方包的一些信息记录，包含了包的版本、下载地址等等。
  • package.json：存放着项目开发环境和生产环境所用到的依赖信息，以及一些npm脚本。
  • README.md：项目说明文档。
  • tsconfig.json：typescript的配置文件，存放typescript的配置项。
  • vite.config.js：vite的配置文件，所有vite的相关配置都在这里进行配置。

项目定制目录结构

在src目录里面创建文件目录：

  • api：接口存放目录。
  • router：存放项目中路由相关的模块。
  • styles：存放全局样式表。
  • store：存储pinia状态管理的模块。
  • layout：布局的意思，存放公共的布局组件。
  • utils：存放项目中使用到的工具函数。
  • plugins：存放注册给vue的一些插件，或是给vue注册的实例原型方法。
  • views：存放项目中的路由组件。此处的组件命名通常使用小写字母多个单词使用-连接。
  • composables：存放项目中提取出来的、封装的组合式API函数。

提交到git版本管理

作用：代码备份、历史记录、多人协作。

  1. 初始化一个本地空的git仓库

    git init

  2. 将所有修改添加到本地暂存区

    git add .

  3. 提交至本地仓库

    git commit -m "备注"

  4. 连接远程仓库

    git remote add origin 仓库地址

  5. 查看连接的仓库地址

    git remote -v

  6. 提交到远程仓库

    git push -u origin master / git push -u origin master:master(本地分支:远程分支)

    origin = 仓库地址，就是仓库地址的别名。

    -u的意思是将这次提交到 origin master 记录下来，下次提交同一个地址和仓库就直接push就可以了。

    意思是将本地master分支的代码推送到线上的master分支上去。

二、代码规范和 ESlint

vite创建的项目是默认没有集成ESLint的，所以我们需要手动去安装配置ESLint。

2.1 安装并配置 ESLint

npm init @eslint/config

√ How would you like to use ESLint? # 你想如何使用eslint     
> To check syntax, find problems, and enforce code style

√ What type of modules does your project use?  # 你的项目使用什么类型的模块
> JavaScript modules (import/export)

√ Which framework does your project use?  # 你的项目使用哪个框架
> Vue.js

√ Does your project use TypeScript? · No / Yes # 是否使用TypeScript
> Yes

√ Where does your code run? # 你的代码在哪里运行
> browser

√ How would you like to define a style for your project? · guide # 您希望如何为您的项目定义样式?
> Use a popular style guide
√ Which style guide do you want to follow?  # 您想遵循哪一种风格指南
> standard-with-typescript

√ What format do you want your config file to be in?# 你希望你的配置文件是什么格式?
> JavaScript

√ Would you like to install them now? # 您现在要安装它们吗
> Yes

√ Which package manager do you want to use? # 您想使用哪个包管理器
> pnpm

2.2 验证项目中代码是否符合ESLint的验证规范

package.json添加node脚本：

 "scripts": {
    "lint": "eslint ./src/**/*.{js,jsx,vue,ts,tsx} --fix"
  },

# eslint' 不是内部或外部命令

  1. 删除项目目录中的node_modules文件夹。
  2. 重新安装 
    npm install

添加"lint"，脚本的意义：运行这命令，验证指定目录下的文件的代码风格是否符合规范。

这里对src下面的任意目录下的任意名字的js、jsx、vue、ts、tsx文件进行验证。

--fix：简单的不符合代码规范的，自动帮你格式化。

运行遇到的报错：

问题一：

找不到模块"xxx"或其相应的类型声明。

解决方法：

安装@types/node：

npm install --save-dev @types/node

问题二：

Error: Error while loading rule '@typescript-eslint/dot-notation': You have used a rule which requires parserServices to be generated. You must therefore provide a value for the "parserOptions.project" property for @typescript-eslint/parser.

解决方法：

在`.eslintrc.cjs`中添加：
```js
parserOptions: {
  // eslint缺少ts类型检测，需要引入此扩展
  parser: '@typescript-eslint/parser',
  project: ['./tsconfig.json']
}
```

问题三：

Parsing error: ESLint was configured to run on `/src\App.vue` using parserOptions.project`: /tsconfig.json The extension for the file (`.vue`) is non-standard. You should add `parserOptions.extraFileExtensions` to your config

  • 解决方法：

    在.eslintrc.cjs中添加：

    parserOptions: {
  extraFileExtensions: ['.vue']
}

问题四:

Do not use a triple slash reference for vite/client, use import style instead @typescript-eslint/triple-slash-reference 不支持三斜杠引入。

  • 解决方法： 关闭这个规则 
    rules: {
'@typescript-eslint/triple-slash-reference': 'off'
}

问题五：

Parsing error: ESLint was configured to run on <tsconfigRootDir>/.eslintrc.cjs using parserOptions.project: /tsconfig.json

提示使用了parserOptions.project.但是tsconfig.json不包含本文件

  • 解决方法： 在tsconfig.json的include数组中加入.eslintrc.cjs.重启生效 
    "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    ".eslintrc.cjs"
]

问题六：

image.png

  • 解决方法 在.eslintrc.cjs中添加： 
    parser: '@typescript-eslint/parser'

问题七：

Cannot find module 'vue'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option?

找不到模块'vue'。您的意思是将' modulerresolve '选项设置为'node'，还是为'paths'选项添加别名?

  • 解决方法： 在tsconfig.json中，将moduleResolution的值设置为：node

    image.png

    "moduleResolution": "node"

问题八：

Module '"e:/ZDD/Desktop/vite-project/src/components/HelloWorld.vue"' has no default export.

  • 解决方法：

    将Vetur禁用，启用Volar。

    image.png

问题九

解决ts无法识别引入的.vue文件：

declare module "*.vue"{
    import { DefineComponent } from "vue"
    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
    const component: DefineComponent<{}, {}, any>
    export default component
}

编译器集成ESLint

编译器提示不符合ESLint语法规范错误

  1. 禁用vetur插件

  2. 安装eslint插件 只要安装启用了这个插件，它就会自动查找项目中的 eslint配置规范，并且给出验证提示。

  3. 安装volar插件

按照项目中的ESLint规则要求格式化代码

ESLint提供了格式化工具，但是需要手动配置才能使用。

设置 ---> 扩展 ---> ESLint ---> Format: Enable √

image.png

将图上的勾选，表示启用eslint插件作为格式化工具。

创建.eslintignore文件，忽略eslint不需要检查的文件

/index.html
/tsconfig.json
/src/vite-env.d.ts
/.preitterrc.json

配置prettier

  1. 安装prettier、eslint-config-prettier、eslint-plugin-prettier

    • eslint-plugin-prettier： 基于 prettier 代码风格的 eslint 规则，即eslint使用pretter规则来格式化代码。

    • eslint-config-prettier： 禁用所有与格式相关的 eslint 规则，解决 prettier 与 eslint 规则冲突，确保将其放在 extends 队列最后，这样它将覆盖其他配置

    pnpm add prettier eslint-plugin-prettier eslint-config-prettier --save-dev

  2. 项目根目录创建.prettierrc.js：

    module.exports = {
    tabWidth: 2, // 一个tab代表几个空格数，默认为2
    singleQuote: true, // 字符串是否使用单引号，默认为false，使用双引号
    semi: false, // 行末是否使用分号，默认为true
    printWidth: 120,  // 一行的字符数，如果超过会进行换行，默认为80
    trailingComma: "none" // 是否使用尾逗号，有三个可选值"<none|es5|all>"
}

在项目中配置快速生成Vue3模板的命令

3.1.在项目根目录的.vscode文件夹下新建 vue3.0.code-snippets文件 3.2.在vue3.0.code-snippets中将下面的代码片段复制粘贴进去：

{
  "Vue3.0快速生成模板": {
    "prefix": "Vue3.0",
    "body": [
      "<template>",
      "\t<div>\n",
      "\t</div>",
      "</template>\n",
      "<script setup lang='ts'>",
      "</script>\n",
      "<style lang='scss' scoped>\n",
      "</style>",
      "$2"
    ],
    "description": "Vue3.0"
  }
}
avatar
文章
阅读
粉丝