Nuxt ssr
1.0.0
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弹框配置
│ ├── ...
먼저 >=node8.0을 설치해야 합니다. nuxt1.0.0을 >=node8.0 환경에 설치해야 성공적으로 설치될 수 있기 때문입니다.
element-ui를 설치하세요. 설치 방법 페이지에 자세한 데모가 있으니 참고하세요.
리치 텍스트 편집기인 nuxt-quill-plugin 설치 및 사용
(로컬 프런트엔드와 백엔드에서 동일한 인터페이스를 감지하는 것이 불가능하다는 점을 강조하므로 아래 백엔드 포트와 다름) 프런트엔드는 포트 3389를 모니터링하고 명령을 실행합니다. "npm 실행 개발";
MongoDB를 다운로드하고 설치하세요. 여기에서는 MongoDB에 대한 링크를 다루지 않겠습니다.
Express를 설치하세요. 여기에서는 Express 링크를 자세히 설명하지 않겠습니다.
실시간 모니터링을 위해 슈퍼바이저를 설치합니다. 이는 전역적으로 또는 이 프로젝트에서만 수행할 수 있습니다. 전역 설치 방법: sudo npm install -g supervisor.
(동일한 인터페이스의 로컬 프런트엔드와 백엔드 감지를 구현할 수 없기 때문에 위의 프런트엔드 포트와 다르다는 점에 유의해야 합니다.) 백엔드는 포트 3000을 모니터링합니다. 서버에 cd해야 합니다. 폴더 디렉터리로 이동하여 "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 문서를 확인하세요.
