1. Projekterstellung
(1) Initialisieren Sie das Projekt
npm init vite@latest
(2) Folgen Sie den Eingabeaufforderungen
, um den Projektnamen einzugeben: Projektname —— admin-v3-ts Framework
auswählen : Framework auswählen —— vue Sprache auswählen: Variante auswählen ——TypeScript
(3) Starten Sie das Projekt
npm installieren
npm laufen dev
2. Grundlegende Projektkonfiguration
1. Verwenden Sie ui framework-ElementPlus
(1) ElementPlus installieren
npm install element-plus --save
(2) Verwenden Sie den On-Demand-Import (automatischer Import), um die beiden Plug-ins unplugin-vue-components und unplugin-auto-import zu installieren
npm install -D deplugin-vue-components unplugin-auto-import
(3) Konfigurieren Sie in der Datei vite.config.js
importiere {defineConfig} aus 'vite'
importiere AutoImport aus 'unplugin-auto-import/vite'
Komponenten aus 'unplugin-vue-components/vite' importieren
importiere { ElementPlusResolver } aus 'unplugin-vue-components/resolvers'
export default defineConfig({
// ...
Plugins: [
// ...
AutoImport({
Resolver: [ElementPlusResolver()],
}),
Komponenten({
Resolver: [ElementPlusResolver()],
}),
],
})
2. Benutze Sass
(1) Sass installieren: npm i sass -D
(2) Erstellen Sie unter der Datei src/assets/styles eine Datei common.scss und importieren Sie sie global in main.ts
3. Routing-Konfiguration
(1) vue-router installieren: npm vue-router installieren
(2) Erstellen Sie einen Router-Ordner, erstellen Sie eine index.ts-Datei unter diesem Ordner und erstellen Sie die erforderliche Seite home/home.vue Main.vue unter dem Views-Ordner
importiere {createRouter,createWebHistory} aus „vue-router“
const routen = [
{
Weg:'/',
Komponente: ()=> import('../views/Main.vue'),
Kinder:[
{
Weg:'/',
name:'home',
Komponente:() => import('../views/home/index.vue')
}
]
}
]
const router = createRouter({
history:createWebHistory(),
Strecken
})
Standardrouter exportieren
(3) Eingeführt in der Datei main.ts
import router von './router'
app.use(router)
(4) Export in App.vue
<router-ansicht></router-ansicht>
4. Verwenden Sie Pinia für die Zustandsverwaltung
(1) Pinia installieren: npm installiere Pinia
(2) Die globale Einführung von Pinia, die Instanz wird in main.ts eingeführt und auf der Vue-Root-Instanz gemountet
importiere {createPinia} aus "pinia";
const store = createPinia ();
app.use(speichern);
(3) Erstellen Sie einen Speicherordner und erstellen Sie eine index.ts-Datei unter diesem Ordner
importiere {defineStore} aus "pinia";
export const homeStore= defineStore('homeStore',{
Zustand:()=>{
zurückkehren {
zählen: 0
}
},
Aktionen:{
}
})