Vue3+TypeScript + vite 创建项目步骤
来源:http://www.tudoupe.com时间:2022-02-17
项目搭建
vite
vue-cli
如果已经全局安装过旧版本的vue-cli,先卸载。
安装新版@vue/cli
备注:
vite 是一个由原生ESM驱动的Web开发
构建工具,打开 vite 依赖的 package.json 可以发现在 devDependencies 开发依赖里面已经引入了TypeScript ,甚至还有 vuex , vue-router , less , sass 这些本地开发经常需要用到的工具。vite 轻量,开箱即用的特点,满足了大部分开发场景的需求,作为快速启动本地 Vue项目来说,这是一个非常完美的工具。
vue-cli搭建项目
vue3 的更新怎么能少得了 vue-cli 呢, vue-cli 更强调的是用 cli 的方式进行交互式的配置,选择起来更加灵活可控。丰富的官方插件适配,GUI的创建管理界面,标准化开发流程,这些都是 vue-cli 的特点。

备注:想要预装什么,就手动check什么(即使前期忘记勾选,后期也可以加装)。
例如:忘记使用选择 TypeScript 也没事,加一行cli命令就行了
最后,别忘了在 .vue 代码中,给 script 标签加上 lang=“ts”
vite搭建项目(重点讲)
- 创建
访问:http://localhost:3000

上图可以看到新建的项目结构与vue-cli4创建的项目结构基本一样,都是App.vue和main.js
查看main.js文件内容
发现创建Vue的方式变了,原来是new Vue来初始化Vue,但在Vue3.0中,修改为了通过createApp的方式;
Vue3中文文档
配置项目
配置typescript
1、安装typescript
2、初始化 tsconfig.json
3、将main.js修改为main.ts
其他的引用也修改为main.ts,也需要将其他页面的<script>修改为<script lang="ts">
4、配置 ts 识别vue文件,在项目根目录添加shim.d.ts文件
添加以下内容
配置Vue Router
Vue Router 4.0 ,变化请查看
Github
中完整的细节,
目前版本beta: v4.0.12, yarn 进行安装需要带上版本号
1、安装vuex
2、安装完后配置vue-router
在项目src目录下面新建router目录,然后添加index.ts文件,添加以下内容
3、将router引入到main.ts中,修改main.ts文件
配置Vuex
Vuex 4.0 ,变化请查看
Github
目前版本beta: v4.0.2
1、安装vuex
2、安装完后配置vuex
在项目src目录下面新建store目录,并添加index.ts文件,添加以下内容
配置Ant Design Vue
具体使用方式请参考:
官方文档
1、引入ant-design-vue
2、在main.ts中引入
下一篇:没有了
相关新闻
- 2022-02-17 windows11升级安装失败怎么办
- 2022-02-17 Android OpenGLES + Camera1 相机预览,a
- 2022-02-17 win11u盘安装报错怎么办 windows11u盘安
- 2022-02-17 立创eda学习笔记十六:阵列副本和
- 2022-02-17 thinkpadx270的磁盘分区
- 2022-02-17 安装EXSI遇到No Network Adapters的解决方
- 2022-02-17 2022-02-16 OpenCV编译Qt
- 2022-02-17 【ASWC Arxml结构分解】-2-创建一个
- 2022-02-17 Unity中镜像图片显示
- 2022-02-17 华为运营商级路由器配置示例 | 配
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
