一步步带你用vite简单搭建ts+vue3全家桶

目录
  • 一、vite环境搭建,构建vite-vue-ts项目
    • 1、安装vite环境
    • 2、使用vite初始化vite+vue+ts的项目
    • 3、选择项目类型为vue+ts
  • 二、项目配置
    • 1、vue-router 配置
    • 2、vuex 配置
    • 3、vite.config.ts 配置
  • 总结

一、vite环境搭建,构建vite-vue-ts项目

1、安装vite环境

npm init @vitejs/app

或者

yarn create @vitejs/app

2、使用vite初始化vite+vue+ts的项目

npm init @vitejs/app app-name

或者

yarn create @vitejs/app app-name

3、选择项目类型为vue+ts

(小tips:git bash中直接按上下键切换选择自己想要的选项,虽然界面中不会动态展示切换的用户交互过程,但是别担心,在回车后可以看到是切换到了对应选项的)

如此一来,项目初始化完成,我们会得到一个文件结构如下图的项目:

此时,ts文件都会报此类错误: 找不到依赖

因此我们需要执行npm install来安装依赖,安装完成后就ok了。如果编辑器此时还是有报错提示可以重新打开文件试试。

此时已无报错:

跟着package.json中的脚本设定,尝试启动项目,结果如下:

此时,项目初始化就算是完成了。

二、项目配置

1、vue-router 配置

(1)安装vue-router

npm install vue-router@4

或者

yarn add vue-router@4

(2)在src下新建一个router文件夹,作为vue-router的配置目录。此目录下再新建index.ts文件,编辑内容如下:

import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
const history = createWebHistory()
const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    redirect: "/home",
  },
  {
    path: "/home",
    name: "home",
    component: () => import("../views/home/index.vue"),
  },
];
const router = createRouter({
      history,
      routes
})
export default router

(3)新建一个views文件夹,作为项目界面开发目录。参考router中的配置可知,在views目录下新建home目录并新建index.vue,编辑文件如下:

<script setup lang="ts">
import { ref } from 'vue'

const msg = ref('Hello')
const count = ref(710)
</script>

<template>
  <h2>{{ msg }}</h2>
  <h2>{{ count }}</h2>
</template>

<style scoped>
</style>

(4)在main.ts中引入vue-router

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

createApp(App).use(router).mount("#app");

(5)在App.vue中使用vue-router

<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
</script>

<template>
  <router-view />
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

配置结束,实现界面如下:

2、vuex 配置

(1)安装vuex

npm install vuex@next --save

或者

yarn add vuex@next --save

(2)在 src目录下创建一个store文件夹,在里面新建 index.ts、state.ts、mutations.ts、actions.ts

(3)编辑index.ts如下:

import { createStore, } from "vueX";
import state from './state'
import mutations from './mutations'
import actions from './actions'
const store = createStore({
      state,
      mutations,
      actions,
      modules: {

      }
})
export default store

(4)在main.ts中引入

import { createApp } from 'vue'
import App from './App.vue'
import router from "./router"
import store from './store'
const app = createApp(App)

app.use(router).use(store).mount('#app')

3、vite.config.ts 配置

(1)配置路径别名

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],  // 注册插件
  server: {
    open: true
  },
  resolve: {
    alias: {
      // 如果报错__dirname找不到,需要安装node,执行yarn add @types/node --save-dev
      "@": path.resolve(__dirname, "src"),
      "comps": path.resolve(__dirname, "src/components"),
    }
  }
})

出现报错,无法识别path模块:

path模块是node中的一个核心模块,需要安装让 TypeScript 支持 node.js 的依赖包—— @types/node(This package contains type definitions for Node.js)

npm install @types/node --save-dev

安装成功后,就可以获得有关node.js v6.x 的API的 类型说明文件,之后就可以顺利的导入需要的模块了,问题解决。

总结

