U盘PE| w764位旗舰版下载 | U盘装win7系统 | U盘启动 |win7pe | win10下载 |加入收藏土豆PE官网U盘PE,U盘装win7系统,win7pe,U盘启动,U盘装系统,w764位旗舰版下载站!
当前位置:主页 > 帮助中心 > 土豆PE使用教程 >

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搭建项目(重点讲)

  1. 创建

访问: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中引入

上一篇:windows11升级安装失败怎么办

下一篇:没有了

Copyright © 2012-2014 Www.tudoupe.Com. 土豆启动 版权所有 意见建议:tdsky@tudoupe.com

土豆系统,土豆PE,win7系统下载,win7 64位旗舰版下载,u盘启动,u盘装系统,win10下载,win10正式版下载,win10 RTM正式版下载,win8下载,电脑蓝屏,IE11修复,网络受限,4K对齐,双系统,隐藏分区,系统安装不了,U盘装系统,笔记本装系统,台式机装系统,diskgenius运用,GHSOT装系统,U盘修复,U盘技巧,U盘速度,U盘不能格式化,U盘复制发生错误,U盘加密,U盘选购,开机黑屏,蓝屏,进不了系统,上不了网,打不开程序,点击无反应,系统设置,PE个性化,PE添加网络,PE维护系统

点击这里给我发消息