Vue3元件庫的環境怎麼配置-Vue.js-PHP中文網

初始化ts

建構一個基於vite 的vue3 專案

安裝外掛

設定vite.config.ts

新入口html 檔案

app.vue

入口main.ts

設定腳本啟動專案

首頁

web前端

Vue.js

Vue3元件庫的環境怎麼配置

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 14, 2023 am 10:28 AM

因為我們是使用Vite Ts 開發的是Vue3 元件庫,所以我們需要安裝typescript、vue3,同時專案將採用Less 進行元件庫樣式的管理

pnpm add vue@next typescript less -D -w

登入後複製

使用pnpm如果要安裝在專案根目錄下,則需要加-w

初始化ts

在根目錄執行npx tsc --init,然後就會自動產生ts的設定檔tsconfig.json,然後我們對其做一個更換

{
  "compilerOptions": {
    "baseUrl": ".",
    "jsx": "preserve",
    "strict": true,
    "target": "ES2015",
    "module": "ESNext",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "moduleResolution": "Node",
    "lib": ["esnext", "dom"]
  }
}

登入後複製

tsconfig.json暫時先做這樣一個設定,後續可能會有一定的調整

建構一個基於vite 的vue3 專案

因為我們要開發的是一個Vue3 元件庫,肯定需要一個Vue3 專案來測試我們的元件庫,所以這裡將自己建立一個基於Vite的Vue3 項目來對組件進行調試。因此我們在根目錄新建一個叫 play 的資料夾然後初始化pnpm init,後續的元件調試就在這個專案下進行。接下來我們就開始建立一個Vue3 Vite 的專案

安裝外掛

我們需要安裝vite和vitejs/plugin-vue外掛程式,@vitejs/plugin-vue外掛程式是為了解析後綴為.vue檔案的。在play 目錄下執行

pnpm add vite @vitejs/plugin-vue -D

登入後複製

設定vite.config.ts

新建vite.config.ts設定檔

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [vue()],
});

登入後複製

新入口html 檔案

@vitejs/plugin-vue會預設載入play 下的index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>play</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="main.ts" type="module"></script>
  </body>
</html>

登入後複製

因為vite 是基於esmodule 的,所以script標籤中需要新增type="module"

app.vue

新建app.vue檔案

<template>
  <div>启动测试</div>
</template>

登入後複製

入口main.ts

新建main.ts

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

const app = createApp(App);

app.mount("#app");

登入後複製

設定腳本啟動專案

在package.json設定scripts腳本

{
  "name": "play",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "vite"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
    "vite": "^4.1.1"
  }
}

登入後複製

因為play 專案需要測試本地的元件庫,所以也需要將play 和我們的元件庫關聯在一起。修改一下pnpm-workspace.yaml檔案

packages:
  - "packages/**"
  - "play"

登入後複製

此時play 專案便可以安裝本地packages 下的套件了

最後執行pnpm run dev,便可啟動我們的play 專案

Vue3元件庫的環境怎麼配置

但是有一個問題就是ts 無法辨識*.vue檔,所以編譯器會報紅

Vue3元件庫的環境怎麼配置

此時我們需要新建一個宣告檔vue-shim.d.ts,讓ts 認識*.vue的文件

declare module &#39;*.vue&#39; {
    import type { DefineComponent } from "vue";
    const component: DefineComponent<{}, {}, any>
}

登入後複製

此時報錯便消失了。

以上是Vue3元件庫的環境怎麼配置的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

Java教學

1666

CakePHP 教程

1425

Laravel 教程

1324

PHP教程

1272

C# 教程

1251

Related knowledge

Vue3如何實作刷新頁面局部內容 May 26, 2023 pm 05:31 PM

想要實現頁面的局部刷新，我們只需要實現局部元件（dom）的重新渲染。在Vue中，想要實現這效果最簡單的方式方法就是使用v-if指令。在Vue2中我們除了使用v-if指令讓局部dom的重新渲染，也可以新建一個空白元件，需要刷新局部頁面時跳轉至這個空白元件頁面，然後在空白元件內的beforeRouteEnter守衛中又跳轉回原來的頁面。如下圖所示，如何在Vue3.X中實現點擊刷新按鈕實現紅框範圍內的dom重新加載，並展示對應的加載狀態。由於Vue3.X中scriptsetup語法中組件內守衛只有o

