Nuxt ssr

Nuxt-ssr adalah proyek SSR untuk menambah, menghapus, memodifikasi dan memeriksa artikel.

Proyek Nuxt.js adalah proyek dengan struktur SSR yang lengkap dan cocok untuk pemula untuk berlatih. Jika bermanfaat bagi Anda, silakan beri bintang di sudut kanan atas untuk dorongan dan harapan untuk koreksi. Anda juga dapat bergabung dengan grup pertukaran teknis nuxt, tempat setiap orang dapat belajar satu sama lain dan tumbuh bersama.

Teknologi yang digunakan

Vue.js v2.0.0

Nuxt.js v1.0.0

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

Express.js v4.x

MongoDB v3.4.7

elemen-ui v2.3.2

Struktur direktori

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

Panduan Pengembangan Front-end

Pertama, Anda perlu menginstal >=node8.0 karena nuxt1.0.0 harus diinstal di lingkungan >=node8.0 sebelum berhasil diinstal.

Instal elemen-ui. Ada demo yang lebih detail di halaman metode instalasi.

Instalasi dan penggunaan editor teks kaya nuxt-quill-plugin nuxt-quill-plugin.

(Penekanan ditempatkan pada fakta bahwa tidak mungkin mendeteksi antarmuka yang sama di front-end dan back-end lokal, sehingga berbeda dari port back-end di bawah) Front-end memonitor port 3389 dan menjalankan perintah "npm jalankan pengembang";

Panduan Pengembangan Backend

Unduh dan instal MongoDB. Saya tidak akan menjelaskan detailnya di sini.

Instal Express. Saya tidak akan menjelaskan detailnya di sini.

Instal supervisor untuk pemantauan real-time, yang dapat dilakukan secara global atau hanya dalam proyek ini. Metode instalasi global: sudo npm install -g supervisor.

(Penekanan ditempatkan pada fakta bahwa deteksi front-end dan back-end lokal dari antarmuka yang sama tidak dapat diterapkan, sehingga berbeda dari port front-end di atas) Back-end memonitor port 3000. Anda perlu cd ke direktori folder server dan jalankan perintah "supervisor listrouter.js";

Penerapan Alibaba Cloud

Langkah-langkah penerapan spesifik tidak dijelaskan secara rinci di sini. Silakan merujuk ke tutorial terperinci untuk detailnya.

Bangun dan jalankan

 # 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

Untuk penjelasan mendetail tentang cara kerjanya, lihat dokumen Nuxt.js.