Nuxt ssr

Nuxt-ssr est un projet SSR permettant d'ajouter, de supprimer, de modifier et de vérifier des articles.

Le projet Nuxt.js est un projet avec une structure SSR complète et convient aux débutants. Si cela vous est utile, veuillez donner une étoile dans le coin supérieur droit pour vous encourager et espérer des corrections. Vous pouvez également rejoindre le groupe d'échange technique nuxt, où chacun peut apprendre les uns des autres et grandir ensemble.

Technologies utilisées

Vue.js v2.0.0

Nuxt.js v1.0.0

Node.js v9.8.0 (doit>=8.0)

Express.js v4.x

MongoDB v3.4.7

élément-ui v2.3.2

Structure du répertoire

 ├── 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弹框配置
│   ├── ...

Guide de développement front-end

Vous devez d'abord installer >=node8.0 car nuxt1.0.0 doit être installé dans l'environnement >=node8.0 avant de pouvoir être installé avec succès.

Installez element-ui. Il y a une démo plus détaillée sur la page de méthode d'installation. Vous pouvez vous y référer.

Installation et utilisation de l'éditeur de texte enrichi nuxt-quill-plugin nuxt-quill-plugin.

(L'accent est mis sur le fait qu'il est impossible de détecter la même interface dans le front-end et le back-end locaux, elle est donc différente du port back-end ci-dessous) Le front-end surveille le port 3389 et exécute la commande "npm exécuter le développement" ;

Guide de développement back-end

Téléchargez et installez MongoDB. Je n'entrerai pas dans les détails ici.

Installez Express. Je n'entrerai pas dans les détails ici. Voici le lien vers Express.

Installez un superviseur pour une surveillance en temps réel, qui peut être effectuée globalement ou uniquement dans ce projet. Méthode d'installation globale : sudo npm install -g superviseur.

(L'accent est mis sur le fait que la détection locale front-end et back-end de la même interface ne peut pas être implémentée, elle est donc différente du port front-end ci-dessus) Le back-end surveille le port 3000. Vous devez cd pour le répertoire du dossier du serveur et exécutez la commande « superviseur listrouter.js » ;

Déploiement d'Alibaba Cloud

Les étapes de déploiement spécifiques ne sont pas expliquées en détail ici. Veuillez vous référer au didacticiel détaillé pour plus de détails.

Construire et exécuter

 # 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

Pour une explication détaillée du fonctionnement des choses, consultez la documentation Nuxt.js.