Nuxt ssr
1.0.0
โครงการ Nuxt.js เป็นโครงการที่มีโครงสร้าง SSR ที่สมบูรณ์ และเหมาะสำหรับมือใหม่ในการฝึกฝน หากเป็นประโยชน์สำหรับคุณ โปรดติดดาวที่มุมขวาบนเพื่อเป็นกำลังใจและหวังว่าจะได้รับการแก้ไข คุณยังสามารถเข้าร่วมกลุ่มแลกเปลี่ยนทางเทคนิคของ nuxt ซึ่งทุกคนสามารถเรียนรู้จากกันและกันและเติบโตไปด้วยกัน
Vue.js เวอร์ชัน 2.0.0
Nuxt.js เวอร์ชัน 1.0.0
Node.js v9.8.0 (ต้อง >=8.0)
Express.js เวอร์ชัน 4.x
MongoDB เวอร์ชัน 3.4.7
องค์ประกอบ UI เวอร์ชัน 2.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弹框配置
│ ├── ...
ขั้นแรก คุณต้องติดตั้ง >=node8.0 เนื่องจากต้องติดตั้ง nuxt1.0.0 ในสภาพแวดล้อม >=node8.0 ก่อนจึงจะสามารถติดตั้งได้สำเร็จ
ติดตั้ง element-ui มีการสาธิตโดยละเอียดเพิ่มเติมในหน้าวิธีการติดตั้ง คุณสามารถดูได้
การติดตั้งและการใช้งาน nuxt-quill-plugin ซึ่งเป็นโปรแกรมแก้ไขข้อความแบบ Rich Text
(เน้นไปที่ข้อเท็จจริงที่ว่าเป็นไปไม่ได้ที่จะตรวจพบอินเทอร์เฟซเดียวกันในส่วนหน้าและส่วนหลังภายในเครื่อง ดังนั้นจึงแตกต่างจากพอร์ตด้านหลังด้านล่าง) ส่วนหน้าจะตรวจสอบพอร์ต 3389 และดำเนินการคำสั่ง "npm รัน dev";
ดาวน์โหลดและติดตั้ง MongoDB ฉันจะไม่ลงรายละเอียดที่นี่ นี่คือลิงค์ไปยัง MongoDB
ติดตั้ง Express ฉันจะไม่ลงรายละเอียดที่นี่
ติดตั้ง supervisor สำหรับการตรวจสอบแบบเรียลไทม์ ซึ่งสามารถทำได้ทั่วโลกหรือเฉพาะในโปรเจ็กต์นี้ วิธีการติดตั้งทั่วโลก: sudo npm install -g supervisor
(สิ่งสำคัญที่ควรทราบคือเนื่องจากการตรวจจับส่วนหน้าและส่วนหลังภายในเครื่องของอินเทอร์เฟซเดียวกันไม่สามารถทำได้ จึงแตกต่างจากพอร์ตส่วนหน้าด้านบน) จอภาพส่วนหลังพอร์ต 3000 คุณต้องซีดีไปยังเซิร์ฟเวอร์ ไดเร็กทอรีโฟลเดอร์และรันคำสั่ง "supervisor listrouter.js";
ขั้นตอนการปรับใช้เฉพาะไม่ได้อธิบายโดยละเอียดที่นี่ โปรดดูรายละเอียดบทช่วยสอนโดยละเอียด
# 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
