Nuxt ssr

Nuxt-ssr は記事の追加・削除・修正・確認を行うための SSR プロジェクトです。

Nuxt.js プロジェクトは完全な SSR 構造を備えたプロジェクトであり、初心者が練習するのに適しています。役に立った場合は、右上隅に星を付けて励ましと修正を希望してください。 nuxt 技術交流グループに参加することもできます。そこでは、誰もがお互いから学び、一緒に成長することができます。

使用されている技術

Vue.js v2.0.0

Nuxt.js v1.0.0

Node.js v9.8.0 (8.0 以上でなければなりません)

Express.js v4.x

モンゴDB v3.4.7

要素 ui v2.3.2

ディレクトリ構造

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

フロントエンド開発ガイド

正常にインストールするには、nuxt1.0.0 を >=node8.0 環境にインストールする必要があるため、まず >=node8.0 をインストールする必要があります。

element-ui をインストールします。インストール方法のページに詳細なデモがありますので、参照してください。

リッチテキストエディタnuxt-quill-plugin nuxt-quill-pluginのインストールと使用。

(ローカルのフロントエンドとバックエンドでは同じインターフェースを検出できないことを強調しているため、以下のバックエンドポートとは異なります) フロントエンドはポート3389を監視し、コマンドを実行します。 "npm 実行開発";

バックエンド開発ガイド

MongoDB をダウンロードしてインストールします。ここでは詳しく説明しません。MongoDB へのリンクは次のとおりです。

Express をインストールします。ここでは詳細は説明しません。Express へのリンクは次のとおりです。

リアルタイム監視のためにスーパーバイザをインストールします。これはグローバルに実行することも、このプロジェクト内でのみ実行することもできます。グローバル インストール方法: sudo npm install -gvisor。

(同じインターフェイスのローカル フロントエンドとバックエンドの検出は実装できないという事実に重点が置かれているため、上記のフロントエンド ポートとは異なります) バックエンドはポート 3000 を監視します。サーバーフォルダーディレクトリに移動し、コマンド「supervisor listrouter.js」を実行します。

Alibaba Cloud の導入

特定の展開手順については、ここでは詳しく説明しません。詳細については、詳細なチュートリアルを参照してください。

構築して実行する

 # 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

動作の詳細については、Nuxt.js ドキュメントを参照してください。