快速搭建一個Vue+TS+Vite項目

1、在一個文件夾下通過cmd打開,輸入命令

npm create vite@latest

命名要為英文

2.選擇項目框架

通過上下鍵位選擇Vue框架:

選好按回車鍵

3.選擇開發語言

選擇TypeScript語言,方便后續開發:

創建好的項目目錄為:

4.安裝Vite依賴

接著在終端輸入:

npm i

5.啟動頁面

終端接著輸入:

npm run dev

訪問效果:

6.目錄結構解析

├── src
│ ? ├── assets/ ? ? ? ? ?# 靜態資源
│ ? ├── components/ ? ? ?# 組件 (.vue + .ts)
│ ? ├── App.vue ? ? ? ? ?# 根組件(含類型檢查)
│ ? ├── main.ts ? ? ? ? ?# TS 入口文件(掛載 Vue 應用)
│ ? ?└── vite-env.d.ts ? ?# Vite 類型聲明
├── index.html ? ? ? ? ? # 主頁面
├── tsconfig.json ? ? ? ?# TypeScript 配置
├── vite.config.ts ? ? ? # Vite 配置(TS 編寫)
└── package.json ? ? ? ? # 包含 "type": "module"

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/web/95587.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/95587.shtml
英文地址,請注明出處:http://en.pswp.cn/web/95587.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

深度學習:ResNet 殘差神經網絡詳解

