vite学习笔记（一）

1、使用vite创建项目

// 执行下面命令
yarn create vite

1、输入项目名称  
2、选择项目框架（vanilla表示js原生项目，vue, react分别代表各自的框架）

2、vite常规的配置

 在vue中配置jsx配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx' // 使用jsx  yarn add @vitejs/plugin-vue-jsx

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), vueJsx()],
})

 注意：以上是vue3项目的建立，如果需要进行vue2项目的建立 ，可以在vanilla的选项上，再使用  （Vue 2 支持：underfin/vite-plugin-vue2）如vue3的项目进行配置，但是vue2需要手动安装

 在vite中配置路径别名

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx' // 使用jsx

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), vueJsx()],
  resolve: {
    alias: {
      '@styles': '/src/styles', // 表示 @styles定位到了根目录下的src/styles目录下
      '@app': '/src',  // 配置全局的应用目录
    },
  },
})

注意：使用上述方法进行路径别名配置的时候，但是在vscode中的ts还是会报错，这时就需要进行以下的配置

{
  "compilerOptions": {
    ...
    "paths": {
      "@app": ["./src"],
      "@app/*": ["./src/*"],
      "@style": ["./src/styles"],
      "@style/*": ["./src/styles/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

 引用举例

import { defineComponent } from 'vue'
import test from '@styles/test.module.less'

export default defineComponent({
  setup() {
    return () => 
class={test.container} onClick={() => console.log('test')}>this is App

  },
})

 如果需要添加css的预处理器

# .scss and .sass
npm install -D sass

# .less
npm install -D less

# .styl and .stylus
npm install -D stylus

vite中配置typescript使用

在vite的普通项目中配置typescript需要做如下工作

// 步骤1
yarn add typescript -D

// 步骤2 生成typescript配置
tsc --init 

// 步骤3
在tsconfig.json中添加下面配置

"compilerOptions": {
  ...
  "isolatedModules": true,
}

// 步骤4，在build的时候在package.json中添加下面配置

"build": "vue-tsc --noEmit && vite build", （vue项目）
"build": "tsc --noEmit && vite build" (普通项目)

Glob 导入

Vite 支持使用特殊的 import.meta.glob 函数从文件系统导入多个模块

const modules = import.meta.glob('./dir/*.js')

注意：如果在自搭建的vite普通项目中没有import.meta的类型提示就需要在ts.config.json中添加如下配置

{
  "compilerOptions": {
    ...
    "types": ["vite/client"],
    }
  },
}

vite静态资源的导入

  • 将资源引入为 URL

import imgUrl from './img.png'
document.getElementById('hero-img').src = imgUrl

  • 显式 URL 引入（得到的是该文件的路径）

import workletURL from 'extra-scalloped-border/worklet.js?url'
CSS.paintWorklet.addModule(workletURL)

  • 将资源引入为字符串（读取文件里的内容进行引入）

import shaderString from './shader.glsl?raw'

  • 导入脚本作为 Worker（即相当于开启一个新的进程进行处理）

# 定义一个worker.ts文件
let num: number = 0

export const timeoutCount = (): void => {
  num += 1
  postMessage(num)  // 向进程派送信息
  setTimeout(timeoutCount, 1000)
}

timeoutCount()

#以worker的形式引用

import { defineComponent } from 'vue'
import test from '@styles/test.module.less'
import Worker from './lib/post?worker'

export default defineComponent({
  setup() {
    return () => (
      

        this is App{' '}
        <button
          onClick={() => {
            const w = new Worker()
            w.onmessage = (e) => {  // 监听派送出来的信息
              console.log(e)
            }
          }}
        >
          button
        
      

    )
  },
})

使用eslint与pretty格式化项目代码

  •  安装初始依赖包
yarn add eslint eslint-plugin-vue  @typescript-eslint/eslint-plugin @typescript-eslint/parser -D
  • 在package.json添加script命令
{
    "scripts" {
        // 检查 src 目录下所有js、vue、ts文件，--fix 是可以自动修复部分错误
        "lint": "eslint src/**/*.{js,vue,ts} --fix",
        // 初始化配置 .eslintrc.js 配置文件
        "lint:create": "eslint --init"
    }
}
  • 执行 yarn lint:create   选择指定的（如vue框架）自动生成 .eslintrc.js文件

  •  对eslint的配置进行符合vue3项目的调整
module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  parser: 'vue-eslint-parser',
  extends: ['eslint:recommended', 'plugin:vue/vue3-essential', 'plugin:@typescript-eslint/recommended'],
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
  },
  plugins: ['vue', '@typescript-eslint'],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    //强制使用单引号
    quotes: ['error', 'single'],
    //强制不使用分号结尾
    semi: ['error', 'never'],
  },
}

注意：需要添加其他配置的，可以根据  文档：https://eslint.bootcss.com/docs/user-guide/configuring  进行配置

  •  添加 .editorconfig配置
[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true
  • 配置 .prettierrc 文件
{
   //开启 eslint 支持
  "eslintIntegration": true,
  //使用单引号
  "singleQuote": true,
  //结尾不加分号
  "semi": false
  "endofLine": "lf"
}
  • 添加husky lint-staged 支持（注意：如果当前的lint-staged版本不好用，可以使用  11.2.6版本）
// 使用以下命令可以实现自动安装与配置

npx mrm@2 lint-staged

常规配置

  "lint-staged": {
    "src/**/*.js": "eslint --cache --fix",
    "src/**/*.{ts,vue,js,jsx,tsx}": "prettier --write"
  }

注意：如果在ts文件中没有声明，但实际中存在的变量，可以在eslintrc.js中配置globals  true 等价于 writeable，false等价于 readable如下

  globals: {
    abc: true,
  },

 



前端工程化

相关

前端工程化——travis-ci

标签