Bagaimana untuk menyelesaikan masalah tiada gesaan kod dalam 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 .Buka tetapan dan masukkan antara muka berikut:
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='ts'> import {ref,reactive} from 'vue' </script> <style lang='less' scoped> </style>
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 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.
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.
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
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
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!

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas



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

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

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.

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

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'?'./':'/&

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(

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&

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
