nuxt模板的创建及使用(koa、sass)
概念
Nuxt.js 是一个基于 Vue.js 的服务端渲染应用框架。
Nuxt.js 为 客户端/服务端 这种典型的应用架构模式提供了许多有用的特性,例如异步数据加载、中间件支持、布局支持等。
特性
- 基于 Vue.js
- 自动代码分层
- 服务端渲染
- 强大的路由功能,支持异步数据
- ES2015+ 语法支持
- 打包和压缩 JS 和 CSS
- HTML 头部标签管理
- 本地开发支持热加载
- 集成 ESLint
- 支持各种样式预处理器: SASS、LESS、 Stylus 等等
- 支持 HTTP/2 推送
流程图
模板安装
首先我们安装好npx(现在的node一般默认带有),如果已经有可以跳过此步。
npm i -g npx
然后我们使用nuxt给的模板安装指令:
npx create-nuxt-app <my-project>
也可以直接用npm或者yarn直接安装,指令如下:
npm init nuxt-app <my-project>
yarn create nuxt-app <my-project>
由于nuxt的模板安装已经到了3.X版本,而该版本的server framework被否决了,所以如果想带有server framework选项的模板的话可以安装2.15.0的版本指令如下:
npx create-nuxt-app@2.15.0 <my-project>
不过两个版本插件之间的版本是有一定程度的差异的,如果你想使用更新的版本建议还是用回3.X版本,自己额外安装server framework,该本章只作2.15.0的安装使用。
关于安装的各种选项建议大家去理解是什么意思,毕竟一个好的开发人员要慢慢尝试去阅读理解英语。像下面的英语其实都很简单,如果不懂的可以去翻译网站翻译一下就理解了。
服务框架
我只截取了选项中的3个框架做了一下对比,相对来说koa更加的轻量,而express更多人使用
选项差异
3.x
2.15.0
package.json的差异
3.x
2.15.0
目录讲解
这里说一下2.15.0的目录结构:
- 资源目录
assets
用于组织未编译的静态资源如LESS
、SASS
或JavaScript
。(关于 assets 目录的更多信息) - 组件目录
components
用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js 组件,即这些组件不会像页面组件那样有asyncData
方法的特性。 - 布局目录
layouts
用于组织应用的布局组件。若无额外配置,该目录不能被重命名。(关于布局的更多信息) -
middleware
目录用于存放应用的中间件。(关于中间件的更多信息) - 页面目录
pages
用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的.vue
文件并自动生成对应的路由配置。若无额外配置,该目录不能被重命名。(关于页面的更多信息) - 插件目录
plugins
用于组织那些需要在根vue.js应用
实例化之前需要运行的 Javascript 插件。(关于插件的更多信息) - 当你配置了服务框架选项就会有
server
目录,连接服务器及存储api文件。 - 静态文件目录
static
用于存放应用的静态文件,此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。 服务器启动的时候,该目录下的文件会映射至应用的根路径/
下。若无额外配置,该目录不能被重命名。(关于静态文件的更多信息) -
store
目录用于组织应用的 Vuex 状态树 文件。 Nuxt.js 框架集成了 Vuex 状态树 的相关功能配置,在 store 目录下创建一个index.js
文件可激活这些配置。若无额外配置,该目录不能被重命名。(关于 store 的更多信息) -
nuxt.config.js
文件用于组织Nuxt.js 应用的个性化配置,以便覆盖默认配置。若无额外配置,该文件不能被重命名。(关于 nuxt.config.js 的更多信息)
Babel
如果我们想要在serve下的js文件中使用import、export等其它语法糖,我们需要安装配置babel 首先安装babel-preset-env
插件
npm i babel-preset-env
在server目录下创建.balcelrc文件填入以下内容:
// 将来babel-loader运行的时候,会检查这个配置文件,并读取相关的语法和插件配置
{
"presets": ["env"]
}
最后我们需要在package.json的scripts指令的dev及start的末尾加上--exec babel-node
这样就可以使用import等其他的语法糖了
sass
安装指令
npm i sass-loader node sass
当你安装依赖完成后要留意它是否出现warn 或者error,并尝试去解决它,这也是作为一个开发者必备技能。
像当我安装完上面的组件出现了下面的警报
根据它的提示,我们只需要对应安装好缺失的依赖即可。
npm install sass@^1.3.0 --save-dev
npm install fibers@3.1.0 --save-dev
而如果你用的是windows系统报下面的警报则不需要管它,这是因为该依赖只是在mac系统上使用的,而模板的打包里面,也包括了该依赖,在windows上是不需要的,所以你也不用去管它。
安装好后便可以开始你的开发之路了。
资源汇总
关于 assets 目录的更多信息
关于布局的更多信息
关于中间件的更多信息
关于页面的更多信息
关于插件的更多信息
关于静态文件的更多信息
关于 store 的更多信息
关于 nuxt.config.js 的更多信息
关于更多 babel的用法
create-nuxt-app模板Github
nuxt中文官网
基于koa的mongoose(mongodb、robo 3T、mongoose)、redis使用
如果大家在开发中遇到什么问题,尽量去官网的issue中搜索解决,很多的已知问题在官网上都有解答的,养成看官网文档的习惯是非常必要的,希望大家不单单只学会这门技术,而是懂得如何去学习一门新技术。
本文地址:https://blog.csdn.net/qq_36587420/article/details/107529766
上一篇: 武汉理工大学毕业实习Day02和03
下一篇: 为何说诛杀司马昭曹髦做不到?真相是什么