Nuxt ssr

Nuxt-ssr ist ein SSR-Projekt zum Hinzufügen, Löschen, Ändern und Überprüfen von Artikeln.

Das Nuxt.js-Projekt ist ein Projekt mit einer vollständigen SSR-Struktur und eignet sich zum Üben für Neulinge. Wenn es für Sie hilfreich ist, geben Sie bitte einen Stern in der oberen rechten Ecke ein, um Ermutigung und Hoffnung auf Korrekturen zu erhalten. Sie können auch der technischen Austauschgruppe von nuxt beitreten, in der alle voneinander lernen und gemeinsam wachsen können.

Verwendete Technologien

Vue.js v2.0.0

Nuxt.js v1.0.0

Node.js v9.8.0 (muss >=8.0 sein)

Express.js v4.x

MongoDB v3.4.7

element-ui v2.3.2

Verzeichnisstruktur

 ├── assets                              资源目录 assets 用于组织未编译的静态资源如 LESS、SASS 或 JavaScript
├── build                               打包后的文件
├── components                          存放组件，用于组织应用的 Vue.js 组件
│   ├── Footer                          页面footer组件
│   ├── ....
├── layouts                             布局模板文件，默认default，通过为页面设置layout更改
│   ├── edit                            编辑/创建文章模板
│   ├── ....
├── middleware                          存放应用的中间件
│   ├── auth.js                         路由是否登录拦截
│   ├── ...
├── node_modules                        Node依赖文件
├── nuxt.config.js                      Nuxt主配置文件
├── pages                               存放页面的目录
│   ├── index.vue                       首页
│   ├── ....
├── plugins                             存放插件，用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件
│   └── nuxt-quill-plugin.js            富文本编辑器插件
├── README.md                           README
├── server                              express后台目录
│   ├── api.js                          server端接口
│   ├── db.js                           连接MongoDB数据库文件
│   ├── listrouter.js                   server启动配置
│   ├── ....
├── static                              静态文件目录,此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。 服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下
├── util                                存放一些工具文件（自己添加）
│   ├── net.js                          封装网络请求
│   ├── ui.js                           封装ui弹框配置
│   ├── ...

Leitfaden zur Frontend-Entwicklung

Zuerst müssen Sie >=node8.0 installieren, da nuxt1.0.0 in der >=node8.0-Umgebung installiert werden muss, bevor es erfolgreich installiert werden kann.

Installieren Sie element-ui. Eine ausführlichere Demo finden Sie auf der Seite zur Installationsmethode.

Installation und Verwendung von Nuxt-Quill-Plugin, einem Rich-Text-Editor.

(Der Schwerpunkt liegt auf der Tatsache, dass es unmöglich ist, dieselbe Schnittstelle im lokalen Front-End und Back-End zu erkennen, sodass sie sich vom unten stehenden Back-End-Port unterscheidet.) Das Front-End überwacht Port 3389 und führt den Befehl aus „npm run dev“;

Leitfaden zur Backend-Entwicklung

Laden Sie MongoDB herunter und installieren Sie es. Ich werde hier nicht auf Details eingehen.

Installieren Sie Express. Ich werde hier nicht auf Details eingehen.

Installieren Sie Supervisor für die Echtzeitüberwachung, die global oder nur in diesem Projekt erfolgen kann. Globale Installationsmethode: sudo npm install -g supervisor.

(Da die lokale Front-End- und Back-End-Erkennung derselben Schnittstelle nicht implementiert werden kann, ist es wichtig zu beachten, dass sie sich vom oben genannten Front-End-Port unterscheidet.) Das Back-End überwacht Port 3000. Sie müssen eine CD zum Server erstellen Ordnerverzeichnis und führen Sie den Befehl „supervisor listrouter.js“ aus;

Alibaba Cloud-Bereitstellung

Die spezifischen Bereitstellungsschritte werden hier nicht im Detail erläutert. Weitere Informationen finden Sie im ausführlichen Tutorial.

Erstellen und ausführen

 # install dependencies
$ npm install # Or yarn install

# serve with hot reload at localhost:3000
$ npm run dev

# build for production and launch server
$ npm run build
$ npm start

# generate static project
$ npm run generate

Ausführliche Erklärungen zur Funktionsweise finden Sie in den Nuxt.js-Dokumenten.