Vite创建vue3项目

1. 初始化最新的vite

npm init vite@latest

npm install

vue3的路由需要自己引入，所以要用到vue-router

npm install vue-router@4 

axios

 npm install --save axios vue-axios

vue3全局自动引入插件

npm i -D unplugin-auto-import

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
export default defineConfig({
  plugins: [vue(), AutoImport({
    imports: ['vue'],
    dts: 'src/auto-import.d.ts'
  })]
})

Element UI 组件库使用

npm install element-plus --save

main.ts

import ElementPlus from 'element-plug'
import 'element-plus/dist/index.css'

let app = createApp(App)
app.use(ElementPlus)

app.mount('#app')

volar 插件支持 elementplus输入提示

tsconfig.json

{
  "compilerOptions": {
    // ...
    "types": ["element-plus/global"]
  }
}

Ant Design Vue

安装

npm install ant-design-vue@next --save

使用

import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

app.use(Antd).mount('#app');

Scoped和样式 穿透

用于在scoped中修改组件库的原有属性

/deep/            VUE2写法
:deep()		     VUE3写法

Vue3集成Tailwind CSS

Tailwind CSS 是一个由js编写的CSS 框架 他是基于postCss 去解析的

官网地址: Tailwind CSS 中文文档 - 无需离开您的HTML，即可快速建立现代网站

为 VS Code 安装 Tailwind CSS IntelliSense 的拓展插件可以提示输入

1. 安装 Tailwind 以及其他依赖项

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

2. 生成配置文件

   执行下面语句会自动生成两个文件

   npx tailwindcss init -p
   

​ 配置-Tailwind CSS 中文文档

4. 修改配置文件 tailwind.config.js

2.6 版本

module.exports = {
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

​ 3.0 版本

module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

5. 创建一个 index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

在main.ts 引入上面创建的index.css 位置随意

import './assets/css/index.css'

animate.css 动画库

npm install animate.css -S

gsap js动画库

npm install gsap -S

lodash 工具库

lodash 报错需要安装ts声明文件库

npm install lodash -S
npm install @types/lodash -D

import _ from 'lodash'

mitt 库(事件总线)

​ www.bilibili.com/read/cv1610…

npm install mitt -S

main.ts

import { createApp } from 'vue'
// import './style.css'
import App from './App.vue'
import mitt from 'mitt'
import './assets/css/reset.less'
const Mit = mitt()
const app = createApp(App)
//TypeScript注册
// 由于必须要拓展 ComponentCustomProperties 类型才能获得类型提示
declare module 'vue' {
  export interface ComponentCustomProperties {
    $Bus: typeof Mit
  }
}
app.config.globalProperties.$Bus = Mit
app.mount('#app')

兄弟A

import { getCurrentInstance } from 'vue';
const instance = getCurrentInstance()
const emitMe = () => {
  instance?.proxy?.$Bus.emit('on-snowman', 'snowman')
  instance?.proxy?.$Bus.emit('on-roc', 'roc')
  instance?.proxy?.$Bus.emit('on-people', 'people')
}

兄弟B

import { getCurrentInstance } from 'vue'
const instance = getCurrentInstance()
instance?.proxy?.$Bus.on('on-snowman', (str) => {
  console.log(str)
})
instance?.proxy?.$Bus.on('*', (type, str) => {
  console.log(type, str, '___');
})
const People = (str: any) => {
  console.log(str);
}
instance?.proxy?.$Bus.on('on_people', People)
// off(取消指定的mitt事件, 取消的回调函数)
instance?.proxy?.$Bus.off('on_people', People)
// 清除所有
instance?.proxy?.$Bus.all.clear()

TSX

npm install @vitejs/plugin-vue-jsx -D

1. vite.config.ts配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), vueJsx()]
})

2. 修改tsconfig.json 配置文件

    "jsx": "preserve",
    "jsxFactory": "h",
    "jsxFragmentFactory": "Fragment",

定义路径别名

在 vite.config.ts 中如下面配置，在别的地方就可以将 ./src 开头的路径简写成 @

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))  // 定义别名
    }
  }
})