每一个工具的诞生,都是为了"解决问题",而 Nuxt.js
是用来解决什麽问题呢?
Webpack
一堆设定的烦恼Vue-Router
一堆设定的烦恼简单来说,就是一个集 Vue 2
、Vue-Router
、Vuex
、webpack
、babel
...於一身的超级懒人包, Vue Cli
进化版。
Vue
基础Vue-Router
基础Vuex
基础简单来说, Nuxt.js
就是围绕着 Vue
而生的工具, Vue
为基底中的基底,而 Nuxt.js
便是 Vue
生态系中的顶端王者,让我们在使用 Vue
系列相关工具能更为便利,所以建议对於 Vue
有一定基础後,再来学习 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- 超越摩尔定律的资料增长
接续昨天的内容,今天要实作使用爬虫技术,根据给定的小说网址,抓取其书名和作者资讯。 这次会使用两个套...
自我介绍 这是我第一次参加铁人赛,内容可能很菜,希望大家多多包涵 动机 因为平常满常使用其他人制作的...
中介软件为组成应用程序管线的软件,用以处理要求与回应, .net core中定义的中介则可以说是用来...
前面几天,我探索了 Lua 的变数型别、条件判断、回圈、标准函式库等 在这过程中,我已经多少看过函数...
今日练习档 ԅ( ¯་། ¯ԅ) 虽然今天是最後一天,但我依然要在介绍两个必学的函式,分别为MID跟...