SSR门户项目爬坑之路（一）

说到门户项目一般都会考虑到服务端渲染，即SSR，以及前台和后台管理之类的事情，下面就是我们门户项目的开发过程：门户前台项目：

项目架构搭建：这里我们使用vue的nuxt来创建项目

确保安装了npx（npx在NPM版本5.2.0默认安装了）：

$ npx create-nuxt-app <项目名>

它会让你进行一些选择:

当运行完时，它将安装所有依赖项，因此下一步是启动项目:

$ cd <project-name>
$ npm run dev

应用现在运行在 http://localhost:3000 上运行。

项目目录结构：

资源目录 assets 用于组织未编译的静态资源如 LESS、SASS 或 JavaScript。

组件目录 components 用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js 组件，即这些组件不会像页面组件那样有 asyncData 方法的特性。

在集成的服务器端框架之间进行选择:
- None (Nuxt默认服务器)
- Express
- Koa
- Hapi
- Feathers
- Micro
- Fastify
- Adonis (WIP)
选择您喜欢的UI框架:
- None (无)
- Bootstrap
- Vuetify
- Bulma
- Tailwind
- Element UI
- Ant Design Vue
- Buefy
- iView
- Tachyons
选择您喜欢的测试框架:
- None (随意添加一个)
- Jest
- AVA
选择你想要的Nuxt模式 (Universal or SPA)
添加 axios module 以轻松地将HTTP请求发送到您的应用程序中。
添加 EsLint 以在保存时代码规范和错误检查您的代码。
添加 Prettier 以在保存时格式化/美化您的代码。

布局目录 layouts 用于组织应用的布局组件。

中间件 middleware 目录用于存放应用的中间件。

页面目录 pages 用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。

插件目录 plugins 用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。

静态文件目录 static 用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。

状态树 store 目录用于组织应用的 Vuex 状态树文件。 Nuxt.js 框架集成了 Vuex 状态树的相关功能配置，在 store 目录下创建一个 index.js 文件可激活这些配置。

nuxt.config.js 文件用于组织Nuxt.js 应用的个性化配置，以便覆盖默认配置。

package.json 文件用于描述应用的依赖关系和对外暴露的脚本接口。

SSR门户项目爬坑之路（一）相关推荐

SSR门户项目爬坑之路（三）
ssr之nuxt项目打包部署相关说明一.环境安装 1.安装node wget https://nodejs.org/dist/v8.9.1/node-v8.9.1-linux-x64.tar.gz ...
Vue 爬坑之路（一）—— 使用 vue-cli 搭建项目
Vue 爬坑之路(一)-- 使用 vue-cli 搭建项目 vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https: ...
Vue 爬坑之路（六）—— 使用 Vuex + axios 发送请求
Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios ...
React爬坑之路三：Dva
前两篇写了react各种基本操作和主要概念但其实没必要那么复杂直接用框架就好啦这年头前端框架真是一睁眼就多出好几个傻瓜级教程写的不合理的地方请批评指正 React官网:https://react ...
低配服务器的个人建站爬坑之路
@低配服务器的个人建站爬坑之路低配服务器的个人建站爬坑之路本文纯手打,转载请说明来源:https://blog.csdn.net/sqm1995/article/details/89374500 ...
vuex modules ajax,VUE项目爬坑---6、vuex的真正存在的意义是什么
VUE项目爬坑---6.vuex的真正存在的意义是什么一.总结一句话总结: a.[避免低效的数据传递]:当多个组件嵌套的时候,只能父子传递,那么中间的组件只能做传递数据之用,数据不是它用,它却传递 ...
Django实现一个简单的中间件，不熟悉中间件的爬坑之路
1.在之前,写过一篇文章,自定义一个简单的中间件,文章链接如下:https://blog.csdn.net/u012561176/article/details/84024073 后面,发现还是有问题 ...
React爬坑之路二：Router+Redux
上一篇写了Antd和Axios的基本操作之前大标题到五了那么这篇从六开始 ST也是初学小白可能讲的完全不对大家当做小说随便读读消遣一下就好 React官网:https://reactjs.org/ ...
【饿了么】—— Vue2.0高仿饿了么核心模块移动端Web App项目爬坑（一）
[饿了么]-- Vue2.0高仿饿了么核心模块&移动端Web App项目爬坑(一) 前言:学习Vue.js高仿饿了么课程过程中,总结了这个Web App项目从准备到开发完毕自己觉得很重要的知识 ...

SSR门户项目爬坑之路（一）

SSR门户项目爬坑之路（一）相关推荐

最新文章

热门文章