为了快速入门,Nuxt.js团队创建了脚手架工具 create-nuxt-app
- // 确保安装了npx(npx在NPM版本5.2.0默认安装了)
- npx create-nuxt-app <项目名>
它会让你进行一些选择:在集成的服务器端框架如:Express、Koa、Hapi、Feathers、Micro、Adonis (WIP);选择您喜欢的UI框架:Bootstrap、Vuetify、Bulma、Buefy等等
Nuxt依据 pages 目录结构自动生成 vue-router 模块的路由配置
- // ./pages/index.vue
- <template>
- <div>
- <h1>Hello world!</h1>
- <NLink to="/about">
- About Page
- </NLink>
- </div>
- </template>
- 好处
- 它的主要范围是UI渲染,同时抽象出客户端/服务器分布
- 静态渲染、前后分离
- 自动代码分层
- 服务、模板皆可配置
- 项目结构清晰
- 组件与页面无缝切换
- 默认支持得ES6 / ES7
- 支持开发热更新
- 路由级别的异步数据获取
- 支持静态文件服务
- 样式预处:Sass,Less,Stylus等
- 缺点
- 周边资源较少
- 开发复杂的组件可能会很麻烦
- 自定义配置显得很麻烦
- 很多具有副作用的数据操作this.items[key]=value
- 高流量可能会给服务器带来压力
- 只能在某些挂钩中查询和操作DOM
Nuxt中的基本HelloWorld应用。每秒能处理190.05个请求。平均一个请求时间为52.619毫秒。在此度量标准上,Nuxt与其他两个框架相比表现最差
Lighthouse测试报告中Preformance、Accessibility、SEO三项中得分最高
- 社区活跃
- 贡献者数量:191
- Pull Requests:1,385
Nest
Nest是一个渐进式Node框架,深受Angular的启发。用于构建高效,可扩展的Node.服务器端应用程序的框架。使用TypeScript构建,保留与纯JS的兼容性,集OOP(面向对象编程),FP(函数式编程),FRP(响应式编程)一身。服务引擎盖默认使用Express但也提供与各种其他库的兼容性,例如Fastify,允许轻松使用可用的无数第三方插件
nest提供cli使用该cli命令安装Nest并创建新项目
- npm i @nestjs/cli
- nest new project-name
或者,使用Git安装TypeScript启动项目:
- git clone https://github.com/nestjs/typescript-starter.git project
- cd project
- npm install
- npm run start
使用该npm cli命令创建新项目后,src目录下会出现几个核心文件,main.ts是我们的入口
- // 创建一个服务然后监听3000端口
- import { NestFactory } from '@nestjs/core';
- import { ApplicationModule } from './app.module';
- async function bootstrap() {
- const app = await NestFactory.create(ApplicationModule);
- await app.listen(3000);
- }
- bootstrap();
- // 启动起来
- npm start
- 好处
- 作为基于TypeScript的Web框架,可以进行严格的类型定义
- 自动生成Swagger文档
- Nest中的文件夹结构主要基于Angular
- 基于模块的框架,代码可复用
- 项目结构清晰,只需要关注业务无需关注架构
- 使用最新版本的TypeScript,意味着JS的型特性基本都可用
- 为开发人员提供更少的上下文切换。从Angular代码到Nest的过渡相对容易
- 与Angular类似,Nest也有一个不错的命令行工具
- 缺点
- 缺乏文档。该框架与其他框架有很好的集成,但文档很少
- 背后没有大型企业的支持力
- 总体而言,与其他框架相比,Nest的社区规模较小
(编辑:ASP站长网)
|