Vue项目：项目初始化+项目配置+项目集成

C:\Users\Administrator\Desktop\Vue\Vue3_admin_template>pnpm create vite
.../Local/pnpm/store/v3/tmp/dlx-6140     |   +1 +
Packages are hard linked from the content-addressable store to the virtual store.
  Content-addressable store is at: C:\Users\Administrator\AppData\Local\pnpm\store\v3
  Virtual store is at:             ../../../AppData/Local/pnpm/store/v3/tmp/dlx-6140/node_modules/.pnpm
.../Local/pnpm/store/v3/tmp/dlx-6140     | Progress: resolved 1, reused 0, downloaded 1, added 1, done
√ Project name: ... project
√ Select a framework: » Vue
√ Select a variant: » TypeScript

Scaffolding project in C:\Users\Administrator\Desktop\Vue\Vue3_admin_template\project...

Done. Now run:

  cd project
  pnpm install
  pnpm run dev

下载node_modules

切换目录，进入创建的项目目录，准备下载node_modules

指令：

pnpm i

实例：

C:\Users\Administrator\Desktop\Vue\Vue3_admin_template\project>pnpm i
Packages: +46
++++++++++++++++++++++++++++++++++++++++++++++
Packages are copied from the content-addressable store to the virtual store.
  Content-addressable store is at: C:\Users\Administrator\AppData\Local\pnpm\store\v3
  Virtual store is at:             node_modules/.pnpm
Downloading registry.npmjs.org/typescript/5.0.2: 7.05 MB/7.05 MB, done
Progress: resolved 68, reused 0, downloaded 46, added 46, done
node_modules/.pnpm/esbuild@0.18.20/node_modules/esbuild: Running postinstall script, done in 1s

dependencies:
+ vue 3.3.4

devDependencies:
+ @vitejs/plugin-vue 4.2.3 (4.3.1 is available)
+ typescript 5.0.2 (5.1.6 is available)
+ vite 4.4.5 (4.4.9 is available)
+ vue-tsc 1.8.5 (1.8.8 is available)

Done in 45.6s

运行测试

指令：
pnpm run dev
访问：http://localhost:5173/

示例如下

项目启动，自动打开

在pakeage.json，修改相关代码。这样配置好之后，每次执行了 pnpm run dev，会自动打开页面

代码：
"scripts": {
    "dev": "vite --open",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },

项目配置

配置eslint

eslint中文官网:ESLint - Pluggable JavaScript linter - ESLint中文

eslint是提供一个插件化的JavaScript代码检查工具

安装eslint

指令：

pnpm i eslint -D

实例：

C:\Users\Administrator\Desktop\Vue\Vue3_admin_template\project>pnpm i eslint -D
Packages: +95
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 163, reused 46, downloaded 95, added 95, done

devDependencies:
+ eslint 8.47.0

Done in 21s

生成配置文件: .eslint.cjs

注意：该文件只需要执行指令，会自动生成，该文件名称为 .eslint.cjs

指令；

npx eslint --init

实例：

C:\Users\Administrator\Desktop\Vue\Vue3_admin_template\project>npx eslint --init
Packages: +95
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 163, reused 46, downloaded 95, added 95, done

√ What type of modules does your project use? · esm
√ Which framework does your project use? · vue
√ Does your project use TypeScript? · No / 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? · No / Yes
√ Which package manager do you want to use? · pnpm
Installing @typescript-eslint/eslint-plugin@latest, eslint-plugin-vue@latest, @typescript-eslint/parser@latest
Packages: +34
++++++++++++++++++++++++++++++++++
Progress: resolved 197, reused 141, downloaded 34, added 34, done

devDependencies:
+ @typescript-eslint/eslint-plugin 6.4.0
+ @typescript-eslint/parser 6.4.0
+ eslint-plugin-vue 9.17.0

Done in 7.4s
Successfully created .eslintrc.cjs file in D:\ResearchAndDevelopment\webstorm-workspace\cloud_hotel

安装Vue3环境代码校验插件

