vue配置项里面的 自动引入的文件,组件

vite

目录结构

之前的vue.config.js变成了vite.config.js

script上面加了一个setup

setup语法糖

1、不用在写export default 以及setup()

2、所有template里面用的东西都不用return了

3、引入的组件可以不用挂载直接使用

defineProps

defineEmits

关于v3的组件之间的数据通信

父子级 自定义属性

传结构 还是用插槽

直接获取没了

pinia或者vuex（常用于过度写法中）

pinia-vuex

elementplus

一个 Vue 3 UI 框架 | Element Plus

unplugin-vue-components 自动引入组件

unplugin-auto-import 自动引入

import { fileURLToPath, URL } from 'node:url'
import ElementPlus from 'unplugin-element-plus/vite'
//自动导入  主要是第三方的方法
import AutoImport from 'unplugin-auto-import/vite'
//组件的自动导入 src/component  src/views
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
      imports:['vue','vuex']
    }),
    Components({
      dts: true,//允许去文件加找
      dirs: ['src/components','src/views'], // 按需加载的文件夹
      resolvers: [ElementPlusResolver()],
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

axios

以前

下载

utils 封装了一个文件http、request，ajax随便

mian.js引入 Vue.prototype.$axios=axios

使用：this.$axios

现在

下载

utils 封装了一个文件http、request，ajax随便

用的时候直接引入 import axios from './xxx'

router

const router=useRouter()

router.push()

const route=useRoute()

route.query

注意：类似post的name传递的方式不能用了

less

npm i less

style lang="less"

ts

创建一个项目

router

ts

pinia

下载

less

axios

element-plus

unplugin-vue-components

unplugin-auto-import

📎郝文韬_2023-07-12_vue3-1.wmv

📎郝文韬_2023-07-12_vue3-2.wmv

📎郝文韬_2023-07-12_vue3-3.wmv