程序员必备编程之基于vue的 Nuxt.js(一)入门详解

一.关于Nuxt.js

2016 年 10 月 25 日,zeit.co背后的团队对外发布了Next.js,一个 React 的服务端渲染应用框架。几小时后,与 Next.js 异曲同工,一个基于Vue.js的服务端渲染应用框架应运而生,我们称之为:Nuxt.js

二. 什么是Nuxt.js

Nuxt.js 是一个基于 Vue.js 的轻量级应用框架,可用来创建服务端渲染 (SSR) 应用,也可充当静态站点引擎生成。具有优雅的代码结构分层和热加载等特性。

官方学习指南:https://zh.nuxtjs.org/guide/installation

三.Nuxt的安装使用详解

  • 步骤一:创建nuxt.js项目

  • npm 提供的用于更加快捷维护项目的工具 npx

  • 确保安装了npx(npx在NPM版本5.2.0默认安装了)

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

npx create-nuxt-app <project-name>

img

  • 步骤二:确定项目名,回车默认即可

img

步骤三:项目描述,直接回车

img

  • 步骤四: 作者,回车默认

img

  • 步骤五:项目语言,确定包管理工具

img

  • 步骤六: 选择UI框架

img

  • 步骤七 选择前端服务器框架

img

  • 步骤八:选择模块(空格选择)

img

  • 步骤九:选择格式化工具(直接回车)

img

  • 步骤十:选择测试框架(直接回车)

img

  • 步骤十一:选择渲染模式(推荐SSR练习)

img

  • 步骤十二: 选择发布工具(直接回车)

img

  • 步骤十三: 安装成功

img

步骤十四:运行

成功截图:

img

运行: npm run dev

img

img

运行成功图:

img

  • 四.目录详解

  • img

请给努力中的自己点个赞哦!

*每天进步一点点`~~~~~*

原创文章 8 获赞 5 访问量 339

猜你喜欢

转载自blog.csdn.net/qq_43705131/article/details/105106021