Nuxt从入门到放弃

听老大说，俺们公司之后要用Nuxt了，作服务端渲染，打算作个技术分享。因此呐……我打算提早玩一下，防止到时候听的一脸懵逼 : |  

 

若是有幸看到这篇瞎写的文档的小伙伴，也想入门一下……

 

那你就来对啦！欸嘿嘿……跟着我来踩一踩这些坑吧！

 

一.  天才第一步，跟着官网输

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

这行命令给咱安装了一个脚手架工具，就像安装vue-cli同样，咱们能够选择作一些配置：

你们能够一路回车，但这里提个醒，在选择你想要的Nuxt模式的时候，建议选择 Universal 。

用nuxt的人多半是为了解决SEO的问题，而Universal 和 Spa 的区别也刚好就在于对seo的实现存在差别。想了解更多的亲能够点下这里  ：）

 

二.  兴奋的喊：走你！

在第一步里面，nuxt已经帮咱们安装了全部依赖项，所以下一步是启动项目:

$ npm run dev

而后这里有个小坑（敲黑板注意了）！

咱们可能会遇到这个报错。

咋办呢？ 我自信的百度了一下并找到了前辈总结的缘由：

 

extract-text-webpack-plugin目前版本不支持webpack4。

 

解决方案也很简单：使用extract-text-webpack-plugin的最新的beta版

$ npm install extract-text-webpack-plugin@next

 

当我以为这样就解决了的时候……

错误一毛同样的又出如今我面前（小声骂了一句百度）

而后通过一番研究，问题应该是我选择了element做为UI框架的缘由，在切换各个版本都未解决后，我决定把element从个人项目中干掉！

而后……正常了！

看到了我努力一个小时获得的结果：

翻译一下中间的一行英文： 我简单粗暴的nuxt.js项目。

听起来牛逼闪闪的样子。

三.  诶！目录咋跟个人不同呢？

好吧，目录这个玩意能够带咱们很好的了解一个项目，包括nuxt.  我先截个图bia在这里：

而后写个注释再bia一遍哈哈：

各位看官想要详细了解他们的配置，请移步官网，毕竟这只是一篇流水帐哈哈……

四.  个人项目我说了算！

不少框架中，配置是其最有魅力但不多被众多开发者注意的东西，由于这个东西一个不当心就报错，报的莫名其妙。

实际上是咱们不够了解它们。

当对每一项都调试一遍后，你就会嚼的这玩意真是太踏马的牛逼啦！

好吧牛逼归牛逼，咱们仍是要知道知道它咋这么牛逼，SO！ 接下来看看他的配置文件： nuxt.config.js ！

 

……

……

……

 

好吧  我这里贴出官网的配置地址，大伙儿看看吧，对不起你们我懒得复制了哈哈哈哈哈！

你却是点我呀！

若是了解过webpack的配置的话，应该对这个不陌生的。

咱们能够配置模式，环境变量，路由，根目录，服务器实例变量等等你能想到的均可以在这里配置，五脏六腑啥的，作咱们个性化的项目。想配啥，您说了算！

 

五.  等会？ 你把个人路由给干掉了？

细心得玩家会注意到，nuxt项目中的路由目录不见了。

孔子说的好啊，关上一扇窗户就少一扇门什么的…… 诶！咱们的路由跑哪里去了呢？

答案是：自！动！生！成！

固然这个牛逼不是我吹的，是官网这么说的：

 

 

牛逼不？ 智能不？

咱先说基础的：

固然这属于初级用法，像我们这个档次的必须玩出点花儿来：

呐！ 动态的！哈哈  其实就是动态路由，聪明的你一眼就看出来了吧，那个:id? 参数，表示该路由是可选的，若是你想将它设置为必选的路由，须要在 users/_id 目录内建立一个 index.vue 文件。

 

这都不叫花儿，Nuxt.js 的炫酷之处在于可让你在动态路由组件中定义参数校验方法。

 

 想详细了解的仍是移步官网哈哈！

嵌套路由就很好理解了，一看就懂的那种：

 

 

六.  Emmmm，中间件是个啥？

官网这么说的：中间件容许您定义一个自定义函数运行在一个页面或一组页面渲染以前。

 

 未完待续……