安装vite

yarn create vite

创建项目

yarn create @vitejs/app my-app

进入目录

cd my-app

安装依赖

yarn

启动项目

yarn dev

配置路径别名 @ ---> src

// tsconfig.json
"compilerOptions": {
    ......
    // 解决使用@路径引用时候找不到模块
    "baseUrl": ".",
    "paths": {
        "@/*": [ "src/*" ],
    },
  },
 "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue","**/*.ts", "**/*.tsx"],

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
// https://vitejs.dev/config/
// 如果现实 提示“path” 找不到 安装@types/node⬇
// npm install @types/node --save-dev
export default defineConfig({
  ......
  resolve: {
    alias: [{ find: '@', replacement: resolve(__dirname, 'src') }],
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json']
  }
})

安装pinia（代替Vuex的一个库）

yarn add pinia

-------pinia的使用 ----------

src下创建src/stores/modules/main.ts

// stores/modules/main.ts
import { defineStore } from 'pinia'
// 这里是公共的 如果区分页面请创建 stores/modules/user.ts
export const MainStore = defineStore('main', {
  state: () => {
    return { count: 0 }
  },
  actions: {
    add() {
      this.count++
    },
  },
})

页面上读取/调用

<script setup lang='ts'>
import { MainStore } from "@/stores/modules/main";
// 使用Pinia数据共享(也就是vuex) 先实例化
const useMainStore = MainStore();
console.log(useMainStore.count);
// store变量+1
useMainStore.add();
console.log(useMainStore.count);
</script>

--------pinia的使用 END----------

安装less

yarn add less --save
yarn add less-loader@7.x --save-dev

安装Esline

yarn add eslint@7.2.0 eslint-plugin-vue@7.20.0 vue-eslint-parser @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-airbnb-base@14.2.1 eslint-plugin-import -D

      新建.eslintrc.js

