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
步骤
  1. npm i vite -g
    vite -v
    根据是否返回版本号判断是否下载成功
  2. npm init vite-app 项目名 创建项目
  3. cd 文件夹名
  4. npm i
    npm run dev
    即可看到网址打开

前五步为vite的使用搭建

  1. npm i -S typescript vue-router@next 安装ts和router
先配置ts:
  1. npx tsc --init 创建tsconfig.json文件

  2. 把根目录下的main.js文件改名为main.ts

  3. 把根目录下的index.html中引入的main.js改名为main.ts

  4. 同时把.vue文件里的<script>标签中加入lang="ts"

  5. 在项目根目录创建shim.d.ts文件,同时在其中写入以下代码,用于配置ts支持识别.vue文件

    declare module "*.vue" {
    import { Component } from "vue";
    const component: Compoent;
    export default component;
    }
配置router:
  1. 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;
  2. 修改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项目流程的更多相关文章

  1. Vue CLI 5 和 vite 创建 vue3.x 项目以及 Vue CLI 和 vite 的区别

    这几天进入 Vue CLI 官网,发现不能选择 Vue CLI 的版本,也就是说查不到 vue-cli 4 以下版本的文档. 如果此时电脑上安装了 Vue CLI,那么旧版安装的 vue 项目很可能会 ...

  2. 基于 vite 创建 vue3 全家桶项目(vite + vue3 + tsx + pinia)

    vite 最近非常火,它是 vue 作者尤大神发布前端构建工具,底层基于 Rollup,无论是启动速度还是热加载速度都非常快.vite 随 vue3 正式版一起发布,刚开始的时候与 vue 绑定在一起 ...

  3. vue3 vite2 封装 SVG 图标组件 - 基于 vite 创建 vue3 全家桶项目续篇

    在<基于 vite 创建 vue3 全家桶>一文整合了 Element Plus,并将 Element Plus 中提供的图标进行全局注册,这样可以很方便的延续 Element UI 的风 ...

  4. Vue3 Vite3 多环境配置 - 基于 vite 创建 vue3 全家桶项目(续篇)

    在项目或产品的迭代过程中,通常会有多套环境,常见的有: dev:开发环境 sit:集成测试环境 uat:用户接收测试环境 pre:预生产环境 prod:生产环境 环境之间配置可能存在差异,如接口地址. ...

  5. gulp创建完整的项目流程

    所有的环境都是在 node 安装好的基础上执行的. node -v 查看node的安装情况.npm -v查看npm 的安装情况. gulp自动化构建常用参数 1.src 读取文件或者文件夹 2.des ...

  6. vite创建vue3项目 vueconfig配置及其备注

    import vue from '@vitejs/plugin-vue' const path = require('path') // vite.config.js # or vite.config ...

  7. vite 搭建Vue3.0项目

    1.全局安装vite:npm install create-vite-app -g 2.创建项目:npx create-vite-app project-name 3.cd project-name ...

  8. Vue3: 如何以 Vite 创建,以 Vue Router, Vuex, Ant Design 开始应用

    本文代码: https://github.com/ikuokuo/start-vue3 在线演示: https://ikuokuo.github.io/start-vue3/ Vite 创建 Vue ...

  9. 开箱即用 yyg-cli(脚手架工具):快速创建 vue3 组件库和vue3 全家桶项目

    1 yyg-cli 是什么 yyg-cli 是优雅哥开发的快速创建 vue3 项目的脚手架.在 npm 上发布了两个月,11月1日进行了大升级,发布 1.1.0 版本:支持创建 vue3 全家桶项目和 ...

随机推荐

  1. loj#6072 苹果树(折半搜索,矩阵树定理,容斥)

    loj#6072 苹果树(折半搜索,矩阵树定理,容斥) loj 题解时间 $ n \le 40 $ . 无比精确的数字. 很明显只要一个方案不超过 $ limits $ ,之后的计算就跟选哪个没关系了 ...

  2. 【freertos】002-posix模拟器设计与cortex m3异常处理

    目录 前言 posix 标准接口层设计 模拟器的系统心跳 模拟器的task底层实质 模拟器的任务切换原理 cortex M3/M4异常处理 双堆栈指针 双操作模式 栈帧 EXC_RETURN 前言 如 ...

  3. BTree和B+Tree 简单区别

    本篇作用于各种树之间的区别,非算法详细介绍,只是给我们这种非科班出身的一种大概的印象,现在网上更多是讲各种树的怎么实现的细节问题,本篇不涉及那么高深,如果详细了解可以查阅他人的资料,很多大神已经说的很 ...

  4. ruoyi首次使用常见问题的解决方案

    1.导入项目之后,下载依赖包之后,模块的依赖项飘红(我这里无法复现,当参考图吧) 解决方法: 2.ruoyi框架代码生成之后,需要自己进行替换到指定位置.相应的官方文档位置,否则,可能会出现404,访 ...

  5. Springmvc入门基础(五) ---controller层注解及返回类型解说

    0.@Controller注解 作用:通过@Controller注解,注明该类为controller类,即控制器类,需要被spring扫描,然后注入到IOC容器中,作为Spring的Bean来管理,这 ...

  6. synchronized的原理

    synchronized的使用 synchronized是一个java中的关键字,是基于JVM层面的,用于保证java的多线程安全,它具有四大特性,可用于完全替代volatile: 原子性:所谓原子性 ...

  7. Linux如何查看某个端口是否被占用

    1.netstat  -anp  |grep   端口号 2.netstat   -nultp(此处不用加端口号) 3.netstat  -anp  |grep  82    查看82端口的使用情况

  8. remote debug 的详细配置

    一.remote debug 的简单介绍 何为远程debug,项目写完后就需要进入到测试环节,将代码打包发布到测试环境(服务器)上.这时候测试人员测试出一个缺陷(bug).由于代码已经发布到测试环境, ...

  9. 又快又好!巧用ChartJS打造你的实用折线图

    又快又好!巧用ChartJS打造你的实用折线图 最终效果 本示例利用官方示例改造而成,生成带图示的折线图,标出各折线的名称,可以筛选想要显示的折线. 要实现最终效果,我们要分三步走: 生成折线图: 生 ...

  10. Vue-router实现单页面应用在没有登录情况下,自动跳转到登录页面

    这是我做前端一来的第一篇文章,都不知道该怎么开始了.那就直接奔主题吧.先讲讲这个功能的实现场景吧,我们小组使用vue全家桶实现了一个单页面应用,最初就考虑对登录状态做限制.比如登录后不能后退到登录页面 ...