指令：

pnpm install -D eslint-plugin-import eslint-plugin-vue eslint-plugin-node eslint-plugin-prettier eslint-config-prettier eslint-plugin-node @babel/eslint-parser

实例：

C:\Users\Administrator\Desktop\Vue\Vue3_admin_template\project>pnpm install -D eslint-plugin-import eslint-plugin-vue eslint-plugin-node eslint-plugin-prettier eslint-config-prettier eslint-plugin-node @babel/eslint-parser
Packages: +170
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 367, reused 175, downloaded 170, added 170, done

devDependencies:
+ @babel/eslint-parser 7.22.10
+ eslint-config-prettier 9.0.0
+ eslint-plugin-import 2.28.1
+ eslint-plugin-node 11.1.0
+ eslint-plugin-prettier 5.0.0

Done in 11.1s

修改 .eslint.cjs 配置文件

将下列代码，复制粘贴到 .eslint.cjs 配置文件中

// @see https://eslint.bootcss.com/docs/rules/

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
    jest: true,
  },
  /* 指定如何解析语法 */
  parser: 'vue-eslint-parser',
  /** 优先级低于 parse 的语法解析配置 */
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    parser: '@typescript-eslint/parser',
    jsxPragma: 'React',
    ecmaFeatures: {
      jsx: true,
    },
  },
  /* 继承已有的规则 */
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-essential',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
  ],
  plugins: ['vue', '@typescript-eslint'],
  /*
   * "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', // 对模板中的自定义组件强制执行属性命名样式
  },
}

为eslint生成 .eslintignore 忽略文件

注意：这个文件需要创建，在项目的根目录下创建该文件，文件名称为.eslintignore

其内容如下

dist
node_modules

为eslint添加运行脚本

package.json新增两个运行脚本，新增的内容如下

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

"lint": "eslint src" 指当执行 pnpm run lint 指令的时候，eslint 是对src目录下的Javascript代码进行校验
"fix": "eslint src --fix" 指当执行 pnpm run --fix 指令的时候，eslint fix 是对src目录下的不规范的Javascript代码进行修复

如何使用

查找不规范

pnpm run lint

修复不规范的代码

pnpm run fix

配置prettie

有了eslint，为什么还要有prettier？eslint针对的是javascript，他是一个检测工具，包含js语法以及少部分格式问题，在eslint看来，语法对了就能保证代码正常运行，格式问题属于其次；而prettier属于格式化工具，它看不惯格式不统一，所以它就把eslint没干好的事接着干，另外，prettier支持包含js在内的多种语言。

总结起来，eslint和prettier这俩兄弟一个保证js代码质量，一个保证代码美观

安装prettie

指令：
pnpm install -D eslint-plugin-prettier prettier eslint-config-prettier
实例：
C:\Users\Administrator\Desktop\Vue\Vue3_admin_template\project>pnpm install -D eslint-plugin-prettier prettier eslint-config-prettier
Already up to date
Progress: resolved 367, reused 345, downloaded 0, added 0, done

devDependencies:
+ prettier ^3.0.2

Done in 6.4s
创建prettie的配置文件 prettierrc.json，并完成配置

注意：这个文件需要创建，在项目的根目录下创建该文件，文件名称为prettierrc.json

其内容如下
{
  "singleQuote": true,
  "semi": false,
  "bracketSpacing": true,
  "htmlWhitespaceSensitivity": "ignore",
  "endOfLine": "auto",
  "trailingComma": "all",
  "tabWidth": 2
}
创建prettie的忽略文件 .prettierignore，并完成配置

声明哪些文件是不需要被格式化的

注意：这个文件需要创建，在项目的根目录下创建该文件，文件名称为.prettierignore
/dist/*
/html/*
.local
/node_modules/**
**/*.svg
**/*.sh
/public/*
如何使用

查找不规范
pnpm run lint
修复不规范的代码
pnpm run fix

配置stylelint

stylelint为css的lint工具。可格式化css代码，检查css语法错误与不合理的写法，指定css书写顺序等。

安装stylelint

指令：

pnpm add sass sass-loader stylelint postcss postcss-scss postcss-html stylelint-config-prettier stylelint-config-recess-order stylelint-config-recommended-scss stylelint-config-standard stylelint-config-standard-vue stylelint-scss stylelint-order stylelint-config-standard-scss -D

实例：

C:\Users\Administrator\Desktop\Vue\Vue3_admin_template\project> pnpm add sass sass-loader stylelint postcss postcss-scss postcss-html stylelint-config-prettier stylelint-config-recess-order stylelint-config-recommended-scss stylelint-config-standard stylelint-config-standard-vue stylelint-scss stylelint-order stylelint-config-standard-scss -D
Packages: +162 -1
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
Progress: resolved 528, reused 345, downloaded 161, added 162, done

devDependencies:
+ postcss 8.4.28
+ postcss-html 1.5.0
+ postcss-scss 4.0.7
+ sass 1.66.1
+ sass-loader 13.3.2
+ stylelint 15.10.3
+ stylelint-config-prettier 9.0.5
+ stylelint-config-recess-order 4.3.0
+ stylelint-config-recommended-scss 12.0.0
+ stylelint-config-standard 34.0.0
+ stylelint-config-standard-scss 10.0.0
+ stylelint-config-standard-vue 1.0.0
+ stylelint-order 6.0.3
+ stylelint-scss 5.1.0

 WARN  Issues with peer dependencies found
.
└─┬ stylelint-config-prettier 9.0.5
  └── ✕ unmet peer stylelint@">= 11.x < 15": found 15.10.3

Done in 12s

创建配置文件 .stylelintrc.cjs ，并完成配置

注意：这个文件需要创建，在项目的根目录下创建该文件，文件名称为.stylelintrc.cjs

其内容如下

// @see https://stylelint.bootcss.com/

module.exports = {
    extends: [
      'stylelint-config-standard', // 配置stylelint拓展插件
      'stylelint-config-html/vue', // 配置 vue 中 template 样式格式化
      'stylelint-config-standard-scss', // 配置stylelint scss插件
      'stylelint-config-recommended-vue/scss', // 配置 vue 中 scss 样式格式化
      'stylelint-config-recess-order', // 配置stylelint css属性书写顺序插件,
      'stylelint-config-prettier', // 配置stylelint和prettier兼容
    ],
    overrides: [
      {
        files: ['**/*.(scss|css|vue|html)'],
        customSyntax: 'postcss-scss',
      },
      {
        files: ['**/*.(html|vue)'],
        customSyntax: 'postcss-html',
      },
    ],
    ignoreFiles: [
      '**/*.js',
      '**/*.jsx',
      '**/*.tsx',
      '**/*.ts',
      '**/*.json',
      '**/*.md',
      '**/*.yaml',
    ],
    /**
     * null  => 关闭该规则
     * always => 必须
     */
    rules: {
      'value-keyword-case': null, // 在 css 中使用 v-bind，不报错
      'no-descending-specificity': null, // 禁止在具有较高优先级的选择器后出现被其覆盖的较低优先级的选择器
      'function-url-quotes': 'always', // 要求或禁止 URL 的引号 "always(必须加上引号)"|"never(没有引号)"
      'no-empty-source': null, // 关闭禁止空源码
      'selector-class-pattern': null, // 关闭强制选择器类名的格式
      'property-no-unknown': null, // 禁止未知的属性(true 为不允许)
      'block-opening-brace-space-before': 'always', //大括号之前必须有一个空格或不能有空白符
      'value-no-vendor-prefix': null, // 关闭 属性值前缀 --webkit-box
      'property-no-vendor-prefix': null, // 关闭 属性前缀 -webkit-mask
      'selector-pseudo-class-no-unknown': [
        // 不允许未知的选择器
        true,
        {
          ignorePseudoClasses: ['global', 'v-deep', 'deep'], // 忽略属性，修改element默认样式的时候能使用到
        },
      ],
    },
  }

