创建项目
切记，目录中不要带有中文，会报错
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>
