Nuxt.js 是一个基于 Vue.js 的服务端渲染应用框架。
Nuxt.js 为 客户端/服务端 这种典型的应用架构模式提供了许多有用的特性,例如异步数据加载、中间件支持、布局支持等。
首先我们安装好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
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 的更多信息)如果我们想要在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等其他的语法糖了
安装指令
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
如对本文有疑问, 点击进行留言回复!!
[杭电多校2020]第一场 1004 Distinct Sub-palindromes
Swift -- 将本地生成的UIImage进行持久化保存(存到文件中fileManager.createFile)
网友评论