# 前端杨村长创建vite项目
$ npm init @vitejs/app
or
$ yarn init @vitejs/app
1
2
3
2
3
# vite配置变化
不管是vue还是react,都以插件形式整合到vite环境中
全局配置，更有用的是：alias(别名)，css.modules(css)，esbuild(创建)
# 默认
// vite.config.js
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";//安装vue插件
export default defineConfig({
plugins: [vue()],//执行当前插件的工厂函数，vue相关的特有配置可以在vue()中通过选项的形式直接传入
});
1
2
3
4
5
6
7
2
3
4
5
6
7
defineConfig 引入是提供代码提示支持
# alias配置
// vite.config.js
import path from "path";
export default defineConfig({
alias: {
"@": path.resolve(__dirname, "src"),
comps: path.resolve(__dirname, "src/components"),
serve: path.resolve(__dirname, "src/serve"),
routes: path.resolve(__dirname, "src/routes"),
utils: path.resolve(__dirname, "src/utils"),
styles: path.resolve(__dirname, "src/styles"),
},
});
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
使用
// App.vue
// 之前
import HelloWorld from './components/HelloWorld.vue'
// 之后
import HelloWorld from "comps/HelloWorld.vue";
1
2
3
4
5
2
3
4
5
# css配置
主要有两个，css.modules和css.preprocessorOptions
# esbuild
# vue3 setup script详解
// 1、直接导入组件
import {defineProps,defineEmit} from "comps/New.vue";
import New from "comps/New.vue";
// 使用
// <New></New>
// 2、属性定义，相当于输入
defineProps({
msg:String
})
// 3、获取上下文
const ctx=useContext()
ctx.emit('handleClick')
// 4、定义事件，相当于输出，如果需要校验，可以定义对象，和emit一样
const emit = defineEmit(['handleClick'])
// 使用
// <button @click="emit('handleClick')">emit</button>
// 还可以
const emit = defineEmit(['handleClick'])
const onClick = ()=>{
emit('handleClick')
}
// 使用
// <button @click="onClick">emit</button>
// 父组件接收不变
// <New @onClick="onClick"></New>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32