vite+vue3+ts Anfänger-Tutorial
-
- 0. Stellen Sie das Projekt vor
- 1. Erstellen Sie [vue3-Projekt]
- 2. Installieren Sie less/scss
- 3. Router installieren
- 4. Axios installieren
- 5. Pinia installieren
- 6. Installieren Sie die Element-Puls-Komponentenbibliothek
- 7. Installieren Sie die Ant Design Vue-Komponentenbibliothek
- 8. Installieren Sie MD5 (je nach Projekt auswählen)
- 9. Automatischer Import
- 10. Konfigurieren Sie Umgebungsvariablen und Standardcodierungsstile und erstellen Sie Code für die Produktionsumgebung.
0. Stellen Sie das Projekt vor
Durch viteGerüste erstellt und durchgehend kopiert.
Hauptsächlich verwendete Frameworks: ((Installieren Sie weniger/scss, Router, Axios, Pinia, Elementkomponentenbibliothek, Ant Design-Komponentenbibliothek, MD5 usw.)
Wählen Sie für die Paketverwaltung pnpm, um Projekte zu verwalten (Gründe: schnell, effizient, streng usw.).
Installieren Sie pnpm
node -v //安装之前查看node版本
n stable //更新自己的node(可以选择不更新)
npm install pnpm -g //全局安装
1. Erstellen Sie [vue3-Projekt]
pnpm/Garn
pnpm create vite@latest //使用npu或cnpm等, 也是可以的, 根据需求选择
yarn create vite //或者使用yarn也是一种选择(后续统一pnpm)
Geben Sie den Projektnamen ein
Project name: » vite-project //这样输入t3
Project name: ... t3
Wählen Sie die Verwendung eines Rahmens
? Select a framework: » - Use arrow-keys. Return to submit.
Vanilla
> Vue //选择vue
React
Preact
Lit
Svelte
Others
Wählen Sie ts
? Select a variant: » - Use arrow-keys. Return to submit.
JavaScript
> TypeScript //选择ts
Customize with create-vue
Nuxt
Kopieren Sie in der Konsole Folgendes und geben Sie es ein
Done. Now run:
cd t3 //进入此文件夹
pnpm install //安装依赖安装包
pnpm run dev //启动项目
Zu diesem Zeitpunkt hat das Projekt die grundlegende Initialisierung abgeschlossen.
2. Installieren Sie less/scss
pnpm add -D sass //推荐sass(只需一个即可)
pnpm add -D less //或者选择less
Offizielle Sass-Website: https://www.sass.hk/
3. Router installieren
pnpm install vue-router@4
4. Axios installieren
pnpm install axios
5. Pinia installieren
Pinia funktioniert viel besser, wenn vue3+ts verwendet wird
pnpm install pinia //效果等于vuex
6. Installieren Sie die Element-Puls-Komponentenbibliothek
pnpm install element-plus --save
pnpm install @element-plus/icons-vue //icon图片安装
Nutzungsdetails von element-puls
7. Installieren Sie die Ant Design Vue-Komponentenbibliothek
pnpm install ant-design-vue --save
pnpm install --save @ant-design/icons-vue //icon图片安装
main.ts Einführung
//ant-design-vue
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css'; // 引入AntDesign样式文件
//element-puls
app.use(ElementPlus);
Verwenden Sie es einfach direkt
8. Installieren Sie MD5 (je nach Projekt auswählen)
pnpm install md5
pnpm install --save-dev @types/md5
9. Automatischer Import
Die Installation dieser beiden Pakete kann die Entwicklung von vue.js-Projekten effizienter und intelligenter machen.
Wird verwendet, um zwei Plug-Ins in das Vue.js-Projekt einzuführen: unplugin-vue-components und unplugin-auto-import.
unplugin-vue-components Es handelt sich um ein Vue.js-Plug-in, das die im Projekt verwendeten Komponenten bei Bedarf automatisch importieren kann, wodurch die Codegröße reduziert wird.
unplugin-auto-importEs handelt sich um ein JavaScript-Plugin, das die im Projekt verwendeten Module automatisch importieren und die Codemenge reduzieren kann.
Nutzungsdetails für den automatischen Import
pnpm install -D unplugin-vue-components unplugin-auto-import //安装
10. Konfigurieren Sie Umgebungsvariablen und Standardcodierungsstile und erstellen Sie Code für die Produktionsumgebung.
Vorteile der Konfiguration von Umgebungsvariablen:
1. Unterscheiden Sie zwischen Entwicklungsumgebung und Produktionsumgebung. (Durch die Konfiguration von Umgebungsvariablen kann das Projekt unterschiedliche Konfigurationsinformationen verwenden, wenn es in verschiedenen Umgebungen ausgeführt wird.)
2. Verstecken Sie vertrauliche Informationen. (Einige Konfigurationsinformationen, wie API-Adressen und Schlüssel, können vertrauliche Informationen enthalten und sollten nicht direkt im Code offengelegt werden.)
Codierungsstil
1. Verbessern Sie die Qualität des Codes (ein guter Codierungsstil kann das Lesen und Warten des Codes erleichtern und die Wahrscheinlichkeit von Codefehlern verringern).
2. Erleichtern Sie die Zusammenarbeit im Team. (Der Standard-Codierungsstil kann es den Teammitgliedern erleichtern, den Code des anderen zu verstehen.)
3. Einhaltung von Industriestandards. (Dadurch lässt sich Code einfacher zwischen Teams und Organisationen teilen und verwenden.)
Erstellen Sie Code für die Produktionsumgebung
1. Optimieren Sie die Codeleistung. (Bei Front-End-Anwendungen ist die Benutzererfahrung sehr wichtig)
2. Reduzieren Sie die Codegröße. (Wenn die Anwendung wächst und Funktionen hinzugefügt werden, nehmen auch die Komplexität und Größe des Codes zu.)
3. Eliminieren Sie Debugging-Informationen in der Entwicklungsumgebung. (Entwicklungsumgebungen enthalten oft viele Debugging-Informationen und Tools, die in einer Produktionsumgebung nicht benötigt werden)
4. Verwenden Sie neue JavaScript-Funktionen (neue JavaScript-Funktionen können in Produktionsumgebungen zu Kompatibilitätsproblemen führen)