一、ResNet 殘差神經網絡的起源與核心地位ResNet(Residual Neural Network,殘差神經網絡)是 2015 年由微軟亞洲研究院的何凱明、張祥雨等研究者提出的深度神經網絡架構。在當年的 ImageNet 大規模視覺識別挑戰賽(ILSVRC&#xff0…

Python面試題及詳細答案150道(116-125) -- 性能優化與調試篇

《前后端面試題》專欄集合了前后端各個知識模塊的面試題,包括html,javascript,css,vue,react,java,Openlayers,leaflet,cesium,mapboxGL,threejs,nodejs,mangoDB,SQL,Linux… 。 前后端面試題-專欄總目錄 文章目錄 一、本文面試題目錄 116. 如何查找Python程序的…

C++11 智能指針的使?及其原理

目錄 1. 智能指針的使?場景分析 2. RAII和智能指針的設計思路 3. C標準庫智能指針的使? 4. 智能指針的原理 5. shared_ptr和weak_ptr 5.1 shared_ptr循環引?問題 5.2 weak_ptr 6. shared_ptr的線程安全問題 7. C11和boost中智能指針的關系 8. 內存泄漏 8.1 什么是…

【Linux】Linux進程狀態和僵尸進程:一篇看懂“進程在忙啥”

前言:歡迎各位光臨本博客,這里小編帶你直接手撕Make/Makefile (自動化構建),文章并不復雜,愿諸君耐其心性,忘卻雜塵,道有所長!!!! **🔥個人主頁&a…

開源視頻剪輯工具推薦

開源視頻剪輯和處理工具近年來發展非常迅速,許多工具的功能已經足以媲美甚至超越一些商業軟件。以下是一些頂級的開源視頻編輯和處理工具,涵蓋了從簡單易用到專業級別的不同需求。 一、 主要視頻編輯軟件(非線性編輯,NLE&#xf…

第十四屆藍橋杯青少組C++國賽[2023.5.28]第二部分編程題(4、 數獨填數)

參考程序&#xff1a;#include <bits/stdc.h> using namespace std;char board[9][9];// 檢查在 (r,c) 填 num 是否有效 bool isValid(int r, int c, char num) {for (int i 0; i < 9; i) {if (board[r][i] num) return false; // 同行if (board[i][c] num) r…

C語言中奇技淫巧08-使用alloca/__builtin_alloca從棧上分配空間

alloca是什么? alloca 是一個非標準但廣泛支持的 C 語言函數&#xff0c;用于在當前函數的棧&#xff08;stack&#xff09;上動態分配內存。 與 malloc 的區別&#xff1a; malloc 在堆&#xff08;heap&#xff09; 上分配內存&#xff0c;需要手動調用 free 釋放。alloca 在…

【Markdown轉Word完整教程】從原理到實現

Markdown轉Word完整教程&#xff1a;從原理到實現 前言 在技術文檔編寫和學術論文創作中&#xff0c;Markdown因其簡潔的語法和良好的可讀性而廣受歡迎。然而&#xff0c;在實際工作中&#xff0c;我們經常需要將Markdown文檔轉換為Word格式&#xff0c;以便與同事協作、提交正…

IBM穿孔卡片:現代計算技術的奠基之作

本文由「大千AI助手」原創發布&#xff0c;專注用真話講AI&#xff0c;回歸技術本質。拒絕神話或妖魔化。搜索「大千AI助手」關注我&#xff0c;一起撕掉過度包裝&#xff0c;學習真實的AI技術&#xff01; 1 打孔卡概述 穿孔卡片&#xff08;Punch Card&#xff09;又稱打孔卡…

亞馬遜旺季來臨如何用woot沖刺

在亞馬遜旺季來臨之際&#xff0c;使用Woot沖刺需結合新品推廣、老品激活、庫存清理等不同場景&#xff0c;通過精準選品、活動設置、廣告配合及數據監控實現銷量與排名的雙重提升。以下是具體操作指南&#xff1a;一、精準選品&#xff1a;匹配提報條件新品期選品標準&#xf…

AlexNet:計算機視覺的革命性之作

AlexNet: Revolutionizing Deep Learning for Computer Vision (1)網絡提出的背景 論文題目:ImageNet Classification with Deep Convolutional Neural Networks arXiv地址:https://arxiv.org/abs/1207.0575 在2012年ImageNet大規模視覺識別挑戰賽(ILSVRC)中,AlexNet以15…

【高等數學】第十一章 曲線積分與曲面積分——第二節 對坐標的曲線積分

上一節&#xff1a;【高等數學】第十一章 曲線積分與曲面積分——第一節 對弧長的曲線積分 總目錄&#xff1a;【高等數學】 目錄 文章目錄1. 對坐標的曲線積分的概念與性質1. 對坐標的曲線積分的概念與性質 變力沿曲線所作的功 先用曲線 LLL 上的點 M1(x1,y1),M2(x2,y2),…,M…

解析SQL Server核心服務與功能

SQL Server 安裝后會在 Windows 系統中注冊多個服務&#xff0c;每種服務負責不同的功能。主要服務類型包括&#xff1a; &#x1f4cc; 核心服務 (必須或常用)SQL Server Database Engine (數據庫引擎服務) 服務名稱格式&#xff1a; MSSQL$<InstanceName> (命名實例) 或…

專項智能練習(計算機動畫基礎)

1.小明在制作Flash作品時&#xff0c;舞臺及庫中素材如第下圖所示&#xff0c;把“馬”元件插入到“馬”圖層第1幀并放在舞臺的草地位置&#xff0c;發現舞臺中并無馬圖像顯示&#xff0c;下列情形中最有可能的是&#xff08; &#xff09;。A.“馬”圖層已被鎖定 B.“馬”圖層…

第三方庫集成:結合 Express.js 構建本地服務器

引言&#xff1a;Express.js 在 Electron 第三方庫集成中的本地服務器構建價值 在 Electron 框架的第三方庫集成生態中&#xff0c;Express.js 作為 Node.js 的經典 Web 框架&#xff0c;扮演著構建本地服務器的關鍵角色。它不僅僅是一個路由和中間件工具&#xff0c;更是 Elec…

百度地圖+vue+flask+爬蟲 推薦算法旅游大數據可視化系統Echarts mysql數據庫 帶沙箱支付+圖像識別技術

F012 百度地圖vueflask爬蟲 推薦算法旅游大數據可視化系統Echarts mysql數據庫 帶沙箱支付圖像識別技術 &#x1f4da;編號&#xff1a; F012 文章結尾部分有CSDN官方提供的學長 聯系方式名片 博主開發經驗15年,全棧工程師&#xff0c;專業搞定大模型、知識圖譜、算法和可視化…

# 開發中使用——鴻蒙CoreSpeechKit讓文字發聲后續

開發中使用——鴻蒙CoreSpeechKit讓文字發聲后續 設置音量大小 volume// 設置播報相關參數this.extraParam {"queueMode": 0, "speed": AppModel.speed, "volume": AppModel.volume, "pitch": 1, "languageContext": zh-CN,…

Java全棧開發面試實錄:從基礎到微服務的深度探索

Java全棧開發面試實錄&#xff1a;從基礎到微服務的深度探索 面試官與應聘者的初次見面 面試官&#xff1a;你好&#xff0c;很高興見到你。請先做個自我介紹吧。 應聘者&#xff1a;您好&#xff0c;我叫李明&#xff0c;今年28歲&#xff0c;是南京大學計算機科學與技術專業的…

前端路由切換不再白屏:React/Vue 實戰優化全攻略(含可運行 Demo)

摘要 在單頁應用&#xff08;SPA&#xff09;開發中&#xff0c;React、Vue、Angular 這些主流框架都依賴前端路由來完成頁面切換。好處是顯而易見的&#xff1a;首屏資源一次加載&#xff0c;后續頁面切換靠前端路由完成&#xff0c;體驗比傳統的多頁應用要順暢很多。 但是在實…

C#之LINQ

文章目錄前言LINQ一、LINQ1一、LINQ2一、LINQ3Where方法&#xff1a;每一項數據都會進過predicate的測試&#xff0c;如果針對一個元素&#xff0c;predicate執行的返回值為true&#xff0c;那么這個元素就會放到返回值中。獲取一條數據&#xff08;是否帶參數的兩種寫法&#…