Rumah hujung hadapan web View.js Bagaimana untuk menyelesaikan masalah tiada gesaan kod dalam Vue3

Bagaimana untuk menyelesaikan masalah tiada gesaan kod dalam Vue3

May 14, 2023 pm 07:07 PM
vue3

Pertama sekali, kami telah menyatakan dengan sangat jelas bahawa selepas memasang pemalam volar, penyiapan serpihan tag HTML tidak lagi sah, iaitu, apabila menulis teg HTML dalam templat, tiada lagi pelengkapan kod . Iaitu, masukkan "div", iaitu "div" bukannya "

". Untuk menyelesaikan masalah ini, kita perlu membuat beberapa konfigurasi kepada Vscode tanpa memadamkan pemalam volar .

Bagaimana untuk menyelesaikan masalah tiada gesaan kod dalam Vue3

Buka tetapan dan masukkan antara muka berikut:

Bagaimana untuk menyelesaikan masalah tiada gesaan kod dalam Vue3

Pilih editor teks-> ; , klik yang pertama di sebelah kanan, tambah item, masukkan item: "*.vue", masukkan nilai: "html", klik simpan dan kembali ke fail vue Jika anda memasukkan sebarang teg HTML, anda akan mendapati bahawa kod boleh dilengkapkan secara automatik, dan autistik dan.

Tetapi beberapa masalah juga timbul pada masa ini saya tidak tahu jika anda telah terdedah kepada mereka.

Pertama: Coretan kod tersuai adalah tidak sah Apabila kami biasanya mencipta komponen Vue3 baharu, kami perlu memulakan templat

  <template>
 
</template>
 
<script setup lang=&#39;ts&#39;>
import {ref,reactive} from &#39;vue&#39;
 
</script>
 
<style lang=&#39;less&#39; scoped> 
 
</style>
Salin selepas log masuk

Walaupun kod itu sangat mudah, ia diperlukan setiap kali. komponen baharu dibuat. Penulisan agak membosankan, jadi kami akan membuat beberapa coretan kod tersuai baharu dalam coretan kod pengguna, klik vue.json untuk mencipta coretan kod anda sendiri

Bagaimana untuk menyelesaikan masalah tiada gesaan kod dalam Vue3

Bagaimana saya tidak akan menerangkan butiran tentang membuat coretan kod anda sendiri di sini. Terdapat banyak tutorial yang berkaitan dan ia sangat mudah.

Selepas coretan kod dibuat, anda hanya perlu memasukkan kata kunci untuk mencipta keseluruhan coretan, yang sangat mudah.

Tetapi selepas konfigurasi di atas, coretan kod saya gagal. Penyelesaian pada masa ini ialah membuat coretan kod global baharu saya sendiri.

Bagaimana untuk menyelesaikan masalah tiada gesaan kod dalam Vue3

Klik "Fail coretan kod global baharu", kemudian masukkan nama fail, dan kemudian anda boleh memperibadikan coretan kod tersebut adalah sama seperti yang ditakrifkan dalam Coretan kod fail .json sedia ada berfungsi dengan cara yang sama.

Selepas konfigurasi selesai, buat fail .vue baharu, masukkan perkataan gesaan kod tersuai, contohnya, saya ialah vue3, tekan Enter dan coretan kod akan dijana.

Bagaimana untuk menyelesaikan masalah tiada gesaan kod dalam Vue3

Bagaimana untuk menyelesaikan masalah tiada gesaan kod dalam Vue3

Masalah kedua ialah selepas konfigurasi teratas, ikon fail .vue menjadi HTML Jangan panik jika ini berlaku ke ikon fail. Jika anda tidak keberatan, anda sebenarnya boleh membiarkannya begitu sahaja, namun, untuk membezakannya, disyorkan untuk memuat turun pemalam ikon baharu

Bagaimana untuk menyelesaikan masalah tiada gesaan kod dalam Vue3

Oleh kerana saya memasang pemalam ikon skod sebelum ini, ikon akan berubah selepas konfigurasi selesai Pada masa ini, kita boleh memasang semula satu. Contohnya, saya memasang Tema vue

Bagaimana untuk menyelesaikan masalah tiada gesaan kod dalam Vue3

Bagaimana untuk menyelesaikan masalah tiada gesaan kod dalam Vue3

Atas ialah kandungan terperinci Bagaimana untuk menyelesaikan masalah tiada gesaan kod dalam Vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

vue3+vite: Bagaimana untuk menyelesaikan ralat apabila menggunakan memerlukan untuk mengimport imej secara dinamik dalam src vue3+vite: Bagaimana untuk menyelesaikan ralat apabila menggunakan memerlukan untuk mengimport imej secara dinamik dalam src May 21, 2023 pm 03:16 PM

Penggunaan vue3+vite:src memerlukan pengimportan imej secara dinamik dan laporan ralat dan penyelesaian vue3+vite secara dinamik Jika vue3 dibangunkan menggunakan skrip taip, akan terdapat mesej ralat untuk keperluan untuk memperkenalkan imej tidak boleh digunakan :require(' .../assets/test.png') diimport kerana typescript tidak menyokong require, jadi import digunakan Berikut ialah cara menyelesaikannya: gunakan awaitimport

Cara menggunakan tinymce dalam projek vue3 Cara menggunakan tinymce dalam projek vue3 May 19, 2023 pm 08:40 PM

