提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

一、使用vite创建项目

执行命令

npm create vite
1

输入项目名称

选择创建vue项目

拥抱TS，选择vue-ts

按照提示，cd进入项目，安装依赖，启动项目

至此，vue3.2项目已经创建完成，可以正常启动项目

二、使用volar替换vetur

在使用vscode开发中，由于使用vue2开发时会安装 vetur 插件检测、高亮vue代码，但是在vue3中并不适用，会出现编辑器如下报错，我们需要使用volar来替换vetur

1、在vscode插件库中找到已安装的vetur，进行卸载或安装禁用(如果未来还要使用vscode维护或者开发vue2的项目，建议禁用，需要时重新启用)

2、在插件库中搜索volar，进行安装并启用

三、vite 配置

1、修改项目启动端口号
在vite.confij.ts中，修改默认端口号

export default defineConfig({
  server: { // 修改端口号
    port: 3001
  },
  plugins: [vue()]
})
1
2
3
4
5
6

2、别名
由于node默认是不支持ts，所以需要引入一个库包，可以使node在ts中正常使用
进入项目目录，执行以下命令

npm install @types/node --save-dev
1

安装完成后，即可正常设置别名

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

// https://vitejs.dev/config/
export default defineConfig({
  server: { // 修改端口号
    port: 3001
  },
  resolve: {
    alias: {
      "@": path.resolve(__dirname, 'src'),
      "com": path.resolve(__dirname, 'src/components')
    }
  },
  plugins: [vue()]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

我在此设置了@来代表src目录，com代表src/components目录，后续可根据自己需要设置别名

四、初识setup语法糖

组合式API中初始化变量，并使用时

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

而在使用setup语法糖时，代码简洁如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

五、父组件向子组件传值 defineProps

在组合式api中，子组件接收父组件传值用props方法，如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

而在setup语法糖中，可以使用defineProps方法

defineProps({
  msg: {
    type: String,
    required: true,
    default: 'hello'
  },
  ageList: Array
})
1
2
3
4
5
6
7
8

在使用setup语法糖同时使用ts时，为了确认变量类型，也可以使用如下方法

defineProps<{
  msg?: String,  // ?: 表示此变量可选，即可传可不传
  ageList: Array
}>()
1
2
3
4

如果props需要在js中使用，或者给传参一个默认值时，可以使用 widthDefaults方法

const props = withDefaults(
  defineProps<{
    msg？: string, // 首字母需要小写
    ageList: Array
  }>(),{
    msg: 'hello',
    ageList: () => [1,2]
  }
)

1
2
3
4
5
6
7
8
9
10

六、子组件向父组件传值 defineEmits

在setup语法糖中，子组件向父组件传值时，使用defineEmits

1
2
3
4
5
6
7
8
9
10
11

在父组件中接收时，和vue2中语法类似

1
2
3
4
5
6
7
8
9
10

类型声明

1
2
3
4
5
6
7
8
9
10
11
12
13

七、安装sass和element-plus

安装element-plus

npm install element-plus --save
1

安装sass预处理器

npm install sass-loader sass --save-dev
1

element-plus官方文档介绍比较详细，在此不详述