vite创建vue3+ts项目流程
vite+vue3+typescript搭建项目过程
vite和vue3.0都出来一段时间了,尝试一下搭vite+vue3+ts的项目
相关资料网址
- vue3.0官网:
https://v3.vuejs.org/guide/introduction.html#getting-started
- Element对vue3支持——Element Plus
官网地址:https://element-plus.gitee.io/#/zh-CN
github地址:https://github.com/element-plus/element-plus
步骤
npm i vite -g
vite -v
根据是否返回版本号判断是否下载成功npm init vite-app 项目名
创建项目cd 文件夹名
npm i
npm run dev
即可看到网址打开
前五步为vite
的使用搭建
npm i -S typescript vue-router@next
安装ts和router
先配置ts:
npx tsc --init
创建tsconfig.json
文件把根目录下的
main.js
文件改名为main.ts
把根目录下的
index.html
中引入的main.js
改名为main.ts
同时把
.vue
文件里的<script>
标签中加入lang="ts"
在项目根目录创建
shim.d.ts
文件,同时在其中写入以下代码,用于配置ts支持识别.vue
文件declare module "*.vue" {
import { Component } from "vue";
const component: Compoent;
export default component;
}
配置router:
在
src
下建立router
目录并在其中创建index.ts
文件,并在其中写入(此处的地址为自己在根目录创建views
文件夹下创建index.vue
文件,可根据自己需要创建)import { RouteRecordRaw, createRouter, createWebHistory } from "vue-router"; const routes: RouteRecordRaw[] = [
{
path: "/",
name: "Home",
component: import("../views/index.vue"),
},
]; const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
});export default router;
修改
main.ts
文件引入vue-router
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router/index";
createApp(App).use(router).mount("#app");
之后就可以写代码了
vite创建vue3+ts项目流程的更多相关文章
- Vue CLI 5 和 vite 创建 vue3.x 项目以及 Vue CLI 和 vite 的区别
这几天进入 Vue CLI 官网,发现不能选择 Vue CLI 的版本,也就是说查不到 vue-cli 4 以下版本的文档. 如果此时电脑上安装了 Vue CLI,那么旧版安装的 vue 项目很可能会 ...
- 基于 vite 创建 vue3 全家桶项目(vite + vue3 + tsx + pinia)
vite 最近非常火,它是 vue 作者尤大神发布前端构建工具,底层基于 Rollup,无论是启动速度还是热加载速度都非常快.vite 随 vue3 正式版一起发布,刚开始的时候与 vue 绑定在一起 ...
- vue3 vite2 封装 SVG 图标组件 - 基于 vite 创建 vue3 全家桶项目续篇
在<基于 vite 创建 vue3 全家桶>一文整合了 Element Plus,并将 Element Plus 中提供的图标进行全局注册,这样可以很方便的延续 Element UI 的风 ...
- Vue3 Vite3 多环境配置 - 基于 vite 创建 vue3 全家桶项目(续篇)
在项目或产品的迭代过程中,通常会有多套环境,常见的有: dev:开发环境 sit:集成测试环境 uat:用户接收测试环境 pre:预生产环境 prod:生产环境 环境之间配置可能存在差异,如接口地址. ...
- gulp创建完整的项目流程
所有的环境都是在 node 安装好的基础上执行的. node -v 查看node的安装情况.npm -v查看npm 的安装情况. gulp自动化构建常用参数 1.src 读取文件或者文件夹 2.des ...
- vite创建vue3项目 vueconfig配置及其备注
import vue from '@vitejs/plugin-vue' const path = require('path') // vite.config.js # or vite.config ...
- vite 搭建Vue3.0项目
1.全局安装vite:npm install create-vite-app -g 2.创建项目:npx create-vite-app project-name 3.cd project-name ...
- Vue3: 如何以 Vite 创建,以 Vue Router, Vuex, Ant Design 开始应用
本文代码: https://github.com/ikuokuo/start-vue3 在线演示: https://ikuokuo.github.io/start-vue3/ Vite 创建 Vue ...
- 开箱即用 yyg-cli(脚手架工具):快速创建 vue3 组件库和vue3 全家桶项目
1 yyg-cli 是什么 yyg-cli 是优雅哥开发的快速创建 vue3 项目的脚手架.在 npm 上发布了两个月,11月1日进行了大升级,发布 1.1.0 版本:支持创建 vue3 全家桶项目和 ...
随机推荐
- loj#6072 苹果树(折半搜索,矩阵树定理,容斥)
loj#6072 苹果树(折半搜索,矩阵树定理,容斥) loj 题解时间 $ n \le 40 $ . 无比精确的数字. 很明显只要一个方案不超过 $ limits $ ,之后的计算就跟选哪个没关系了 ...
- 【freertos】002-posix模拟器设计与cortex m3异常处理
目录 前言 posix 标准接口层设计 模拟器的系统心跳 模拟器的task底层实质 模拟器的任务切换原理 cortex M3/M4异常处理 双堆栈指针 双操作模式 栈帧 EXC_RETURN 前言 如 ...
- BTree和B+Tree 简单区别
本篇作用于各种树之间的区别,非算法详细介绍,只是给我们这种非科班出身的一种大概的印象,现在网上更多是讲各种树的怎么实现的细节问题,本篇不涉及那么高深,如果详细了解可以查阅他人的资料,很多大神已经说的很 ...
- ruoyi首次使用常见问题的解决方案
1.导入项目之后,下载依赖包之后,模块的依赖项飘红(我这里无法复现,当参考图吧) 解决方法: 2.ruoyi框架代码生成之后,需要自己进行替换到指定位置.相应的官方文档位置,否则,可能会出现404,访 ...
- Springmvc入门基础(五) ---controller层注解及返回类型解说
0.@Controller注解 作用:通过@Controller注解,注明该类为controller类,即控制器类,需要被spring扫描,然后注入到IOC容器中,作为Spring的Bean来管理,这 ...
- synchronized的原理
synchronized的使用 synchronized是一个java中的关键字,是基于JVM层面的,用于保证java的多线程安全,它具有四大特性,可用于完全替代volatile: 原子性:所谓原子性 ...
- Linux如何查看某个端口是否被占用
1.netstat -anp |grep 端口号 2.netstat -nultp(此处不用加端口号) 3.netstat -anp |grep 82 查看82端口的使用情况
- remote debug 的详细配置
一.remote debug 的简单介绍 何为远程debug,项目写完后就需要进入到测试环节,将代码打包发布到测试环境(服务器)上.这时候测试人员测试出一个缺陷(bug).由于代码已经发布到测试环境, ...
- 又快又好!巧用ChartJS打造你的实用折线图
又快又好!巧用ChartJS打造你的实用折线图 最终效果 本示例利用官方示例改造而成,生成带图示的折线图,标出各折线的名称,可以筛选想要显示的折线. 要实现最终效果,我们要分三步走: 生成折线图: 生 ...
- Vue-router实现单页面应用在没有登录情况下,自动跳转到登录页面
这是我做前端一来的第一篇文章,都不知道该怎么开始了.那就直接奔主题吧.先讲讲这个功能的实现场景吧,我们小组使用vue全家桶实现了一个单页面应用,最初就考虑对登录状态做限制.比如登录后不能后退到登录页面 ...