5.1 vite-vue的学习

1.vite配置vue

bash 复制代码

import { defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
// import { createVuePlugin} from 'vite-plugin-vue2'
export default defineConfig({
    plugins:[
   // createVuePlugin(), // 可以引入vue2版本
    vue(),// 可以引入vue结尾的文件
    vueJsx() // 可以引入jsx结尾的文件
    ],
    resolve:{
      alias:{
      "@src" :"/src" // /表示从根目录
      }
    }
})

2.vite 配置react

bash 复制代码

import { defineConfig} from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'
export default defineConfig({
    plugins:[
     reactRefresh(), // 
    ],
    resolve:{
      alias:{
      "@src" :"/src" // /表示从根目录
      }
    }
})

3.css-modules

test.module.css并使用

css 复制代码

.moduleClass{
color:red
}

引入test.module.css并使用

import classes from '@src/test.module.css

<div :class="classes.moduleClass"> </div>

4. 直接支持ts语法

命令行校验 vue-tsc --noEmit && tsc --noEmit && vite build

5. css pre-processors

只需要引入对应的less或者scss的loader文件即可

less 复制代码

@bgColor:blue
.moduleClass{
color:red;
background-color:@bgColor
}

5.isolatedModules

在tsconfig.json的compilerOptions下设置 isolatedModules:true

Exports Of Non-Value Identifiers报错不开启运行时才会报错

ts 复制代码

// types
export interface A{
 name:string,
 age:number
}

ts 复制代码

import {A} from './types';
export const a:A= {
name:'zhang san',
age: 18
}
export {A}

Non-Moudle Files

每个文件都需 export 输出成一个模块

References to const enum members

ts 复制代码

// types
export interface A{
name:string,
age:number
}

ts 复制代码

import {A} from './types';

declare const enum Num {
  First = 0, 
  Second =1,
 }
export const a:A= {
name:'zhang san',
age: Num.First // 开启后报错
}
export {A}

6. client types 中import.meta报错

Asset imports
env
HMR API

在tsconfig.json的compilerOptions下设置 types:["vite/client"]

7.处理静态资源的方法

js 复制代码

import test from './test?url'
console.log(test) // /src/test.ts

js 复制代码

import test from './test?raw'
console.log(test) // 文本以字符串形式打印出来

worker/worker inline

8.eslint + pritter + husky

pnpm i eslint-config-standard eslint-plugin-import eslint-plugin-promise eslint-plugin-node -D

js 复制代码

//.eslintrc.js
module.exports={
extends:'standard'
}

eslint 插件和pritter插件
'lint': "eslint --ext js src/"

js 复制代码

//.prettierrc
{
'semi': false,
'singleQuote':true
}

pnpm i husky npx husky install npx husky add .husky/pre-commit "npm run lint"

9.环境变量

import.meta.env

MODE
BASE_URL
PROD
DEV
SSR

.env .env.development .env.development.local .env.production