猿记录

一个记录、分享的博客

您的位置:主页 > 技术专栏 > javascript > vue >

Nuxt.js 入门学习

2018-03-08 13:59:41 作者:yxl 次阅读 vue

 
Nuxt.js简单的说是Vue.js的通用框架,最常用的就是用来作SSR(服务器端渲染)。再直白点说,就是Vue.js原来是开发SPA(单页应用)的,但是随着技术的普及,很多人想用Vue开发多页应用,并在服务端完成渲染。这时候就出现了Nuxt.js这个框架,她简化了SSR的开发难度。还可以直接用命令把我们制作的vue项目生成为静态html。
 
那服务器端渲染到底有什么好处那?
 
最主要的原因时SPA(单页应用)不利于搜索引擎的SEO操作。比如你作一个新闻网站,流量的一个主要来源是通过百度、谷歌、bing这些搜索引擎,但是它们对SPA的抓取并不好,特别是百度根本没法抓取到SPA的内容页面,所以我们必须把我们的应用在服务端渲染成适合搜索引擎抓取的页面,再下载到客户端。那Nuxt.js适合作新闻、博客、电影、咨询这样的需要搜索引擎提供流量的项目。如果你要作移动端的项目,就没必要使用这个框架了。(其实Nuxt.js个人觉的是一个解决方案)
 
 
nuxt.js安装
 
在使用npm前你需要安装Node到系统中,如果你还不会安装Node,那就不要学这节课了,而是从技术胖的Vue基础课程开始学起吧,等基础都学会了再来学这个也不迟。
 
1.用npm来安装vue-cli这个框架,如果你已经安装过了,可以省略这步。
 
npm install vue-cli -g
这个根据你的网络环境不同,安装的速度不仅相同,如果你的网络环境实在不好,可以考虑使用cnpm来进行安装。(在实际开发中我会尽量避免使用cnpm来进行安装,因为会出现一些未知的错误。)
 
安装完成后可以使用vue -V 来测试是否安装成功。(注意:这里要使用大写的V,小写无效)。
 
2.使用vue安装 nuxt
 
安装好vue-cli后,就可以使用init命令来初始化Nuxt.js项目。
 
vue init nuxt/starter
这时候他会在github上下载模版,然后会询问你项目的名称叫什么,作者什么的,这些完全可以根据自己的爱好填写。
 
3.使用npm install安装依赖包
 
npm install
这个过程是要等一会的,如果你这个过程安装失败,也不要慌张,你可以直接诶删除项目中的node_modules文件夹后,重新npm install进行安装。
 
4.使用npm run dev 启动服务
 
npm run dev
5.在浏览器输入 localhost:3000,可以看到结果。

凡本站注明“本站”或“投稿”的所有文章,版权均属于本站或投稿人,未经本站授权不得转载、摘编或利用其它方式使用上述作品。

编辑:yxl 关键词: nuxt.js
0

网友评论