vue3出来已经有一段时间了，vite2.0也到了beta版本了，现在做一个vite+vue3+ts的起步教程。同时加入element-plus

本教程工具使用yarn，使用npm工具的同学自行转换。

创建工程

输入命令

1

$ yarn create @vitejs/app

正常情况下会让你输入工程名：Project Name，该名称也是工程目录名称，使用英文。

然后模板选择Vue-TS，因为我们是使用vue3+ts

正常情况下工程很快创建完成,创建个目录如下：

安装调试运行

进入工程目录

下载安装依赖包

1

yarn install

然后运行开发模式

1

yarn run dev

很快编译完成，运行一个本地服务器，地址如下：

localhost:3000

在浏览器输入地址后可以看到

VS Code插件

用vs code打开工程目录，按照提示，安装Vetur和VueDX扩展插件。

VueDX要安装，如果不安装，ts文件无法识别vue模块，可能需要自己编写申明文件。

另外，VueDX处于alpha开发阶段，使用过程中可能会存在问题。

安装element-plus

element-plus是vue3版本的element ui。element-plus的开源仓库是在github

使用如下命令添加element-plus

1

yarn add element-plus

然后修改main.ts文件如下：

1
2
3
4
5
6
7
8

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

vs code的扩展插件VueDX如果没有安装，会提示错误，需要自己补充申明文件。

申明文件放在工程目录的src目录下，文件名称为：shims-vue.d.ts

内容如下：

1
2
3
4
5

declare module '*.vue' {
    import { ComponentOptions } from 'vue'
    const componentOptions: ComponentOptions
    export default componentOptions
}