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. HashMap 链表和红黑树的转换

    HashMap在jdk1.8之后引入了红黑树的概念,表示若桶中链表元素超过8时,会自动转化成红黑树:若桶中元素小于等于6时,树结构还原成链表形式. 原因: 红黑树的平均查找长度是log(n),长度为8 ...

  2. 面试官:知道ThreadLocal嘛?谈谈你对它的理解?(基于jdk1.8)

    https://zhuanlan.zhihu.com/p/99150038   ​ 西北工业大学 计算机技术硕士在读 在java的多线程模块中,ThreadLocal是经常被提问到的一个知识点,提问的 ...

  3. SpringBoot单元测试携带Cookie

    由于我SpringBoot项目,集成了SpringSecurity,而Security框架使用Redis存储Session,所以,这里列出几个关键的类 org.springframework.sess ...

  4. 什么是memecache?redis 和 memecache 有什么区别?

    什么是memecache? memcached是一套分布式的高速缓存系统,与redis相似.一般的使用目的是,通过缓存数据库查询结果,减少数据库访问次数,以提高动态Web应用的速度.提高可扩展性.为了 ...

  5. 什么是 MyBatis 的接口绑定?有哪些实现方式?

    接口绑定,就是在 MyBatis 中任意定义接口,然后把接口里面的方法和 SQL 语句绑 定, 我们直接调用接口方法就可以,这样比起原来了 SqlSession 提供的方法我们可 以有更加灵活的选择和 ...

  6. Spring AOP and AspectJ AOP 有什么区别?

    Spring AOP 基于动态代理方式实现:AspectJ 基于静态代理方式实现.Spring AOP 仅支持方法级别的 PointCut:提供了完全的 AOP 支持,它还支持属性级别的 PointC ...

  7. 图灵机器人 V1 和 V2 接入方法

    API1.0使用方法: import requests import json import yuyinhecheng as hc def Tuling(words):     Tuling_API_ ...

  8. notification(浏览器通知)

    一.notification简介 Web Notifications是HTML5 的一个特性,目前我知道的有谷歌浏览器和windows edge对它进行了支持,用于向用户配置和显示桌面通知. 二.no ...

  9. C++:Abstract class : invalid abstract return type for member function ‘virtual...’

    #include <iostream> #include <cmath> #include <sstream> using namespace std; class ...

  10. Linux安装JDK报错

    报错内容: tar (child): jdk-8u141-linux-x64.tar.gz: Cannot open: No such file or directory tar (child): E ...