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
  • 1.部署歷史 猿友們好,作為初來實習的我,已經遭受社會的“毒打”,所以請容許我在下麵環節適當吐槽,3Q! 傳統部署 ​ 回顧以往在伺服器部署webapi項目(非獨立發佈),dotnet環境、守護進程兩個逃都逃不掉,正常情況下還得來個nginx代理。不僅僅這仨,可能牽扯到yum或npm。node等都要 ...
  • 隨著技術的進步,跨平臺開發已經成為了標配,在此大背景下,ASP.NET Core也應運而生。本文主要基於ASP.NET Core+Element+Sql Server開發一個校園圖書管理系統為例,簡述基於MVC三層架構開發的常見知識點,前一篇文章,已經簡單介紹瞭如何搭建開發框架,和登錄功能實現,本篇... ...
  • 這道題只要會自定義cmp恰當地進行排序,其他部分沒有什麼大問題。 上代碼: 1 #include<bits/stdc++.h> 2 using namespace std; 3 int n,s,h1,h2,cnt; 4 struct apple{ 5 int height,ns;//height為蘋 ...
  • 這篇文章主要描述RPC的路由策略,包括為什麼需要請求隔離,為什麼不在註冊中心中實現請求隔離以及不同粒度的路由策略。 ...
  • 簡介: 中介者模式,屬於行為型的設計模式。用一個中介對象來封裝一系列的對象交互。中介者是各對象不需要顯式地相互引用,從而使其耦合鬆散,而且可以獨立地改變他們之間的交互。 適用場景: 如果平行對象間的依賴複雜,可以使用中介者解耦。 優點: 符合迪米特法則,減少成員間的依賴。 缺點: 不適用於系統出現對 ...
  • 【前置內容】Spring 學習筆記全系列傳送門: Spring學習筆記 - 第一章 - IoC(控制反轉)、IoC容器、Bean的實例化與生命周期、DI(依賴註入) Spring學習筆記 - 第二章 - 註解開發、配置管理第三方Bean、註解管理第三方Bean、Spring 整合 MyBatis 和 ...
  • 簡介: 享元模式,屬於結構型的設計模式。運用共用技術有效地支持大量細粒度的對象。 適用場景: 具有相同抽象但是細節不同的場景中。 優點: 把公共的部分分離為抽象,細節依賴於抽象,符合依賴倒轉原則。 缺點: 增加複雜性。 代碼: //用戶類 class User { private $name; fu ...
  • 這次設計一個通用的多位元組SPI介面模塊,特點如下: 可以設置為1-128位元組的SPI通信模塊 可以修改CPOL、CPHA來進行不同的通信模式 可以設置輸出的時鐘 狀態轉移圖和思路與多位元組串口發送模塊一樣,這裡就不給出了,具體可看該隨筆。 一、模塊代碼 1、需要的模塊 通用8位SPI介面模塊 `tim ...
  • AOP-03 7.AOP-切入表達式 7.1切入表達式的具體使用 1.切入表達式的作用: 通過表達式的方式定義一個或多個具體的連接點。 2.語法細節: (1)切入表達式的語法格式: execution([許可權修飾符] [返回值類型] [簡單類名/全類名] [方法名]([參數列表]) 若目標類、介面與 ...
  • 測試一、虛繼承與繼承的區別 1.1 單個繼承,不帶虛函數 1>class B size(8): 1> + 1> 0 | + (base class A) 1> 0 | | _ia //4B 1> | + 1> 4 | _ib //4B 有兩個int類型數據成員,占8B,基類邏輯存在前面 1.2、單個 ...