Entwickeln Sie ein Backend-System basierend auf der Vue-Modularisierung – Build-Projekt

Dieser Artikel teilt Ihnen die modulare Entwicklung des Backend-Systems basierend auf Vue mit. Interessierte Freunde können sich diesen Artikel ansehen

Das Artikelverzeichnis lautet wie folgt:
Die modulare Entwicklung des Backends basierend auf dem Vue-System – Vorbereitungsarbeiten
Basierend auf dem modularen Entwicklungs-Backend-System von Vue – Bauprojekt

Vorwort

Nachdem Sie sich mit den oben genannten Vorbereitungstools vertraut gemacht haben Artikel, beginnen Sie jetzt mit der Erstellung Ihres eigenen Projekts. Verwenden Sie dann vue-cli, um es zu erstellen.

vue init webpack xxxx

Während des Erstellungsprozesses müssen Sie dies tun Standardisieren Sie den Code, also in eslint Bitte antworten Sie auf diese Frage Y. Nachdem alles erledigt ist, werfen wir einen Blick auf die Verzeichnisstruktur

Projektverzeichnisstruktur

Natürlich wurden einige Ergänzungen zu diesem Verzeichnis vorgenommen und Notizen gemacht gemacht（加）, keine Notizen

├── build                      // 构建相关  
├── config                     // 配置相关
├── dist                       // 打包之后相关
├── node_modules               // npm相关包
├── src                        // 代码
│   ├── api                    // 请求接口文件(加)
│   ├── assets                 // 静态资源(图片，样式等)
│   ├── components             // 全局公用组件
│   ├── directives             // 全局指令(加)
│   ├── mock                   // 项目mock 模拟数据(加)
│   ├── pages                  // 相关页面(加)
│   ├── router                 // 路由
│   ├── store                  // store管理(加)
│   ├── App.vue                // 入口页面
│   └── main.js                // 入口 加载组件 初始化等
├── static                     // 第三方不打包资源
├── .babelrc                   // babel-loader 配置
├── .eslintignore              // eslint 忽略项
├── .eslintrc.js               // eslint 配置项
├── .postcssrc.js              // postcss 配置项
├── .gitignore                 // git 忽略项
├── index.html                 // html模板
└── package.json               // package.json

Analysieren Sie diese zuerst. Wenn Sie den Ordner node_modules nicht sehen, schauen Sie erst einmal nach unten und fügen Sie den Ordner api,directives,mock,pages,store hinzu Ordner einzeln. Funktion

1. API: Speicherprojekt-Simulationsschnittstelle

2. Anweisungen: Globale Anweisungen zum Speicherprojekt

3. Mock:Speichern Sie die simulierten Daten mithilfe von mock.js

4. Seiten : Projektbezogene Seiten speichern

5. speichern: Speicherstatusverwaltung

Nachdem Sie diese gelesen haben, gibt es Folgendes Eigentlich gibt es nichts Interessantes zu sehen. Als nächstes können wir über package.json sprechen.

package.json

Dies ist die Datei, die von NPM zum Verwalten von Projektpaketen verwendet wird.
Öffnen Sie diese Datei und suchen Sie das Attribut devDependencies, in dem wir die für das Projekt benötigten Pakete hinzufügen, zum Beispiel:

1. "axios": "^0.17.0", / /Anfragetool

2. "js-cookie": "^2.2.0",//cookie

3. "lodash": "^ 4.17 .4",//Funktionsbibliothek

4. "mockjs": "^1.0.0",//Simulationsdatentool

5. " vuex ": "^3.0.1",//Statusverwaltungstool

6. "vee-validate": "^2.0.0"//Formularvalidierungstool

Wenn Ihre Datei konfiguriert wurde, geben Sie den folgenden Befehl direkt ein

npm install --save-dev

Wenn Sie so eingeben, werden Sie feststellen, dass der Download sehr, sehr langsam ist. Da das von Ihnen heruntergeladene Paket möglicherweise aus dem Ausland stammt, fügen wir 淘宝镜像 wie folgt hinzu:

npm install --save-dev --registry=http://registry.npm.taobao.org

Wenn Sie es natürlich einzeln hinzufügen, überprüfe ich normalerweise zuerst die Version des Pakets . Da es sich bei einigen Paketen manchmal um Beta-Versionen handelt, lautet der Befehl wie folgt:

npm show 包名或者插件名称 versions --json

Geben Sie dann den folgenden Befehl ein:

npm install 包名或者插件名称@版本 --save-dev --registry=http://registry.npm.taobao.org

Zu diesem Zeitpunkt müssen wir nur eine Tasse davon trinken Tee und mach es ruhig. Nur ein gutaussehender Mann oder ein hübsches Mädchen. ~~ Wenn der Download abgeschlossen ist, können Sie den Ordner node_modules

Persönliche Änderung, nur als Referenz

Führen Sie die oben genannten Schritte aus. Nach diesen Schritten müssen Sie die Konfiguration noch ändern.

Port ändern

Suchen Sie zuerst das Verzeichnis

, dann die Datei config und öffnen Sie das Konfigurationselement in index.js, da es sich um den Standardport handelt ist dev. Um Portkonflikte mit anderen Projekten zu vermeiden, suchen Sie die Option 8080 und ändern Sie sie in Ihren Lieblingsport port

Nach dem Ausführen öffnet der Browser automatisch das Projekt

Suchen Sie das Konfigurationselement

wie oben und dann dev. Der Standardwert ist autoOpenBrowser. Ändern Sie ihn jetzt in false. true

Probleme beim Laden von Ressourcen nach dem Verpacken

Aufgrund des Problems, dass Bilder und Stile nach dem Verpacken nicht angezeigt werden, weiß ich nicht, ob Sie das gleiche Problem haben, also Ich habe die folgenden Änderungen vorgenommen:

Suchen Sie die Datei config im Verzeichnis, öffnen Sie das Konfigurationselement in index.js, fügen Sie buildassetsPublicPath: './'

hinzu und suchen Sie dann die Datei

im Verzeichnis build und suchen Sie dann den folgenden Code: utils.js

return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader',
  })

Fügen Sie

publicPath: '../../'

im Konfigurationselement Zusammenfassung hinzu

Dieser Teil dient nur als Referenz. Sie können ihn vorerst ignorieren. Wenn das gleiche Problem auftritt, können Sie es sich noch einmal ansehen. Es wird den Aufbau des Projekts nicht behindern. Sobald der Build abgeschlossen ist, beginnen wir mit dem Codieren!

ArtikelEntwicklung eines Backend-Systems basierend auf Vue-Modularisierung – Vorbereitungsarbeiten
Entwicklung eines Backend-Systems basierend auf Vue-Modularisierung – Erstellen eines Projekts

Verwandte Empfehlungen :

Worauf sollten wir bei Vue2.0 Axios Cross-Domain und Rendering achten?

Wie implementiert man Trägheitsgleiten und Rückprall in der Vue-Navigationsleiste? mobile Seite

Wie man mit Refresh 404 umgeht, nachdem das Vue-Projekt gepackt wurde

Das obige ist der detaillierte Inhalt vonEntwickeln Sie ein Backend-System basierend auf der Vue-Modularisierung – Build-Projekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!