vue3+vant+vue-router+axios+pinia+vite框架搭建

来源:https://www.cnblogs.com/tbfboke/archive/2022/09/28/16708100.html
-Advertisement-
Play Games

@(vue2.x引入threejs) vue2.x引入threejs npm安裝 npm install three 使用指定版本: npm install [email protected]<版本號> 其他插件 因為本次開發需要引入3D模型,所以需要使用 MTLLoader, OBJLoader兩種載入器,因為開發需求 ...


vue3的官網地址:https://cn.vuejs.org/

這裡要說一下,vue3不支持IE11,如果要相容IE11及其一下,不建議使用vue3。

創建vue腳手架,如果你需要使用ts,則需要node版本>=16。

本文按照大於16的node版本來搭建一個vue3的腳手架。

第一步:

> npm init [email protected]

  如果想創建指定版本,則使用  npm init [email protected]指定版本;“>”不要帶上;

  運行之後,會讓你填寫項目名稱和選擇你需要的插件,如下圖

  

 

  用空格鍵切換No/Yes;

  Projiect name:項目名稱;

  Package name: package.json裡面name屬性的名稱;  

  Add TypeScript:是否添加ts,本文選擇Yes;如果不需要ts,可以選擇No;

  Add JSX Support:是否支持JSX語法;

  Add Vue Router ......:是否添加vue-router;
  Add Pinia for state management;是否添加Pinia,Pinia是一個狀態管理的插件,和vuex類似,vue3推薦使用Pinia,而不再維護vuex;

  Add Vitest for Unit Testing:是否添加單元測試;

  Add Cypress for both Unit and End-to-End testing:是否添加單元測試和端對端測試;

  Add ESLint for code quality:是否添加ESLint;

  Add Prettier for code formatting:是否添加Prettier格式化代碼;

  選擇完上述步驟之後,項目就會被創建並下載下來了。

第二步:安裝並運行

  進入項目

> cd vueCli3

 

  安裝依賴

> npm install

  啟動服務

> npm run dev

 

   服務啟動之後,如果出現一個地址,說明你的服務已經開啟成功了,直接點擊地址,瀏覽器會打開腳手架的預設頁面。

第三步:安裝axios

  axios是一個基於promise的網路請求庫,和ajax類似,但是要比ajax強大,可以在node.js和瀏覽器中使用。

  退出服務,安裝axios

> npm install axios

第四步:安裝vant

  vant的官網地址:https://youzan.github.io/vant/#/zh-CN/home

  Vant 是一個移動端組件庫,目前支持ts,支持vue3;

npm i vant

  在main.ts中引入vant的樣式,註冊組件

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

import './assets/main.css'

// 1. 引入你需要的組件
import { Button } from 'vant';
// 2. 引入組件樣式
import 'vant/lib/index.css';

const app = createApp(App)

app.use(createPinia())
app.use(router)
// 3. 註冊你需要的組件
app.use(Button);

app.mount('#app')

 

