# vite2_rest

**Repository Path**: xiaozhouboom_admin/vite2_rest

## Basic Information

- **Project Name**: vite2_rest
- **Description**: 实战vite2_test
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2021-06-30
- **Last Updated**: 2021-07-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vite2_rest

#### 介绍

实战最近很火的 vite2.0

#### 脚手架创建项目

```javascript
npm init @vitejs/app

npm init @vitejs/app my-vite -- --template vue // 快捷使用
```

![](<C:\Users\JYJ2020\Desktop\vite2.0\1625020673(1).png>)

选择 vue 模板，搭建项目的基本框架

#### 内容

1. 配置别名，根目录中编辑vite.config.js

   ```javascript
   import { defineConfig } from 'vite';
   import vue from '@vitejs/plugin-vue';
   import { resolve } from 'path';
   
   // https://vitejs.dev/config/
   export default defineConfig({
     resolve: {
       alias: {
         '@': resolve('./src'),
         comps: resolve('./src/components'),
       },
     },
     plugins: [vue()],
   });
   
   
   ```

   使用如下：

   App.vue

   ```vue
   <template>
     <img alt="Vue logo" src="@/assets/logo.png" />
     <img alt="Vue logo" :src="logo" />
     <div :class="$style.logo"></div>
     <div :class="classes.logo"></div>
   </template>
   
   <script setup>
   // 解析为地址
   import logo from '@/assets/logo.png';
   // 加载模块化css
   import classes from './App.module.css';
   </script>
   
   <style scoped>
   img {
     border: 1px solid black;
   }
   ::placeholder {
     color: blue;
   }
   </style>
   
   <style module>
   .logo {
     width: 100px;
     height: 100px;
     background: red;
   }
   </style>
   ```

   App.module.css

   ```css
   .logo {
     background-image: url(@/assets/logo.png);
     width: 200px;
     height: 200px;
   }
   ```

   

2. 配置代理

   ```javascript
   import { defineConfig } from 'vite';
   import vue from '@vitejs/plugin-vue';
   import { resolve } from 'path';
   
   // https://vitejs.dev/config/
   export default defineConfig({
     resolve: {
       alias: {
         '@': resolve('./src'),
         comps: resolve('./src/components'),
       },
     },
     server: {
       proxy: {
         '/api': {
           target: 'http://jsonplaceholder.typicode.com',
           changeOrigin: true,
           rewrite: (path) => path.replace(/^\/api/, ''),
         },
       },
     },
     plugins: [vue()],
   });
   
   ```

   测试验证：

   ```vue
   <template>
     <img alt="Vue logo" src="@/assets/logo.png" />
     <img alt="Vue logo" :src="logo" />
     <div :class="$style.logo"></div>
     <div :class="classes.logo"></div>
   </template>
   
   <script setup>
   // 解析为地址
   import logo from '@/assets/logo.png';
   // 加载模块化css
   import classes from './App.module.css';
   
   fetch('/api/users')
     .then((res) => res.json())
     .then((res) => {
       console.log(res); 
     });
   </script>
   
   <style scoped>
   img {
     border: 1px solid black;
   }
   ::placeholder {
     color: blue;
   }
   </style>
   
   <style module>
   .logo {
     width: 100px;
     height: 100px;
     background: red;
   }
   </style>
   
   ```



1. 配置 mock

   依赖安装

   ```
   npm i mockjs -S
   npm i vite-plugin-mock -D
   ```

   vite.config.js

   ```js
   import { defineConfig } from 'vite';
   import vue from '@vitejs/plugin-vue';
   import { resolve } from 'path';
   import { viteMockServe } from 'vite-plugin-mock';
   
   // https://vitejs.dev/config/
   export default defineConfig({
     resolve: {
       alias: {
         '@': resolve('./src'),
         comps: resolve('./src/components'),
       },
     },
     server: {
       proxy: {
         '/api': {
           target: 'http://jsonplaceholder.typicode.com',
           changeOrigin: true,
           rewrite: (path) => path.replace(/^\/api/, ''),
         },
       },
     },
     plugins: [vue(), viteMockServe({})],
   });
   
   ```

   验证方式：

   新建mock目录，test.js

   ```js
   export default [
     {
       url: '/api-dev/users',
       methods: 'get',
       response: (req) => {
         return {
           code: 0,
           data: [{ name: 'tome' }, { name: 'jerry' }],
         };
       },
     },
   ];
   
   ```

2. 配置 ts 规则

   内置ts，可直接在.vue文件中直接使用

   ```vue
   <template>
     <h1>1</h1>
   </template>
   
   <script setup lang="ts">
   type Course = {
     id: number;
   };
   </script>
   
   <style scoped></style>
   
   ```

   完善ts规则，package.json添加依赖，并安装指定版本依赖

   ```json
   {
     "devDependencies": {
      	"typescript": "4.1.5"
     }
   }
   ```

   新增tsconfig.json指定ts规则

   ```json
   {
     "compilerOptions": {
       "target": "esnext",
       "module": "esnext",
       "strict": true,
       "jsx": "preserve",
       "moduleResolution": "node",
       "types": ["vite/client","jest"],
       "isolatedModules": true
     },
     "include": [
       "src/**/*.ts",
       "src/**/*.d.ts",
       "src/**/*.tsx",
       "src/**/*.vue",
       "tests/unit"
     ]
   }
   ```