创建stylelint的忽略文件 .stylelintignore，并完成配置

注意：这个文件需要创建，在项目的根目录下创建该文件，文件名称为.stylelintignore

/node_modules/*
/dist/*
/html/*
/public/*

为stylelint添加运行脚本

package.json新增3个运行脚本，新增的内容如下

"scripts": {
    "format": "prettier --write \"./**/*.{html,vue,ts,js,json,md}\"",
    "lint:eslint": "eslint src/**/*.{ts,vue} --cache --fix",
    "lint:style": "stylelint src/**/*.{css,scss,vue} --cache --fix"
  },

最后配置统一的prettier来格式化我们的js和css，html代码

如何使用

当我们运行pnpm run format的时候，会把代码直接格式化

指令

pnpm run format

配置husky

在提交代码之前，进行对代码的格式化，格式化之后，再进行提交代码

安装husky
pnpm install -D husky
执行（需要先连接远程仓库）

执行下列指令，会自动生成一个文件目录.husky

指令：
npx husky-init
代码：
C:\Users\Administrator\Desktop\Vue\Vue3_admin_template\project>npx husky-init
Need to install the following packages:
  husky-init@8.0.0
Ok to proceed? (y) y
husky-init updating package.json
  setting prepare script to command "husky install"
husky - Git hooks installed
husky - created .husky/pre-commit

