vite.js官网地址

创建项目

切记，目录中不要带有中文，会报错

npm init @vitejs/app
//需要输入项目名称
//例如  demo-app
demo-app
//进入文件夹
cd ./demo-app
//安装依赖
npm install
//启动项目
npm run dev

vite配置

插件的方式 使用vue/react
vite.config.js

export default {
  alias: {
    "@": resolve("src"),
    "comps": resolve("src/components"),
    "apis": resolve("src/apis"),
    "views": resolve("src/views"),
    "utils": resolve("src/utils"),
    "routes": resolve("src/routes"),
    "styles": resolve("src/styles"),
  },
  plugins: [vue()]
}

defineConfig可规范类型

import { defineConfig } from 'vite'

export default defineConfig({
 // ...
})

函数式配置

export default ({ command, mode }) => {
  if (command === 'serve') {
    return {
      // serve specific config
    }
  } else {
    return {
      // build specific config
    }
  }
}

setup scripte

• 导入后直接使用，就是免注册

<template>
  <ShaBe>
</template>
<script setup>
import ShaBe from 'comps/Shabe.vue'
</script>

• defineProps defineEmit 子组件中定义属性和事件，

//属性定义即用
defineProps({
  msg: String,
});
//方法返回派发方法函数
const emit = defineEmit(["myClick"]);
const handleClick = () => {
  emit("myClick", "root");
};

• useContext()方法返回上下文

//子组件中
const ctx = useContext();
//抛出事件
ctx.expose({
  someMethed() {
    console.log("抛出的事件");
  },

//父组件中
<template>
 //组件实例
  <HelloWorld @myClick="handleMyClick" msg="Hello Vue 3 + Vite"  ref="hw"/>
   
</template>

<script setup>

import HelloWorld from 'comps/HelloWorld.vue'
//ref类型
import { useContext ,ref} from 'vue'
const hw=ref(null)
console.log(useContext(),333)
const handleMyClick=(msg)=>{
  console.log(msg)
//hw的value属性上可获取ctx.epose的方法
  hw.value.someMethed()
}
</script>