vue3+vue-cli4でsvgを使用する方法
May 11, 2023 pm 05:58 PM
1. svg-sprite-loader をインストールします
npm install svg-sprite-loader --save-dev
2. src/components/svgIcon に新しいコンポーネントindex.vueを作成します
<template>
<svg :class="svgClass" aria-hidden="true">
<use :xlink:href="iconName" rel="external nofollow" ></use>
</svg>
</template>
<script>
import { computed } from "@vue/reactivity";
export default {
name: "baseSvgIcon",
props: {
iconClass: { type: String },
className: { type: String },
},
setup(props) {
const iconName = computed(() => {
return props.iconClass ? `#icon-${props.iconClass}` : "#icon";
});
const svgClass = computed(() => {
return props.className ? "svg-icon " + props.className : "svg-icon";
});
return { iconName, svgClass };
},
};
</script>
<style scoped lang="scss">
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>3. アセットにアイコンフォルダーを作成します
imgs フォルダーには、svg 形式のファイルが含まれる svg フォルダーと、index.js ファイルが含まれており、ファイルの內(nèi)容は次のとおりです
// 獲取當(dāng)前目錄所有為.svg的文件
const req = require.context('./svg', false, /\.svg$/)
// 解析獲取的.svg文件的文件名稱并返回
const requireAll = (requireContext) =>{
return requireContext.keys().map(requireContext)
}
requireAll(req)4. 同じ配下に vue.config.js を作成しますsrc 構(gòu)成としてのレベル
コメント領(lǐng)域にまとめられているように、vue-cli4 以外のプロジェクトにあり、エラーが config.module.rules.delete("svg"); で報(bào)告される場(chǎng)合。 、config.module.rule("svg").exclude.add(resolve("src/assets/imgs")).end();このステートメントを置き換えてみてください
const path = require('path')
function resolve(dir) {
return path.join(__dirname, '.', dir)
}
module.exports = {
chainWebpack: config => {
config.module.rules.delete("svg"); // 重點(diǎn)：刪除默認(rèn)配置中處理svg,
config.module
.rule('svg-sprite-loader')
.test(/\.svg$/)
.include
.add(resolve('src/assets/imgs')) // 處理svg目錄
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
},
};5. main.js に導(dǎo)入し、いくつかの小さな変更を加えます
ここで、コンポーネントの登録は main.js に配置されることに注意してください。それ以外の場(chǎng)合は、「[Vue warn]: Failed tosolveComponent: svg-icon」が報(bào)告され、親コンポーネントは先に作成されているが、子コンポーネントがまだ作成されていないことが予測(cè)され、本問(wèn)題が発生します。 #
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import '@/assets/icons'
const app = createApp(App)
import SvgIcon from '@/components/svgIcon'
app.component('svg-icon', SvgIcon)
app.use(store).use(router).mount('#app') 6. ページ上で <div class="topLeft">
<svg-icon icon-class="category"></svg-icon>
</div>
<div class="topCenter"></div>
<div class="topRight">
<svg-icon icon-class="search"></svg-icon>
</div>
を使用します。 7. ファイルのディレクトリ構(gòu)造とその効果の表示
以上がvue3+vue-cli4でsvgを使用する方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。
ホットAIツール
Undress AI Tool
脫衣畫(huà)像を無(wú)料で
Undresser.AI Undress
リアルなヌード寫(xiě)真を作成する AI 搭載アプリ
AI Clothes Remover
寫(xiě)真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無(wú)料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡(jiǎn)単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無(wú)料のコードエディター
SublimeText3 中國(guó)語(yǔ)版
中國(guó)語(yǔ)版、とても使いやすい
ゼンドスタジオ 13.0.1
強(qiáng)力な PHP 統(tǒng)合開(kāi)発環(huán)境
ドリームウィーバー CS6
ビジュアル Web 開(kāi)発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
Vue3 でページの部分的なコンテンツを更新する方法
May 26, 2023 pm 05:31 PM
ページの部分的な更新を?qū)g現(xiàn)するには、ローカル コンポーネント (dom) の再レンダリングを?qū)g裝するだけで済みます。 Vue でこの効果を?qū)g現(xiàn)する最も簡(jiǎn)単な方法は、v-if ディレクティブを使用することです。 Vue2 では、v-if 命令を使用してローカル dom を再レンダリングすることに加えて、新しい空のコンポーネントを作成することもできます。ローカル ページを更新する必要がある場(chǎng)合は、この空のコンポーネント ページにジャンプしてから、再びジャンプします。 beforeRouteEnter ガードを空白のコンポーネントに配置します。元のページ。以下の図に示すように、Vue3.X の更新ボタンをクリックして赤枠內(nèi)の DOM を再読み込みし、対応する読み込みステータスを表示する方法を示します。 Vue3.X の scriptsetup 構(gòu)文のコンポーネントのガードには o しかないので、
Vue3 がマークダウンを解析し、コードのハイライトを?qū)g裝する方法
May 20, 2023 pm 04:16 PM
Vue はブログ フロントエンドを?qū)g裝しており、マークダウン解析を?qū)g裝する必要があり、コードがある場(chǎng)合はコードのハイライトを?qū)g裝する必要があります。 Vue には、markdown-it、vue-markdown-loader、marked、vue-markdown など、マークダウン解析ライブラリが多數(shù)あります。これらのライブラリはすべて非常に似ています。ここではMarkedが使用され、コード強(qiáng)調(diào)表示ライブラリとしてhighlight.jsが使用されます。 1. 依存ライブラリをインストールする vue プロジェクトの下でコマンド ウィンドウを開(kāi)き、次のコマンド npminstallmarked-save//marked を入力して、マークダウンを htmlnpmins に変換します。
vue3+vite: src に畫(huà)像を動(dòng)的にインポートするために require を使用するときのエラーを解決する方法
May 21, 2023 pm 03:16 PM
vue3+vite:src は、イメージとエラー レポートと解決策を動(dòng)的にインポートするために require を使用します。vue3+vite は複數(shù)のイメージを動(dòng)的にインポートします。vue3。TypeScript 開(kāi)発を使用している場(chǎng)合、イメージを?qū)毪工毪郡幛?require のエラー メッセージが表示されます。requireisnotdefined は使用できません。 vue2 のような imgUrl:require(' .../assets/test.png') は、typescript が require をサポートしていないため、インポートされます。そのため、import が使用されます。解決方法は次のとおりです: awaitimport を使用します
vue3 プロジェクトで tinymce を使用する方法
May 19, 2023 pm 08:40 PM
tinymce はフル機(jī)能のリッチ テキスト エディター プラグインですが、tinymce を vue に導(dǎo)入するのは他の Vue リッチ テキスト プラグインほどスムーズではありません。tinymce 自體は Vue には適しておらず、@tinymce/tinymce-vue を?qū)毪工氡匾ⅳ辘蓼?。外?guó)のリッチテキストプラグインであり、中國(guó)語(yǔ)版を通過(guò)していないため、公式 Web サイトから翻訳パッケージをダウンロードする必要があります (ファイアウォールをバイパスする必要がある場(chǎng)合があります)。 1. 関連する依存関係をインストールします npminstalltinymce-Snpminstall@tinymce/tinymce-vue-S2. 中國(guó)語(yǔ)パッケージをダウンロードします 3. スキンと中國(guó)語(yǔ)パッケージを?qū)毪筏蓼? プロジェクトのパブリック フォルダーに新しい tinymce フォルダーを作成し、
Vue3 でアバターを選択してトリミングする方法
May 29, 2023 am 10:22 AM
最終的な効果は、VueCropper コンポーネントのyarnaddvue-cropper@next をインストールすることです。上記のインストール値は Vue3 用です。Vue2 の場(chǎng)合、または他の方法を參照したい場(chǎng)合は、公式 npm アドレス: 公式チュートリアルにアクセスしてください。また、コンポーネント內(nèi)で參照して使用するのも非常に簡(jiǎn)単です。必要なのは、対応するコンポーネントとそのスタイル ファイルを?qū)毪工毪长趣坤堡扦?。ここではグローバルに參照しませんが、import{userInfoByRequest}from'../js/api を?qū)毪工毪坤堡扦埂?' コンポーネント ファイルにインポートします。import{VueCropper}from'vue-cropper&
vue3+ts+axios+pinia を使用して無(wú)意味なリフレッシュを?qū)g現(xiàn)する方法
May 25, 2023 pm 03:37 PM
vue3+ts+axios+pinia で無(wú)意味なリフレッシュを?qū)g現(xiàn) 1. まず、プロジェクト內(nèi)の aiXos と pinianpmipinia をダウンロードします--savenpminstallaxios--save2. axios リクエストをカプセル化-----ダウンロード js-cookienpmiJS-cookie-s// aixosimporttype{AxiosRequestConfig , AxiosResponse}from"axios";importaxiosfrom'axios';import{ElMess
Vue3 の再利用可能なコンポーネントの使用方法
May 20, 2023 pm 07:25 PM
はじめに vue であれ、react であれ、複數(shù)の繰り返しコードに遭遇した場(chǎng)合、ファイルを冗長(zhǎng)なコードの束で埋めるのではなく、これらのコードを再利用する方法を考えます。実際、vue と React はどちらもコンポーネントを抽出することで再利用を?qū)g現(xiàn)できますが、小さなコードの斷片に遭遇し、別のファイルを抽出したくない場(chǎng)合は、それに比べて、React は同じファイル內(nèi)で対応するウィジェットを宣言して使用できます。または、次のような renderfunction を通じて実裝します。 constDemo:FC=({msg})=>{returndemomsgis{msg}}constApp:FC=()=>{return(
vue3 で vueup/vue-quill リッチテキストを使用し、入力文字?jǐn)?shù)を制限する方法
May 20, 2023 pm 04:16 PM
1. エフェクト表示 2. npmnpminstall@vueup/vue-quill@alpha--save 3. Main.js で import{QuillEditor}from'@vueup/vue-quill'import'@vueup/vue-quill/dist/vue- を?qū)雚uill.snow.css';app.component('QuillEditor',QuillEditor) 4. ページの使用法{{TiLe
