vite 創建 vue3 + ts項目

初始化項目

創建一個文件夾，名稱就是你的項目名稱即可，在文件夾中使用以下命令
初始化項目

npm init vite-app

安裝依賴

npm install 
或
yarn

安裝插件

添加typescript，這里直接使用vue add typescript會報錯，需要先添加一個依賴

npm install @vue/cli-service --save-dev
或
yarn add @vue/cli-service -D

使用vue添加插件，如果沒有安裝@vue/cli的先全局安裝

npm install -g @vue/cli

然后再使用

vue add typescript

調整項目

等待插件安裝完成后，使用yarn dev或npn run dev運行后，瀏覽器里面看不到初始化頁面，現在需要在項目根目錄下修改index.html，將body標簽中的

<body>
  <div id="app"></div>
  <!-- 原項目此處引入的是js -->
  <script type="module" src="/src/main.js"></script>
</body>

修改為

<body>
  <div id="app"></div>
  <!-- 現在修改為此處引入的是ts -->
  <script type="module" src="/src/main.ts"></script>
</body>

運行項目

yarn dev
或
npm run dev

當出現一下頁面，且瀏覽器控制臺沒有啥錯誤時，表示項目就成功創建完成了！
創建成功頁面

本文鏈接：https://blog.csdn.net/Mote123/article/details/111439523

智能推薦

styled-components —— React 中的 CSS 最佳實踐

https://zhuanlan.zhihu.com/p/29344146 Styled-components 是目前 React 樣式方案中最受關注的一種，它既具備了 css-in-js 的模塊化與參數化優點，又完全使用CSS的書寫習慣，不會引起額外的學習成本。本文是 styled-components 作者之一 Max Stoiber 所寫，首先總結了前端組件化樣式中的最佳實踐原則，然后在此基...

基于TCP/IP的網絡聊天室用Java來實現

基于TCP/IP的網絡聊天室實現開發工具:eclipse 開發環境:jdk1.8 發送端接收端工具類運行截圖...

19.vue中封裝echarts組件

19.vue中封裝echarts組件 1.效果圖 2.echarts組件 3.使用組件按照組件格式整理好數據格式傳入組件 home.vue 4.接口返回數據格式...

劍指Offer39-調整數組順序使奇數位于偶數前面

一開始想著用冒泡排序的方法來做，但是bug還是很多，后來看了評論區答案，發現直接空間換時間是最簡單的，而且和快排的寫法是類似的。...

【一只蒟蒻的刷題歷程】【藍橋杯】歷屆試題九宮重排（八數碼問題：BFS+集合set）

資源限制時間限制：1.0s 內存限制：256.0MB 問題描述如下面第一個圖的九宮格中，放著 1~8 的數字卡片，還有一個格子空著。與空格子相鄰的格子中的卡片可以移動到空格中。經過若干次移動，可以形成第二個圖所示的局面。我們把第一個圖的局面記為：12345678. 把第二個圖的局面記為：123.46758 顯然是按從上到下，從左到右的順序記錄數字，空格記為句點。本題目的任務是已知九宮的初態...