3. 配置 jest 自动化测试

   利用jest和@vue/testutils做测试组件，首先安装依赖

   ```json
   {
     "scripts": {
       "test:unit": "jest"
     },
    "devDependencies": {
       "jest": "^26.6.3",
       "@types/jest": "^26.0.20",
       "vue-jest": "^5.0.0-alpha.7",
       "babel-jest": "^26.6.3",
       "@babel/preset-env": "^7.12.17",
       "@vue/test-utils": "^2.0.0-beta.9",
       "ts-jest": "^26.5.1",
       "@babel/preset-typescript": "^7.12.17"
     }
   }
   ```

   新增jest.config.js

   ```javascript
   module.exports = {
     transform: {
       //  用 `vue-jest` 处理 `*.vue` 文件
       '^.+\\.vue$': 'vue-jest',
       '^.+\\.jsx?$': 'babel-jest', // Adding this line solved the issue
       '^.+\\.tsx?$': 'ts-jest',
     },
     // support alias
     moduleNameMapper: {
       '^@/components(.*)$': '<rootDir>/src/components$1',
     },
     testMatch: ['**/tests/unit/**/*.[jt]s?(x)'],
   };
   ```

   增加babel.config.js

   ```js
   module.exports = {
     presets: [
       ["@babel/preset-env", { targets: { node: "current" } }],
       "@babel/preset-typescript",
     ],
   };
   
   ```

   添加tests/unit目录，添加文件example.spec.ts 案例

   ```ts
   import HelloWorld from "@/components/HelloWorld.vue";
   import { shallowMount } from "@vue/test-utils";
   
   describe("aaa", () => {
     test("should ", () => {
       const wrapper = shallowMount(HelloWorld, {
         props: {
           msg: "hello,vue3",
         },
       });
       expect(wrapper.text()).toMatch("hello,vue3");
     });
   });
   
   ```

   执行命令，验证

   ```json
   npm run test:unit // 启动脚本测试
   ```

   

4. 配置代码规范

   借助eslint+prettier实现自动化代码规范

   package.json安装依赖

   ```json
   {
     "scripts": {
       "lint": "eslint --ext .ts,vue src/** --no-error-on-unmatched-pattern --quiet",
       "lint:fix": "eslint --ext .ts,vue src/** --no-error-on-unmatched-pattern --fix",
     },
     "devDependencies": {
       "@typescript-eslint/eslint-plugin": "^4.15.2",
       "@typescript-eslint/parser": "^4.15.2",
       "@vue/eslint-config-prettier": "^6.0.0",
       "@vue/eslint-config-typescript": "^7.0.0",
       "@vuedx/typescript-plugin-vue": "^0.6.3",
       "eslint": "^7.20.0",
       "eslint-plugin-prettier": "^3.3.1",
       "eslint-plugin-vue": "^7.6.0",
       "prettier": "^2.2.1"
     }
   }
   ```

   新增.eslintrc.js文件，配置eslint规则

   ```js
   module.exports = {
     root: true,
     env: {
       browser: true,
       es2021: true,
       node: true,
     },
     extends: [
       'plugin:vue/vue3-recommended',
       'eslint:recommended',
       '@vue/typescript/recommended',
       '@vue/prettier',
       '@vue/prettier/@typescript-eslint',
     ],
     parserOptions: {
       ecmaversion: 2021,
     },
     plugins: [],
     rules: {
       'no-unused-vars': 'off',
       '@typescript-eslint/no-unused-vars': 'off',
     },
   };
   ```

   增加.eslintignore，忽略不需要eslint检查的文件,如图片、css等

   ```javascript
   *.css
   *.png
   *.jpg
   ```

   验证配置

   ```json
   npm run lint // 执行检查
   npm run lint:fix // 执行检查并修复
   ```

5. 配置代码在Git Flow中，提交代码前自动做fix代码和跑测试脚本

   安装以来

   ```json
   npm i lint-staged yorkie -D // 安装依赖
   ```

   package.json配置

   ```json
   {
     "gitHooks": {
       "pre-commit": "lint-staged",
       "pre-push": "npm run test:unit"
     },
     "lint-staged": {
       "*.{js,vue}": "eslint --fix"
     }
   }
   ```

6. 配置 rem 自适应

   package.json安装依赖

   ```json
   {
     "devDependencies": {
       "amfe-flexible": "^2.2.1",
       "autoprefixer": "^10.2.6",
       "postcss-pxtorem": "^6.0.0",
     }
   }
   ```

   新增postcss.config.js，如果有UI框架px单位不可修改为rem。可以做文件夹过滤处理

   ```
   module.exports = {
     plugins: {
       autoprefixer: {},
       'postcss-pxtorem': {
         rootValue: 37.5,
         propList: ['*'],
         unitPrecision: 5,
       },
     },
   };
   ```

   main.ts/main.js中添加依赖

   ```
   import "amfe-flexible/index.js";
   ```