RyleeLouth

vuejs全家桶之nuxt.js的使用

参考文档

官网：https://nuxtjs.org/guide

中文：https://zh.nuxtjs.org/guide/installation

什么是nuxt.js?

Nuxt.js 是一个基于 Vue.js 的通用应用框架。完成 vuejs 项目的服务器端渲染

SSR 和我们 nuxt.js 有什么关系？

nuxt.js 就是完成 vuejs 项目的服务器端渲染。主要是为了解决 vuejs 项目不利于SEO的问题。

为什么要使用 nuxt.js 实现服务器端的渲染？

没有使用 nuxt.js 的时候 vuejs 项目的不能服务器端渲染，使用的是客户端BSR（都是前后端分离，通过api接口获取数据，然后前端渲染，是不利于SEO，因为网页里面的动态添加，对于搜索引擎爬取网站的时候，是看不到内容的，网站很难被搜索引擎收录，网站的流量很小，自然不容易出名）。

nuxt.js的使用

建议使用第三方库nuxt.js ---------https://zh.nuxtjs.org/guide

第一步快速生成一个项目：> $ npx create-nuxt-app <项目名>

(npx在NPM版本5.2.0默认安装了)

------------------或者用yarn：yarn create nuxt-app <项目名>

第二步根据需要选择对应选项

选择完以后会自动生成一个项目，大概长下面这样，我们分析一下每个文件的作用

第三步：实操

1，首先我们先来练习路由,一共有三种路由方式（我们只需要写路由即可，文件会自动生成路由映射）

基础路由

动态路由、路由参数

路由嵌套

** 1，基础路由案例，我们可以在pages下面建一个users文件夹，文件夹下建一个index.vue组件

，代码如下**

vuejs全家桶之nuxt.js的使用

参考文档

什么是nuxt.js?

SSR 和我们 nuxt.js 有什么关系？

为什么要使用 nuxt.js 实现服务器端的渲染？

nuxt.js的使用

第一步快速生成一个项目：> $ npx create-nuxt-app <项目名>

第二步根据需要选择对应选项

第三步：实操

** 1，基础路由案例，我们可以在pages下面建一个users文件夹，文件夹下建一个index.vue组件

hi users-index!我是静态路由</h1> </div> </template>
输入网址：http://localhost:3000/users得到结果如下，
这里要注意一下，因为我的文件叫index.vue，所以可以省略不写index，以后其他indx文件也可以不写

2，动态路由、（路由参数）案例：我们可以在在pages下面建一个news文件夹，文件夹下建一个list.vue组件

hi 我是动态路由(参数路由)</h1>

我是第{{ $route.params.id }}条新闻</h2> </div> </template>
输入网址：http://localhost:3000/news得到结果如下，

点击新闻一：

3，路由嵌套案例：我们可以在在pages下面建一个goods.vue组件

第四步，layouts/default.vue设置公共头和尾,在每一个页面都有一样的头尾

底部</h2> </div> </template>

效果是这样的

第五步，向服务器端请求数据，现在真的要操作了

我是猫眼电影的列表</h1>
-for="ele in movieData">
序号：{{ ele.id }}</li>
电影名：{{ ele.nm}}</li>
图片："ele.img.replace('w.h','200.200')" alt=""></li> </ul> </div> </template>

你可能感兴趣的:(vuejs全家桶之nuxt.js的使用)

vuejs全家桶之nuxt.js的使用

参考文档

什么是nuxt.js?

SSR 和我们 nuxt.js 有什么关系？

为什么要使用 nuxt.js 实现服务器端的渲染？

nuxt.js的使用

第一步快速生成一个项目：> $ npx create-nuxt-app <项目名>

第二步根据需要选择对应选项

第三步：实操

** 1，基础路由案例，我们可以在pages下面建一个users文件夹，文件夹下建一个index.vue组件

hi users-index!我是静态路由</h1> </div> </template> 输入网址：http://localhost:3000/users得到结果如下， 这里要注意一下，因为我的文件叫index.vue，所以可以省略不写index，以后其他indx文件也可以不写

2，动态路由、（路由参数）案例：我们可以在在pages下面建一个news文件夹，文件夹下建一个list.vue组件

hi 我是动态路由(参数路由)</h1>

我是第{{ $route.params.id }}条新闻</h2> </div> </template> 输入网址：http://localhost:3000/news得到结果如下， 点击新闻一：

3， 路由嵌套案例：我们可以在在pages下面建一个goods.vue组件

第四步，layouts/default.vue设置公共头和尾,在每一个页面都有一样的头尾

底部</h2> </div> </template>

效果是这样的

第五步，向服务器端请求数据，现在真的要操作了

你可能感兴趣的:(vuejs全家桶之nuxt.js的使用)

hi users-index!我是静态路由</h1> </div> </template>
输入网址：http://localhost:3000/users得到结果如下，
这里要注意一下，因为我的文件叫index.vue，所以可以省略不写index，以后其他indx文件也可以不写

我是第{{ $route.params.id }}条新闻</h2> </div> </template>
输入网址：http://localhost:3000/news得到结果如下，

点击新闻一：

3，路由嵌套案例：我们可以在在pages下面建一个goods.vue组件