扫码交朋友
安装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
}
安装mitt使用消息订阅
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)
})
作者网站的网速是多少的，一点也不卡
回复了林云铭：
回复了5496526：1M主机 卡死了