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
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
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
API: Speicherprojekt-Simulationsschnittstelle
Anweisungen: Globale Anweisungen zum Speicherprojekt
Mock:Speichern Sie die simulierten Daten mithilfe von mock.js
Seiten : Projektbezogene Seiten speichern
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.
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:
"axios": "^0.17.0", / /Anfragetool
"js-cookie": "^2.2.0",//cookie
"lodash": "^ 4.17 .4",//Funktionsbibliothek
"mockjs": "^1.0.0",//Simulationsdatentool
" vuex ": "^3.0.1",//Statusverwaltungstool
"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
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: './'
im Verzeichnis build und suchen Sie dann den folgenden Code: utils.js
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
})publicPath: '../../'
ArtikelEntwicklung eines Backend-Systems basierend auf Vue-Modularisierung – Vorbereitungsarbeiten
Entwicklung eines Backend-Systems basierend auf Vue-Modularisierung – Erstellen eines Projekts
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!