please review changes in package.json
在.husky/pre-commit文件添加如下命令：
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
pnpm run format
当我们对代码进行commit操作的时候，就会执行命令，对代码进行格式化，然后再提交。

（如果远程仓库代码没有更新的话，重新提交一下）

配置commitlint

对于我们的commit信息，也是有统一规范的，不能随便写,要让每个人都按照统一的标准来执行，我们可以利用commitlint来实现

安装commitlint

指令：
pnpm add @commitlint/config-conventional @commitlint/cli -D
实例：
C:\Users\Administrator\Desktop\Vue\Vue3_admin_template\project>pnpm add @commitlint/config-conventional @commitlint/cli -D
Packages: +94 -1
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
Progress: resolved 622, reused 507, downloaded 93, added 94, done

devDependencies:
+ @commitlint/cli 17.7.1
+ @commitlint/config-conventional 17.7.0

 WARN  Issues with peer dependencies found
.
└─┬ stylelint-config-prettier 9.0.5
  └── ✕ unmet peer stylelint@">= 11.x < 15": found 15.10.3
创建配置文件 commitlint.config.cjs ，并完成配置

注意：这个文件需要创建，在项目的根目录下创建该文件，文件名称为commitlint.config.cjs

其内容如下：
module.exports = {
  extends: ['@commitlint/config-conventional'],
  // 校验规则
  rules: {
    'type-enum': [
      2,
      'always',
      [
        'feat',
        'fix',
        'docs',
        'style',
        'refactor',
        'perf',
        'test',
        'chore',
        'revert',
        'build',
      ],
    ],
    'type-case': [0],
    'type-empty': [0],
    'scope-empty': [0],
    'scope-case': [0],
    'subject-full-stop': [0, 'never'],
    'subject-case': [0, 'never'],
    'header-max-length': [0, 'always', 72],
  },
}
为commitlint添加运行脚本

package.json新增1个运行脚本，新增的内容如下
# 在scrips中添加下面的代码
"scripts": {
    "commitlint": "commitlint --config commitlint.config.cjs -e -V"
  },
配置结束，现在当我们填写commit信息的时候，前面就需要带着下面的subject

举例：如果我们对项目提交的时候，写了带有fix，说明对项目及进行了修改bug的操作
'feat',//新特性、新功能
'fix',//修改bug
'docs',//文档修改
'style',//代码格式修改, 注意不是 css 修改
'refactor',//代码重构
'perf',//优化相关，比如提升性能、体验
'test',//测试用例修改
'chore',//其他修改, 比如改变构建流程、或者增加依赖库、工具等
'revert',//回滚到上一个版本
'build',//编译相关的修改，例如发布版本、对项目构建或者依赖的改动
配置husky