tinymce ialah pemalam editor teks kaya yang berfungsi sepenuhnya, tetapi memperkenalkan tinymce ke dalam vue tidak selancar seperti pemalam teks kaya Vue yang lain tidak sesuai untuk Vue dan @tinymce/tinymce-vue perlu diperkenalkan. dan Ia adalah pemalam teks kaya asing dan belum melepasi versi Cina Anda perlu memuat turun pakej terjemahan dari tapak web rasminya (anda mungkin perlu memintas tembok api). 1. Pasang kebergantungan yang berkaitan npminstalltinymce-Snpminstall@tinymce/tinymce-vue-S2 Muat turun pakej Cina 3. Perkenalkan pakej kulit dan Cina Buat folder tinymce baharu dalam folder awam projek dan muat turun

Cara Vue3 menghuraikan penurunan harga dan melaksanakan penyerlahan kod Cara Vue3 menghuraikan penurunan harga dan melaksanakan penyerlahan kod May 20, 2023 pm 04:16 PM

Vue melaksanakan bahagian hadapan blog dan perlu melaksanakan penghuraian markdown Jika terdapat kod, ia perlu melaksanakan penyerlahan kod. Terdapat banyak pustaka parsing markdown untuk Vue, seperti markdown-it, vue-markdown-loader, marked, vue-markdown, dsb. Perpustakaan ini semuanya sangat serupa. Ditanda digunakan di sini, dan highlight.js digunakan sebagai pustaka penonjolan kod. Langkah-langkah pelaksanaan khusus adalah seperti berikut: 1. Pasang perpustakaan bergantung Buka tetingkap arahan di bawah projek vue dan masukkan arahan berikut npminstallmarked-save//marked untuk menukar markdown ke htmlnpmins.

Cara memuat semula sebahagian kandungan halaman dalam Vue3 Cara memuat semula sebahagian kandungan halaman dalam Vue3 May 26, 2023 pm 05:31 PM

Untuk mencapai muat semula separa halaman, kami hanya perlu melaksanakan pemaparan semula komponen setempat (dom). Dalam Vue, cara paling mudah untuk mencapai kesan ini ialah menggunakan arahan v-if. Dalam Vue2, selain menggunakan arahan v-if untuk memaparkan semula dom setempat, kami juga boleh mencipta komponen kosong baharu Apabila kami perlu memuat semula halaman setempat, lompat ke halaman komponen kosong ini dan kemudian masuk semula pengawal beforeRouteEnter dalam komponen kosong. Seperti yang ditunjukkan dalam rajah di bawah, cara mengklik butang muat semula dalam Vue3.X untuk memuatkan semula DOM dalam kotak merah dan memaparkan status pemuatan yang sepadan. Memandangkan pengawal dalam komponen dalam sintaks persediaan skrip dalam Vue3.X hanya mempunyai o

Bagaimana untuk menyelesaikan masalah bahawa selepas projek vue3 dibungkus dan diterbitkan ke pelayan, halaman akses dipaparkan kosong Bagaimana untuk menyelesaikan masalah bahawa selepas projek vue3 dibungkus dan diterbitkan ke pelayan, halaman akses dipaparkan kosong May 17, 2023 am 08:19 AM

Selepas projek vue3 dibungkus dan diterbitkan ke pelayan, halaman akses memaparkan kosong 1. PublicPath dalam fail vue.config.js diproses seperti berikut: const{defineConfig}=require('@vue/cli-service') module.exports=defineConfig({publicPath :process.env.NODE_ENV==='pengeluaran'?'./':'/&

Cara menggunakan komponen boleh guna semula Vue3 Cara menggunakan komponen boleh guna semula Vue3 May 20, 2023 pm 07:25 PM

Prakata Sama ada ia adalah vue atau react, apabila kita menghadapi berbilang kod berulang, kita akan memikirkan cara untuk menggunakan semula kod ini, dan bukannya mengisi fail dengan sekumpulan kod berlebihan. Malah, kedua-dua vue dan react boleh mencapai penggunaan semula dengan mengekstrak komponen, tetapi jika anda menemui beberapa serpihan kod kecil dan anda tidak mahu mengekstrak fail lain, sebagai perbandingan, react boleh digunakan dalam yang sama Isytiharkan widget yang sepadan dalam fail , atau laksanakannya melalui fungsi render, seperti: constDemo:FC=({msg})=>{returndemomsgis{msg}}constApp:FC=()=>{return(

Bagaimana untuk memilih avatar dan memangkasnya dalam Vue3 Bagaimana untuk memilih avatar dan memangkasnya dalam Vue3 May 29, 2023 am 10:22 AM

Kesan terakhir ialah memasang komponen VueCropper yarnaddvue-cropper@next Nilai pemasangan di atas adalah untuk Vue3 Jika ia adalah Vue2 atau anda ingin menggunakan kaedah lain untuk merujuk, sila lawati alamat npm rasminya. Ia juga sangat mudah untuk merujuk dan menggunakannya dalam komponen Anda hanya perlu memperkenalkan komponen yang sepadan dan fail gayanya. Saya tidak merujuknya secara global di sini, tetapi hanya memperkenalkan import{userInfoByRequest}from'../js/api. ' dalam fail komponen saya import{VueCropper}dari'vue-cropper&

Cara menggunakan vue3+ts+axios+pinia untuk mencapai penyegaran yang tidak masuk akal Cara menggunakan vue3+ts+axios+pinia untuk mencapai penyegaran yang tidak masuk akal May 25, 2023 pm 03:37 PM

vue3+ts+axios+pinia menyedari penyegaran yang tidak masuk akal 1. Mula-mula muat turun aiXos dan pinianpmipinia dalam projek--savenpminstallaxios--save2. AxiosResponse}daripada"axios";importaxiosfrom'axios';import{ElMess

See all articles