DAY1 起手式--建置 Nuxt.js 环境

Nuxt.js是什麽?可以吃吗?

每一个工具的诞生,都是为了"解决问题",而 Nuxt.js 是用来解决什麽问题呢?

  1. 解决 SPA ( Single Page Application ) 单页式应用 SEO 的问题
  2. 免去 Webpack 一堆设定的烦恼
  3. 免去 Vue-Router 一堆设定的烦恼

简单来说,就是一个集 Vue 2Vue-RouterVuexwebpackbabel ...於一身的超级懒人包, Vue Cli 进化版。

使用Nuxt.js之前,需要具备什麽技能呢?

  1. Vue 基础
  2. Vue-Router 基础
  3. Vuex 基础

简单来说, Nuxt.js 就是围绕着 Vue 而生的工具, Vue 为基底中的基底,而 Nuxt.js 便是 Vue 生态系中的顶端王者,让我们在使用 Vue 系列相关工具能更为便利,所以建议对於 Vue 有一定基础後,再来学习 Nuxt.js ,能有较好的学习曲线。

Nuxt.js如何开始使用呢?让我们一起玩看看

超级简单超级快速起手式

npx create-nuxt-app@2

(因为目前找到的教学都是2.15版本,所以我加上@2指定版本,实际使用请依照专案需求来决定版本哦!)

create-nuxt-app v2.15.0
✨  Generating Nuxt.js project in .
<-- 专案名称 -->
? Project name ClassSchedule
<-- 专案叙述 -->
? Project description My tremendous Nuxt.js project
<-- 作者名称 -->
? Author name RedBean
<-- 要用TypeScript还是JavaScript -->
? Choose programming language JavaScript     
<-- 套件管理工具选择 -->
? Choose the package manager Npm      
<-- 选择UI框架 -->
? Choose UI framework None
<-- 选择服务器框架 -->
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules Axios
<-- 选择程序码规范检查工具 -->
? Choose linting tools ESLint, Prettier 
<-- 选择测试工具 -->
? Choose test framework None
<-- 选择Nuxt模式SSR/SPA -->
? Choose rendering mode Universal (SSR)
? Choose development tools jsconfig.json (Recommended for VS Code)

经过了一连串的专案客制化选项後,恭喜您,完成了第一次的安装体验。

可在这时候出了三个错误提示,别紧张,只是需要更新eslint相关套件即可。

D:\github\ClassSchedule\components\Logo.vue 
  25:12  error  clear  vue/comment-directive

D:\github\ClassSchedule\layouts\default.vue 
  5:12  error  clear  vue/comment-directive 

D:\github\ClassSchedule\pages\index.vue     
  25:12  error  clear  vue/comment-directive

✖ 3 problems (3 errors, 0 warnings)

将下列三个套件更新,即可正常运作罗!

"@nuxtjs/eslint-config": "^6.0.1",
"@nuxtjs/eslint-module": "^3.0.2",
"eslint": "^7.32.0",

接着使用npm run dev 即可看到第一个用Nuxt.js创造出来的页面罗!

npm run dev

明天我们会开始介绍目录架构~
因为我也是超级入门新手,大家互相研究,如有不足之处,敬请见谅:]


<<:  我们的基因体时代-AI, Data和生物资讯 Day01- 超越摩尔定律的资料增长

>>:  数字化转型与中台建设

Day13 - 使用爬虫套件撷取网页内容

接续昨天的内容,今天要实作使用爬虫技术,根据给定的小说网址,抓取其书名和作者资讯。 这次会使用两个套...

Day 01-前言

自我介绍 这是我第一次参加铁人赛,内容可能很菜,希望大家多多包涵 动机 因为平常满常使用其他人制作的...

.NET Core第4天_middleware是舍麽?

中介软件为组成应用程序管线的软件,用以处理要求与回应, .net core中定义的中介则可以说是用来...

Day9 自订开机执行的程序码 - 函数宣告与语法糖

前面几天,我探索了 Lua 的变数型别、条件判断、回圈、标准函式库等 在这过程中,我已经多少看过函数...

Day–30 超解析Excel的vlookup函式

今日练习档 ԅ( ¯་། ¯ԅ) 虽然今天是最後一天,但我依然要在介绍两个必学的函式,分别为MID跟...