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 全家桶项目和 ...
随机推荐
- HashMap 链表和红黑树的转换
HashMap在jdk1.8之后引入了红黑树的概念,表示若桶中链表元素超过8时,会自动转化成红黑树:若桶中元素小于等于6时,树结构还原成链表形式. 原因: 红黑树的平均查找长度是log(n),长度为8 ...
- 面试官:知道ThreadLocal嘛?谈谈你对它的理解?(基于jdk1.8)
https://zhuanlan.zhihu.com/p/99150038 西北工业大学 计算机技术硕士在读 在java的多线程模块中,ThreadLocal是经常被提问到的一个知识点,提问的 ...
- SpringBoot单元测试携带Cookie
由于我SpringBoot项目,集成了SpringSecurity,而Security框架使用Redis存储Session,所以,这里列出几个关键的类 org.springframework.sess ...
- 什么是memecache?redis 和 memecache 有什么区别?
什么是memecache? memcached是一套分布式的高速缓存系统,与redis相似.一般的使用目的是,通过缓存数据库查询结果,减少数据库访问次数,以提高动态Web应用的速度.提高可扩展性.为了 ...
- 什么是 MyBatis 的接口绑定?有哪些实现方式?
接口绑定,就是在 MyBatis 中任意定义接口,然后把接口里面的方法和 SQL 语句绑 定, 我们直接调用接口方法就可以,这样比起原来了 SqlSession 提供的方法我们可 以有更加灵活的选择和 ...
- Spring AOP and AspectJ AOP 有什么区别?
Spring AOP 基于动态代理方式实现:AspectJ 基于静态代理方式实现.Spring AOP 仅支持方法级别的 PointCut:提供了完全的 AOP 支持,它还支持属性级别的 PointC ...
- 图灵机器人 V1 和 V2 接入方法
API1.0使用方法: import requests import json import yuyinhecheng as hc def Tuling(words): Tuling_API_ ...
- notification(浏览器通知)
一.notification简介 Web Notifications是HTML5 的一个特性,目前我知道的有谷歌浏览器和windows edge对它进行了支持,用于向用户配置和显示桌面通知. 二.no ...
- C++:Abstract class : invalid abstract return type for member function ‘virtual...’
#include <iostream> #include <cmath> #include <sstream> using namespace std; class ...
- Linux安装JDK报错
报错内容: tar (child): jdk-8u141-linux-x64.tar.gz: Cannot open: No such file or directory tar (child): E ...