vue3專案中怎麼使用tinymce May 19, 2023 pm 08:40 PM

tinymce是一個功能齊全的富文本編輯器插件，但在vue中引入tinymce並不像別的Vue富文本插件一樣那麼順利，tinymce本身並不適配Vue，還需要引入@tinymce/tinymce-vue，並且它是國外的富文本插件，沒有透過中文版本，需要在其官網下載翻譯包(可能需要翻牆)。 1.安裝相關依賴npminstalltinymce-Snpminstall@tinymce/tinymce-vue-S2、下載中文包3.引入皮膚和漢化包在項目public資料夾下新建tinymce資料夾，將下載的

vue3+vite:src使用require動態匯入圖片報錯怎麼解決 May 21, 2023 pm 03:16 PM

vue3+vite:src使用require動態導入圖片報錯和解決方法vue3+vite動態的導入多張圖片vue3如果使用的是typescript開發，就會出現require引入圖片報錯，requireisnotdefined不能像使用vue2這樣imgUrl:require(' …/assets/test.png')導入，是因為typescript不支援require所以用import導入，下面介紹如何解決：使用awaitimport

Vue3怎麼解析markdown並實現程式碼高亮顯示 May 20, 2023 pm 04:16 PM

Vue實作部落格前端，需要實作markdown的解析，如果有程式碼則需要實作程式碼的高亮。 Vue的markdown解析函式庫很多，如markdown-it、vue-markdown-loader、marked、vue-markdown等。這些庫都大同小異。這裡選用的是marked，程式碼高亮的函式庫選用的是highlight.js。具體實現步驟如下：一、安裝依賴庫在vue專案下開啟命令窗口，並輸入以下命令npminstallmarked-save//marked用於將markdown轉換成htmlnpmins

Vue3中怎麼實現選取頭像並裁剪 May 29, 2023 am 10:22 AM

最終效果安裝VueCropper組件yarnaddvue-cropper@next上面的安裝值針對Vue3的，如果時Vue2或想使用其他的方式引用，請訪問它的npm官方地址:官方教程。在元件中引用使用時也很簡單，只需要引入對應的元件和它的樣式文件，我這裡沒有在全域引用，只在我的元件檔案中引入import{userInfoByRequest}from'../js/api' import{VueCropper}from'vue-cropper&

Vue3復用元件怎麼使用 May 20, 2023 pm 07:25 PM

前言無論是vue還是react，當我們遇到多處重複程式碼的時候，我們都會想著如何重複使用這些程式碼，而不是一個檔案裡充斥著一堆冗餘程式碼。實際上，vue和react都可以透過抽組件的方式來達到復用，但如果遇到一些很小的程式碼片段，你又不想抽到另外一個檔案的情況下，相比而言，react可以在相同文件裡面宣告對應的小元件，或透過renderfunction來實現，如：constDemo:FC=({msg})=>{returndemomsgis{msg}}constApp:FC=()=>{return(

怎麼使用vue3+ts+axios+pinia實現無感刷新 May 25, 2023 pm 03:37 PM

vue3+ts+axios+pinia實作無感刷新1.先在專案中下載aiXos和pinianpmipinia--savenpminstallaxios--save2.封裝axios請求-----下載js-cookienpmiJS-cookie-s//引入aixosimporttype{AxiosRequestConfigig ,AxiosResponse}from"axios";importaxiosfrom'axios';import{ElMess

vue3項目打包發佈到伺服器後訪問頁面顯示空白怎麼解決 May 17, 2023 am 08:19 AM

vue3專案打包發佈到伺服器後存取頁面顯示空白1、處理vue.config.js檔案中的publicPath處理如下：const{defineConfig}=require('@vue/cli-service')module.exports=defineConfig({publicPath :process.env.NODE_ENV==='production'?'./':'/&

See all articles

Vue3元件庫的環境怎麼配置

初始化ts

建構一個基於vite 的vue3 專案

安裝外掛

設定vite.config.ts

新入口html 檔案

app.vue

入口main.ts

設定腳本啟動專案

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題