module.exports = {
    root: true,
    globals: {
        defineEmits: 'readonly',
        defineProps: 'readonly',
    },
    extends: ['plugin:@typescript-eslint/recommended', 'plugin:vue/vue3-recommended', 'airbnb-base'],
    parserOptions: {
        parser: '@typescript-eslint/parser',
        ecmaVersion: 2020,
    },
    rules: {
        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // 禁用 debugger
        'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // 禁用 console
        'no-bitwise': 'off', // 禁用按位运算符
        'no-tabs': 'true', // 禁用 tab
        'array-element-newline': ['error', 'consistent'], // 强制数组元素间出现换行
        indent: ['error', 2, {
            MemberExpression: 0,
            SwitchCase: 1,
            ignoredNodes: ['TemplateLiteral'],
        },
        ], // 强制使用一致的缩进
        quotes: ['error', 'single'], // 强制使用一致的反勾号、双引号或单引号
        'comma-dangle': ['error', 'always-multiline'], // 要求或禁止末尾逗号
        'object-curly-spacing': ['error', 'always'], // 强制在大括号中使用一致的空格
        'max-len': ['error', 120], // 强制一行的最大长度
        'no-new': 'off', // 禁止使用 new 以避免产生副作用
        'linebreak-style': 'off', // 强制使用一致的换行风格
        'import/extensions': 'off', // 确保在导入路径中统一使用文件扩展名
        'eol-last': 'off', // 要求或禁止文件末尾存在空行
        'no-shadow': 'off', // 禁止变量声明与外层作用域的变量同名
        'no-unused-vars': 'warn', // 禁止出现未使用过的变量
        'import/no-cycle': 'off', // 禁止一个模块导入一个有依赖路径的模块回到自己身上
        'arrow-parens': 'off', // 要求箭头函数的参数使用圆括号
        semi: ['error', 'never'], // 要求或禁止使用分号代替 ASI
        eqeqeq: 'off', // 要求使用 === 和 !==
        'no-param-reassign': 'off', // 禁止对 function 的参数进行重新赋值
        'import/prefer-default-export': 'off', // 如果模块只输入一个名字，则倾向于默认输出
        'no-use-before-define': 'off', // 禁止在变量定义之前使用它们，则倾向于默认输出
        'no-continue': 'off', // 禁用 continue 语句
        'prefer-destructuring': 'off', // 优先使用数组和对象解构
        'no-plusplus': 'off', // 禁用一元操作符 ++ 和 --
        'prefer-const': 'warn', // 要求使用 const 声明那些声明后不再被修改的变量
        'global-require': 'off', // 要求 require() 出现在顶层模块作用域中
        'no-prototype-builtins': 'off', // 禁止直接调用 Object.prototypes 的内置属性
        'consistent-return': 'off', // 要求 return 语句要么总是指定返回的值，要么不指定
        'one-var-declaration-per-line': 'off', // 要求或禁止在变量声明周围换行
        'one-var': 'off', // 强制函数中的变量要么一起声明要么分开声明
        'import/named': 'off', // 确保命名导入与远程文件中的命名导出相对应
        'object-curly-newline': 'off', // 强制大括号内换行符的一致性
        'default-case': 'off', // 要求 switch 语句中有 default 分支
        'no-trailing-spaces': 'off', // 禁用行尾空格
        'func-names': 'off', // 要求或禁止使用命名的 function 表达式
        radix: 'off', // 强制在 parseInt() 使用基数参数
        'no-unused-expressions': 'off', // 禁止出现未使用过的表达式
        'no-underscore-dangle': 'off', // 禁止标识符中有悬空下划线
        'no-nested-ternary': 'off', // 禁用嵌套的三元表达式
        'no-restricted-syntax': 'off', // 禁用特定的语法
        'no-await-in-loop': 'off', // 禁止在循环中出现 await
        'import/no-extraneous-dependencies': 'off', // 禁止使用外部包
        'import/no-unresolved': 'off', // 确保导入指向一个可以解析的文件/模块
        'template-curly-spacing': ['error', 'always'], // 要求或禁止模板字符串中的嵌入表达式周围空格的使用
        '@typescript-eslint/no-var-requires': 'off', // 除import语句外，禁止使用require语句
        '@typescript-eslint/no-empty-function': 'off', // 不允许空函数
        '@typescript-eslint/no-explicit-any': 'off', // 禁止使用 any 类型
        'guard-for-in': 'off', // 要求 for-in 循环中有一个 if 语句
        'class-methods-use-this': 'off', // 强制类方法使用 this
        'vue/html-indent': ['error', 2], // 在<template>中强制一致缩进
        'vue/html-self-closing': 'off', // 执行自闭合的风格
        'vue/max-attributes-per-line': [
            // 强制每行属性的最大数量
            'warn',
            {
                singleline: {
                    max: 3,
                    allowFirstLine: true,
                },
                multiline: {
                    max: 1,
                    allowFirstLine: false,
                },
            },
        ],
        'vue/singleline-html-element-content-newline': 'off', // 要求单行元素的内容前后有一个换行符
    },
}

      新建.prettierrc.js

// .preitterrc.js
module.exports = {
    // 一行的字符数，如果超过会进行换行，默认为80
    printWidth: 120,
    // 一个tab代表几个空格数，默认为80
    tabWidth: 2,
    // 是否使用tab进行缩进，默认为false，表示用空格进行缩减
    useTabs: false,
    // 字符串是否使用单引号，默认为false，使用双引号
    singleQuote: true,
    // 行位是否使用分号，默认为true
    semi: false,
    // 是否使用尾逗号，有三个可选值"<none|es5|all>"
    trailingComma: "all",
    // 对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
    bracketSpacing: true,
    // 代码的解析引擎，默认为babylon，与babel相同
    // "parser": "babylon",
    // 开启 eslint 支持
    eslintIntegration: true
}

yarn add mitt

// main.js
import { createApp } from 'vue'
import App from './App.vue'
// 导入mitt组件通信 将其定义为组件间能穿透使用的函数
import mitt from 'mitt'
// 使用provide将mitt提供给所有子组件
createApp(App).provide('mitter', mitt()).mount('#app')




// Home.vue 页面使用mitt
// 取到mitt
const mitter: any = inject('mitter')
// 发送事件
mitter.emit("postMessage",{ a: 1 })


// ------- 某页面接收监听
mitter.on("postMessage",function(e){
    console.log('接受postMessage事件的数据',e)
})

分享到：

打赏