注意：执行完下列的指令，会自动生成一个文件

指令：
npx husky add .husky/commit-msg
修改生成的commit-msg文件

添加下面的命令
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
pnpm commitlint
当我们 commit 提交信息时，就不能再随意写了，必须是 git commit -m 'fix: xxx' 符合类型的才可以，需要注意的是类型的后面需要用英文的 :，并且冒号后面是需要空一格的，这个是不能省略的

配置统一使用pnpm包管理器工具

为什么要去配置统一使用pnpm包管理器工具

团队开发项目的时候,因为不同包管理器工具下载同一个依赖,可能版本不一样,导致项目出现bug问题,因此包管理器工具需要统一管理

在根目录创建scritps/preinstall.js文件，添加下面的内容

先根目录创建scritps目录，在该目录下创建preinstall.js文件
if (!/pnpm/.test(process.env.npm_execpath || '')) {
  console.warn(
    `\u001b[33mThis repository must using pnpm as the package manager ` +
    ` for scripts to work properly.\u001b[39m\n`,
  )
  process.exit(1)
}
添加运行脚本

package.json新增1个运行脚本，新增的内容如下
"scripts": {
    "preinstall": "node ./scripts/preinstall.js"
}
注意：当添加完运行脚本之后，以后项目下载依赖，只能使用pnpm，当我们使用npm或者yarn来安装包的时候，就会报错了。

项目集成

集成element-plus

官网地址:一个 Vue 3 UI 框架 | Element Plus

安装element-plus

指令：

pnpm i element-plus

实例：

Progress: resolved 643, reused 621, downloaded 0, added 0, done
 WARN  Issues with peer dependencies found
.
└─┬ stylelint-config-prettier 9.0.5
  └── ✕ unmet peer stylelint@">= 11.x < 15": found 15.10.3

Done in 16.9s

在main.ts进行配置

打开官网，将完整引用的代码，全部复制到项目的src目录下的mian.ts文件中

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

测试

在src目录下的App.vue中，使用elementUI的组件，启动项目进行测试

<template>
  <el-button type="primary" size="default">主要按钮</el-button>
</template>
<script setup lang="ts"></script>
<style scoped></style>

安装element-plus的图标组件库

指令：

pnpm install element-plus @element-plus/icons-vue

实例：

C:\Users\Administrator\Desktop\Vue\Vue3_admin_template\project>pnpm install element-plus @element-plus/icons-vue
Downloading registry.npmjs.org/element-plus/2.3.9: 8.27 MB/8.27 MB, done
Packages: +21
+++++++++++++++++++++
Progress: resolved 643, reused 600, downloaded 21, added 21, done
node_modules/.pnpm/vue-demi@0.14.5_vue@3.3.4/node_modules/vue-demi: Running postinstall script, done in 221ms

dependencies:
+ @element-plus/icons-vue 2.1.0
+ element-plus 2.3.9

 WARN  Issues with peer dependencies found
.
└─┬ stylelint-config-prettier 9.0.5
  └── ✕ unmet peer stylelint@">= 11.x < 15": found 15.10.3

Done in 13.3s

测试

<template>
  <el-button type="primary" size="default" :icon="Plus">主要按钮</el-button>
</template>
<script setup lang="ts">
// 引入图标组件
import {Plus} from "@element-plus/icons-vue";
</script>
<style scoped></style>

入口文件main.ts全局安装element-plus,element-plus默认支持语言英语设置为中文

/ 忽略当前文件ts类型的检测否则有红色提示(打包会失败)

import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

// 获取应用实例对象
const app = createApp(App)
// 安装Element-plus 插件
app.use(ElementPlus, {
  locale: zhCn,
})

Element-Plus全局组件类型声明

tsconfig.json中声明Element Plus全局组件类型

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["element-plus/global"]
  }
}

配置完毕可以测试element-plus组件与图标的使用

src别名的配置