在頁面上使用組件:
<van-button type="primary">主要按鈕</van-button>

 重啟服務,頁面上就會出現按鈕

 

 這樣一個框架就會被搭建完成。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 所有對象都有隱式原型; 原型也是對象,也有隱式原型. function User() {}console.log(User.prototype); function User() {}var u = new User();console.log(u.hasOwnProperty); Object.p ...
  • 在純靜態網站里,有時候會動態更新某個區域往會選擇 Pjax(swup、barba.js)去處理,他們都是使用 ajax 和 pushState 通過真正的永久鏈接,頁面標題和後退按鈕提供快速瀏覽體驗。 但是實際使用中可能會遇到不同頁面可能會需要載入不同插件處理,有些人可能會全量選擇載入,這樣會導致加 ...
  • 1 ES Module 規範 ES Module 是目前使用較多的模塊化規範,在 Vue、React 中大量使用,大家應該非常熟悉。TypeScript 中的模塊化與 ES 類似。 1.1 導出模塊 導出模塊有兩種方式:按需導出 和 預設導出。 按需導出是使用 export 關鍵字,將需要導出的成員 ...
  • HTML 中的 JavaScript 前言 在上一篇文章"什麼是JavaScript?"中我們說到js作為一門和頁面交互的語言。那如何把網頁的主導語言HTML和JavaScript關聯起來呢?在js早期,網景公司創造出了<script>元素,用來講JavaScript插入到HTML中。 <scrip ...
  • 一、開發優化一 1.使用Vant Weapp 1.1 什麼是Vant Weapp Vant Weapp官網鏈接 Vant Weapp是有贊前端團隊開源的一套小程式UI組件庫,助力開發者快速搭建小程式應用。它所使用的是MIT開源許可協議,對商業使用比較友好。 1.2 安裝Vant Weapp組件庫 安 ...
  • 什麼是JavaScript? 前言 本文內容為 博主閱讀“紅寶書”之後的總結和個人理解,有什麼錯誤歡迎指正! 一句話概括語言的誕生 1995年,網景公司一位名叫Brendan Eich的工程師,開發了一個叫Mocha的腳本語言。後來改名叫 JavaScript,以便蹭當時大火的Java的熱度。 到底 ...
  • 方法:定位,外邊距,內邊距,層級,邊框; 一個元素; 兩個元素; 三個元素. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=e ...
  • 輸出100個hello world. for (var i = 1; i <= 100; i++) { console.log("hello world");} 創建一個包含1~100的數組. var array = [];for (var i = 1; i <= 100; i++) { array ...
一周排行
    -Advertisement-
    Play Games
  • 前言 當別人做大數據用Java、Python的時候,我使用.NET做大數據、數據挖掘,這確實是值得一說的事。 寫的並不全面,但都是實際工作中的內容。 .NET在大數據項目中,可以做什麼? 寫腳本(使用控制台程式+頂級語句) 寫工具(使用Winform) 寫介面、寫服務 使用C#寫代碼的優點是什麼? ...
  • 前言 本文寫給想學C#的朋友,目的是以儘快的速度入門 C#好學嗎? 對於這個問題,我以前的回答是:好學!但仔細想想,不是這麼回事,對於新手來說,C#沒有那麼好學。 反而學Java還要容易一些,學Java Web就行了,就是SpringBoot那一套。 但是C#方向比較多,你是學控制台程式、WebAP ...
  • 某一日晚上上線,測試同學在回歸項目黃金流程時,有一個工單項目介面報JSF序列化錯誤,馬上升級對應的client包版本,編譯部署後錯誤消失。 線上問題是解決了,但是作為程式員要瞭解問題發生的原因和本質。但這都是為什麼呢? ...
  • 本文介紹基於Python語言中TensorFlow的Keras介面,實現深度神經網路回歸的方法。 1 寫在前面 前期一篇文章Python TensorFlow深度學習回歸代碼:DNNRegressor詳細介紹了基於TensorFlow tf.estimator介面的深度學習網路;而在TensorFl ...
  • 前段時間因業務需要完成了一個工作流組件的編碼工作。藉著這個機會跟大家分享一下整個創作過程,希望大家喜歡,組件暫且命名為"easyFlowable"。 接下來的文章我將從什麼是工作流、為什麼要自研這個工作流組件、架構設計三個維度跟大家來做個整體介紹。 ...
  • 1 簡介 我們之前使用了dapr的本地托管模式,但在生產中我們一般使用Kubernetes托管,本文介紹如何在GKE(GCP Kubernetes)安裝dapr。 相關文章: dapr本地托管的服務調用體驗與Java SDK的Spring Boot整合 dapr入門與本地托管模式嘗試 2 安裝GKE ...
  • 摘要:在jvm中有很多的參數可以進行設置,這樣可以讓jvm在各種環境中都能夠高效的運行。絕大部分的參數保持預設即可。 本文分享自華為雲社區《為什麼需要對jvm進行優化,jvm運行參數之標準參數》,作者:共飲一杯無。 我們為什麼要對jvm做優化? 在本地開發環境中我們很少會遇到需要對jvm進行優化的需 ...
  • 背景 我們的業務共使用11台(阿裡雲)伺服器,使用SpringcloudAlibaba構建微服務集群,共計60個微服務,全部註冊在同一個Nacos集群 流量轉發路徑: nginx->spring-gateway->業務微服務 使用的版本如下: spring-boot.version:2.2.5.RE ...
  • 基於php+webuploader的大文件分片上傳,帶進度條,支持斷點續傳(刷新、關閉頁面、重新上傳、網路中斷等情況)。文件上傳前先檢測該文件是否已上傳,如果已上傳提示“文件已存在”,如果未上傳則直接上傳。視頻上傳時會根據設定的參數(分片大小、分片數量)進行上傳,上傳過程中會在目標文件夾中生成一個臨 ...
  • 基於php大文件分片上傳至七牛雲,使用的是七牛雲js-sdk V2版本,引入js文件,配置簡單,可以暫停,暫停後支持斷點續傳(刷新、關閉頁面、重新上傳、網路中斷等情況),可以配置分片大小和分片數量,官方文檔https://developer.qiniu.com/kodo/6889/javascrip ...