到此这篇关于用vite简单搭建ts+vue3全家桶的文章就介绍到这了,更多相关vite搭建ts+vue3全家桶内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 一个基于vue3+ts+vite项目搭建初探

    目录 前言 环境准备 使用Vite快捷搭建 使用npm 使用yarn 安装依赖 启动项目 修改vite配置文件 找到根目录vite.config.ts文件打开 集成路由 集成Vuex 添加element ui 集成axios 集成Sass Vue3 使用 总结 前言 基于Vue3已经成为默认版本,目前的项目暂时还没有使用过vue3开发和最近有一个全新的新项目的基础下,使用vue3开发项目,必然是未来的一个趋势 下面记录一下怎么使用Vue3 + ts + vite 从0开始搭建一个项目 环境准备

  • Vue3+script setup+ts+Vite+Volar搭建项目

    目录 使用 Vite 创建 vue + ts 项目 Vue 3 的三种语法 Option API Composition API script setup(Composition API 的语法糖) 安装 Volar 结尾 好久没有写了,最近看到Vue3.2 发布了,害,又要开始卷了么. 其实我自己本身还没有使用过Vue3 做过实际的项目开发,然鹅又出新东西了--, 新时代农民工真的是左手工作,右手游戏,还要用jio去学习呢. 什么? 你说谈对象? xswl,我特么一个农民工也配谈对象? 不卷不

  • vite+vue3.0+ts+element-plus快速搭建项目的实现

    vite 出了 2.x 版本,抱着学一学的心态决定出个简单的项目,结合 element-plus,以及将会成为每位前端必会的 typescript,实现了如下内容. vite是一个由原生 ESM 驱动的 Web 开发构建工具.在开发环境下基于浏览器原生 ES imports 开发,在生产环境下基于 Rollup 打包. vite 作用 快速的冷启动:不需要等待打包操作: 即时的热模块更新:替换性能和模块数量的解耦让更新飞起: 真正的按需编译:不再等待整个应用编译完成,这是一个巨大的改变. 使用的

  • 从零搭建一个vite+vue3+ts规范基础项目(搭建过程问题小结)

    目录 项目初始化 安装router和pinia 安装ESlint eslint的vue规则需要切换 安装prettier 安装stylelint 安装husky 安装commitlint 总结 参考: 最近时间总算是闲了下来,准备着手搭建一个基础模板,为后面新项目准备的,搭建过程中遇到不少问题,现在总结下来给大家使用. 项目初始化 本项目已vite开始,所以按照vite官方的命令开始.这里使用的命令行的方式来搭建基础项目: yarn create vite my-vue-app --templa

  • 详解vite+ts快速搭建vue3项目以及介绍相关特性

    vite 尤大在 Vue 3.0 beta 直播中推荐了 vite 的工具,强调:针对Vue单页面组件的无打包开发服务器,可以直接在浏览器运行请求的 vue 文件 很新颖,这篇博客用它来搭建一个 vue3 的项目试试 Vite 是面向现代浏览器,基于原生模块系统 ESModule 实现了按需编译的 Web 开发构建工具.在生产环境下基于 Rollup 打包 快速冷启动服务器 即时热模块更换(HMR) 真正的按需编译 node >= 10.16.0 搭建 使用 vite 搭建项目 npm init

  • 一步步带你用vite简单搭建ts+vue3全家桶

    目录 一.vite环境搭建,构建vite-vue-ts项目 1.安装vite环境 2.使用vite初始化vite+vue+ts的项目 3.选择项目类型为vue+ts 二.项目配置 1.vue-router 配置 2.vuex 配置 3.vite.config.ts 配置 总结 一.vite环境搭建,构建vite-vue-ts项目 1.安装vite环境 npm init @vitejs/app 或者 yarn create @vitejs/app 2.使用vite初始化vite+vue+ts的项目

  • 使用docker搭建一套开发环境全家桶的详细教程

    DNMP介绍 DNMP(Docker + Nginx + MySQL + PHP7/5 + Redis)是一款全功能的LNMP一键安装程序.支持的服务丰富.功能强大.使用简单.兼容多平台.是适用于多端的一款docker开发与生产环境的PHP环境全家桶. DNMP项目特点: 100%开源 100%遵循Docker标准 支持多版本PHP共存,可任意切换(PHP5.4.PHP5.6.PHP7.1.PHP7.2.PHP7.3) 支持绑定任意多个域名 支持HTTPS和HTTP/2 PHP源代码.MySQL

  • 使用Vite+Vue3+Vant全家桶快速构建项目步骤详解

    目录 引言 一.vue3全家桶模板介绍 1.版本依赖 2.全家桶内置集成 二.安装 tive-cli 命令行工具 三.生成项目 四.项目体验 引言 随着Vue3 和 Vite 版本的不断更新完善,开发体验有了质的飞跃.因此,越来越多的大厂也逐步拥抱 Vue3. 利用Vite 脚手架工具可以很轻松生成以 Vue3 为模板的项目,但是作为Vue全家桶的 vue-router.vuex.axios等成员,需要自己一个一个去配置.于是便自行开发了本文讲到的 tive-cli 脚手架模板工具,只需短短几个

  • Vite+React搭建开发构建环境实践记录

    目录 前言 使用 create-vite 脚手架生成基础模板 eslint prettier react-router antd 别名 Less 与 CSS Module 总结 前言 使用 Vite 已经有两年了,期间使用它开发过单页面应用,也开发过浏览器扩展插件,对比日常工作中用到的 webpack 构建速度大幅提升,开发体验也好很多.虽然相比于 webpack 来说简单了很多,但是仍然有一些配置需要记录一下,以便之后可以快速搭建一个本地开发构建的环境. 使用 create-vite 脚手架生

  • Android一步步带你在RecyclerView上面实现"拖放"和"滑动删除"功能

    先给大家展示下大概效果图: Android上面有许多的教程, 库和示例, 在RecyclerView上面实现"拖放"和"滑动删除"功能. 尽管有更新, 更好的方法可用, 但是大多数人依然使用旧的View.OnDragListener和Roman Nurik的SwipeToDismiss方式. 除了经常使用GestureDetector和onInterceptTouchEvent之外, 几乎很少有人使用新的API, 要不然的话, 实现就复杂. 事实上真的有十分简单的方

  • Android一步步带你在RecyclerView上面实现"拖放"和"滑动删除"功能

    先给大家展示下大概效果图: Android上面有许多的教程, 库和示例, 在RecyclerView上面实现"拖放"和"滑动删除"功能. 尽管有更新, 更好的方法可用, 但是大多数人依然使用旧的View.OnDragListener和Roman Nurik的SwipeToDismiss方式. 除了经常使用GestureDetector和onInterceptTouchEvent之外, 几乎很少有人使用新的API, 要不然的话, 实现就复杂. 事实上真的有十分简单的方

  • Vue3+TS+Vite+NaiveUI搭建一个项目骨架实现

    目录 写在前面 创建Vue3项目 开发规范 Vite配置 别名配置 环境变量 .env文件 定义环境变量 在vite.config.ts中获取环境变量 自动导入 NaiveUI的安装 写在最后 写在前面 现在已经有很多项目团队使用Vue3+TS进行开发,同时也就意味着Vue3的生态越来越完善,如果还是停留在Vue2的阶段已经out了,这篇文章将会使用Vue3+TS+NaivaUI搭建一个简单的项目骨架. 创建Vue3项目 首先我们通过Vite来创建一个Vue3+TS的一个项目,打开终端,找到我们

  • laravel5.4+vue+element简单搭建的示例代码

    如今laravel来到5.4版本,更方便引入vue了,具体步骤如下: 1.下载laravel5.4,这边是下载地址(里面的配置文件都写得差不多了)! 2.打开package.json 内容如下 { "private": true, "scripts": { "dev": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webp

  • python 简单搭建阻塞式单进程,多进程,多线程服务的实例

    我们可以通过这样子的方式去理解apache的工作原理 1 单进程TCP服务(堵塞式) 这是最原始的服务,也就是说只能处理个客户端的连接,等当前客户端关闭后,才能处理下个客户端,是属于阻塞式等待 from socket import * serSocket = socket(AF_INET, SOCK_STREAM) #重复使用绑定的信息 serSocket.setsockopt(SOL_SOCKET, SO_REUSEADDR , 1) localAddr = ('', 7788) serSoc

随机推荐