在开发项目的时候文件与文件关系可能很复杂，因此我们需要给src文件夹配置一个别名

在vite.config.ts文件进行src别名配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
  
import path from 'path'
// https://vitejs.dev/config/
  
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve('./src'), // 相对路径别名配置，使用 @ 代替 src
    }
  }
})

TypeScript 编译配置

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

测试

修改main.ts入口文件，运行项目并测试

// main.ts
import { createApp } from "vue";
import App from "@/App.vue";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
const app = createApp(App);

app.use(ElementPlus, {
  locale: zhCn,
});
app.mount("#app");

环境变量的配置

        项目开发过程中，至少会经历开发环境、测试环境和生产环境(即正式环境)三个阶段。不同阶段请求的状态(如接口地址等)不尽相同，若手动切换接口地址是相当繁琐且易出错的。于是环境变量配置的需求就应运而生，我们只需做简单的配置，把环境状态切换的工作交给代码。

开发环境（development）顾名思义，开发使用的环境，每位开发人员在自己的dev分支上干活，开发到一定程度，同事会合并代码，进行联调。

测试环境（testing）测试同事干活的环境啦，一般会由测试同事自己来部署，然后在此环境进行测试

生产环境（production）生产环境是指正式提供对外服务的，一般会关掉错误报告，打开错误日志。(正式提供给客户使用的环境。)

        注意:一般情况下，一个环境对应一台服务器,也有的公司开发与测试环境是一台服务器!

在项目的根目录下创建如下3个文件，注意文件名称

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

.env.development文件内容如下
# 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV = 'development'
VITE_APP_TITLE = 'XXXX平台'
VITE_APP_BASE_API = '/dev-api'
.env.production文件内容如下
# 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV = 'production'
VITE_APP_TITLE = 'XXXX平台'
VITE_APP_BASE_API = '/prod-api'
.env.test文件内容如下
# 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV = 'test'
VITE_APP_TITLE = 'XXXX平台'
VITE_APP_BASE_API = '/test-api'
配置运行命令：package.json
"scripts": {
    "dev": "vite --open",
    "build:test": "vue-tsc && vite build --mode test",
    "build:pro": "vue-tsc && vite build --mode production",
    "preview": "vite preview"
  },
测试

在入口文件main.ts文件中，通过import.meta.env获取环境变量
// main.ts
import { createApp } from "vue";
import App from "@/App.vue";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
const app = createApp(App);

app.use(ElementPlus, {
  locale: zhCn,
});

console.log(import.meta.env);
app.mount("#app");

SVG图标配置

在开发项目的时候经常会用到svg矢量图,而且我们使用SVG以后，页面上加载的不再是图片资源,这对页面性能来说是个很大的提升，而且我们SVG文件比img要小的很多，放在项目中几乎不占用资源。

安装SVG依赖插件

指令：

pnpm install vite-plugin-svg-icons -D

实例：

PS D:\ResearchAndDevelopment\webstorm-workspace\cloud_hotel_01> pnpm install vite-plugin-svg-icons -D
 WARN  deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
 WARN  deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
 WARN  deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
 WARN  deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
 WARN  deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
Packages: +135
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 778, reused 621, downloaded 135, added 135, done

devDependencies:
+ vite-plugin-svg-icons 2.0.1

 WARN  Issues with peer dependencies found
.
└─┬ stylelint-config-prettier 9.0.5
  └── ✕ unmet peer stylelint@">= 11.x < 15": found 15.10.3

Done in 19.4s

在vite.config.ts中配置插件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    createSvgIconsPlugin({
      // svg文件放在src文件下的assets文件下的icons文件下
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
      symbolId: 'icon-[dir]-[name]',
    })
  ],
  resolve: {
    alias: {
      '@': path.resolve('./src'), // 相对路径别名配置，使用 @ 代替 src
    }
  }
})

入口文件导入

import 'virtual:svg-icons-register'

测试

官网：iconfont-阿里巴巴矢量图标库

