zhanghaoran
文章 文章详情

初识nuxt.js

阅读:10 分类:nuxt.js 发布时间:2天前

众所周知,如今前端SPA模式开发有三大框架三足鼎立:Angular、React、Vue;这三个框架非常优秀、并且生态各方面都比较好,而我独宠Vue。 其中原生Vue渲染模式是CSR,这种渲染模式不利于搜索引擎的搜录;而我司项目比较依赖搜索引擎的流量、加上后端初转前端的我只会Vue,搜索了大量资料、最终觉得Nuxt.js比较适合我这种新手。其已为开发者提供了许多配置,开箱即用,不费吹灰之力达到SSR效果。

什么是CSR和SSR呢?

估计许多不太熟悉的朋友不明白CSR和SSR是什么;简单来讲:
CSR:页面内容由JS在客户端浏览器渲染。 SSR:页面内容在服务器端渲染完成后返回给客户端

一句话总结nuxt.js是什么?

Nuxt.js是基于Vue 达到服务端渲染的一个框架。

怎么学习和使用Nuxt.js

首先学习Vue基础、把Vue看/练一遍后,然后就去啃Nuxt.js文档吧, 啃不动就结合着网上的文章和视频教程来;官网文档很重要。官网文档地址:https://zh.nuxtjs.org

创建Nuxt.js项目(脚手架)

此时,你已经安装好了Node、Npm、Npx(npx在安装npm时就自动安装了)

  1. 运行Nuxt.js创建命令
npx create-nuxt-app <项目名>
  1. 稍等一会后,会有如下提示操作:
  2. 输入当前项目名,回车即默认(myapp) 当前项目名.png
  3. 输入当前项目描述,回车即默认(My W...) 当前项目描述.png
  4. 输入当前项目作者,回车即默认(144157) 项目作者.png
  5. 选择使用哪种包管理工具(我选择Npm) 包管理工具.png
  6. 选择项目所需UI框架(常用的都有,我暂不选择) UI框架.png
  7. 选择集成服务端框架 服务端框架.png
  8. 选择HTTP请求(我选择axios) http请求
  9. 选择代码检查工具(我选择ESLint)
  10. 选择测试框架(我选择None)
  11. 选择Nuxt模式(我选择SSR)
  12. 这个随便选吧(对我来说没用)

  13. 执行安装:

当看到如下图所示时,我们这个新Nuxt.js项目已经创建完成了。

运行

  • 切换到项目文件夹
cd myapp
  • 本地开发运行
npm run dev
  • 项目编译
npm run build
  • 编译后运行
npm start

文件夹目录结构说明

|-- assets                          用来存放未编译的静态资源,如:CSS,JS, 图片,字体(返回时会以base64格式返回)
|-- comments                        用来存放项目中的组件
|-- layouts                         用来存放项目中的布局组件
|-- middleware                      用来存放项目中的中间件
|-- pages                           用来存放项目中页面视图及路由
|-- plugins                         用来存放项目中插件
|-- static                          用来存放项目中的静态资源
|-- Store                           用来存放项目中的Vuex状态树文件
|-- nuxt.config.js                  本Nuxt.js 项目的个性化配置
|-- package.json                    用于记录安装的依赖包和对外暴露的脚本接口

初始Nuxt.js先更到这里,下期更新常见配置。 如有疑问请留言;或联系邮箱:manbanzhen@qq.com 欢迎访问:http://www.manbanzhen.tophttp://www.ofus.ink 转载请注明出处。