مشروع 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
مونغو دي بي v3.4.7
عنصر واجهة المستخدم 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弹框配置
│ ├── ...
تحتاج أولاً إلى تثبيت >=node8.0 لأنه يجب تثبيت nuxt1.0.0 في بيئة >=node8.0 قبل أن يتم تثبيته بنجاح.
قم بتثبيت element-ui. يوجد عرض توضيحي أكثر تفصيلاً في صفحة طريقة التثبيت.
تثبيت واستخدام nuxt-quill-plugin، وهو محرر نص منسق.
(يتم التركيز على حقيقة أنه من المستحيل اكتشاف نفس الواجهة في الواجهة الأمامية والخلفية المحلية، لذلك فهي مختلفة عن منفذ الواجهة الخلفية أدناه) تراقب الواجهة الأمامية المنفذ 3389 وتنفذ الأمر "npm run dev";
قم بتنزيل MongoDB وتثبيته، ولن أخوض في التفاصيل هنا.
قم بتثبيت Express لن أخوض في التفاصيل هنا.
قم بتثبيت مشرف للمراقبة في الوقت الفعلي، وهو ما يمكن إجراؤه عالميًا أو فقط في هذا المشروع. طريقة التثبيت العالمية: sudo npm install -g المشرف.
(من المهم ملاحظة أنه نظرًا لأنه لا يمكن تنفيذ اكتشاف الواجهة الأمامية والخلفية المحلية لنفس الواجهة، فهو يختلف عن منفذ الواجهة الأمامية أعلاه) منفذ الشاشات الخلفية 3000. تحتاج إلى قرص مضغوط إلى الخادم دليل المجلد وتنفيذ الأمر "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.