选择一个SVG图标，复制SVG代码

 <!-- 测试SVG-->
      <!-- svg： 图标外层容器节点，内部需要于use标签结合使用-->
      <svg>
          <!-- xlink：href 执行哪一个图标，属性值 #icon-图标名字 -->
          <!-- -->
          <use xlink:href="#icon-a"></use>
      </svg>

路由配置

安装路由

指令：

pnpm install vue-router

实例：

PS D:\ResearchAndDevelopment\webstorm-workspace\cloud_hotel_01> pnpm install vue-router
 WARN  deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
 WARN  deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
 WARN  deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
 WARN  deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
 WARN  deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
Packages: +2
++
Progress: resolved 787, reused 763, downloaded 2, added 2, done

dependencies:
+ vue-router 4.2.4

 WARN  Issues with peer dependencies found
.
└─┬ stylelint-config-prettier 9.0.5
  └── ✕ unmet peer stylelint@">= 11.x < 15": found 15.10.3

Done in 13.1s

创建基础的路由界面

在src目录下创建views文件夹，在views目录创建如下文件

404
home
login

路由配置

在src目录下创建一个router目录，在router目录创建index.ts文件和routers.ts文件

index.ts文件：路由配置文件

// 通过 vue-route 插件实现模板路由配置
import {createRouter,createWebHashHistory} from "vue-router";
import {constantRoute} from "@/router/routes.ts";
// 创建路由器
let router = createRouter({
    // 路由模式 hash
    history: createWebHashHistory(),
    routes: constantRoute,
    // 滚动行为
    scrollBehavior() {
        return {
            left: 0,
            top: 0
        }
    }
})
export default router;

routes.ts文件：常量路由配置文件

// 对外暴露配置路由 (常量路由）
export const constantRoute = [
    {
        // 登录
        path: '/login',
        component: ()=> import('@/views/login/index.vue'),
        name: 'login' // 命名路由
    },
    {
        // 登录成功以后展示数据的路由
        path: '/',
        component: ()=> import('@/views/home/index.vue'),
        name: 'layout'
    },
    {
        // 404
        path: '/404',
        component: ()=> import('@/views/404/index.vue'),
        name: '404'
    },
    {
        //其他路由
        path: '/:pathMatch(.*)*',
        redirect: '/404',
        name: 'any'
    }
]

注册路由

在main.ts文件中，进行注册路由

import router from "@/router";
app.use(router);

最后在App.vue中，放置一个<router-view></router-view>

测试

运行项目，进行路径测试

集成仓库

安装pinia

指令：

pnpm install pinia

实例：

PS D:\ResearchAndDevelopment\webstorm-workspace\cloud_hotel_01> pnpm install pinia
 WARN  deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
 WARN  deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
 WARN  deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
 WARN  deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
 WARN  deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
Packages: +1
+
Progress: resolved 788, reused 765, downloaded 1, added 1, done

dependencies:
+ pinia 2.1.6

 WARN  Issues with peer dependencies found
.
└─┬ stylelint-config-prettier 9.0.5
  └── ✕ unmet peer stylelint@">= 11.x < 15": found 15.10.3

Done in 13.3s

安装 pinia 持久化插件

安装 pinia 持久化插件 pinia-plugin-persistedstate

指令：

pnpm install pinia-plugin-persistedstate

实例：

PS D:\ResearchAndDevelopment\webstorm-workspace\project_cloud_hotel> pnpm install pinia-plugin-persistedstate
 WARN  deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
 WARN  deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
 WARN  deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
 WARN  deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated

 WARN  Issues with peer dependencies found
.
└─┬ stylelint-config-prettier 9.0.5
  └── ✕ unmet peer stylelint@">= 11.x < 15": found 15.10.3

Done in 26.9s

在main.ts 文件中引入并使用 pinia

import pinia from "@/store";
app.use(pinia);

测试

显示进度条

安装nprogress

指令：

pnpm install nprogress

实例；

PS D:\ResearchAndDevelopment\webstorm-workspace\cloud_hotel_01> pnpm install nprogress
 WARN  deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
 WARN  deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
+
Progress: resolved 789, reused 766, downloaded 1, added 1, done

dependencies:
+ nprogress 0.2.0

 WARN  Issues with peer dependencies found
.
└─┬ stylelint-config-prettier 9.0.5
  └── ✕ unmet peer stylelint@">= 11.x < 15": found 15.10.3

Done in 19.1s
PS D:\ResearchAndDevelopment\webstorm-workspace\cloud_hotel_01>

安装typescript

项目是使用的 typescript，所以还需要安装一个开发依赖

指令：

pnpm i @types/nprogress -D

实例：

PS D:\ResearchAndDevelopment\webstorm-workspace\cloud_hotel_01> pnpm i @types/nprogress -D
 WARN  deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
 WARN  deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
 WARN  deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
 WARN  deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
 WARN  deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
Packages: +1
+
Progress: resolved 790, reused 767, downloaded 1, added 1, done

devDependencies:
+ @types/nprogress 0.2.0

 WARN  Issues with peer dependencies found
.
└─┬ stylelint-config-prettier 9.0.5
  └── ✕ unmet peer stylelint@">= 11.x < 15": found 15.10.3

Done in 18.1s
PS D:\ResearchAndDevelopment\webstorm-workspace\cloud_hotel_01>

创建配置文件

在 src 目录下新建一个 config 的目录，并在这个目录下新建一个 nprogress.ts 文件，内容如下：

// 引入nprogress
import NProgress from "nprogress";
import "nprogress/nprogress.css";

// 全局配置进度条
NProgress.configure({
  easing: "ease", //动画方式
  speed: 500, // 递增进度条的速度
  showSpinner: false, // 是否显示加载ico
  trickle: false, // 关闭自动递增
  trickleSpeed: 500, // 自动递增频率
  minimum: 0.1, //更改启动时使用的最小百分比
});

// 对外暴露
export default NProgress;

在路由配置文件中，对切换的进度条显示进行配置

在路由 src/router/index.ts 文件中添加如下内容，用于显示页面切换的进度条显示

// 引入 NProgress
import NProgress from "nprogress";

// 增加路由导航前置守卫
router.beforeEach((to,from,next) => {
//显示进度条
  NProgress.start()
  next()
})
// 增加路由导航后置守卫
router.afterEach((to,from) => {
  // 关闭进度条
  NProgress.done()
})
// 路由异常时关闭进度条
router.onError( error => {
  NProgress.done()
  console.warn('路由错误', error.message)
})

axios

安装axios

指令：

pnpm install axios

实例：

PS D:\ResearchAndDevelopment\webstorm-workspace\cloud_hotel_01> pnpm install axios
 WARN  deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
 WARN  deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
 WARN  deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
 WARN  deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
 WARN  deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
Packages: +7
+++++++
Progress: resolved 785, reused 756, downloaded 7, added 7, done

dependencies:
+ axios 1.4.0

 WARN  Issues with peer dependencies found
.
└─┬ stylelint-config-prettier 9.0.5
  └── ✕ unmet peer stylelint@">= 11.x < 15": found 15.10.3

Done in 14.3s
PS D:\ResearchAndDevelopment\webstorm-workspace\cloud_hotel_01>

安装 less 语法

指令：

pnpm install -D less less-loader

Acloasia

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue项目：项目初始化+项目配置+项目集成

eslint针对的是javascript，他是一个检测工具，包含js语法以及少部分格式问题，在eslint看来，语法对了就能保证代码正常运行，格式问题属于其次；当我们 commit 提交信息时，就不能再随意写了，必须是 git commit -m 'fix: xxx' 符合类型的才可以，需要注意的是类型的后面需要用英文的 :，并且冒号后面是需要空一格的，这个是不能省略的。对于我们的commit信息，也是有统一规范的，不能随便写,要让每个人都按照统一的标准来执行，我们可以利用commitlint来实现。
复制链接

扫一扫

专栏目录