Nuxt笔记

Nuxt初识

Nuxt.js 是通用的Vue.js框架
学习nuxt先梳理清楚SSR和SPA

梳理ssr和spa的定义和区别

随着当前
ssr:将Vue在服务端 渲染成HTML返回给浏览器
SEO：Vue spa（单页）搜索引擎只能抓取到单页面数据
所以需要搜索引擎提供流量的网站都需要去用SSR渲染

Nuxt的优点

1. 基于Vue.js
2. 自动代码分层
3. 服务端渲染
4. 强大的路由功能支持异步数据
5. 静态文件服务
6. ES6/ES7的语法支持
7. 打包和压缩JS和Css
8. HTML头部标签管理
9. 本地开发支持热加载
10. 集成ESlint
11. 支持各种样式的预处理器:sass,lass,stylus等

环境安装

1.Vue cli手脚架 安装

npm install vue-cli -g

2.在对应的文件夹下nuxt项目初始化

vue init nuxt-community/starter-template demo

其中 demo 为 project name

3.运行demo项目

cd demo
npm i
npm run dev

目录结构

是build出的文件开发时不需要动

放置LESS, SASS, or JavaScript等文件

自用组件

专门用于布局。

中间件放置。

工作目录

下载的一些插件

静态资源文件 图片、图标

Vuex状态管理

nuxt路由

静态路由

 <ul>
      <li><nuxt-link :to="{name:'index'}">Home</nuxt-link></li>
      <li><nuxt-link :to="{name:'about'}">About</nuxt-link></li>
      <li><nuxt-link :to="{name:'news', params:{newsId:213}}">News</nuxt-link></li>
    </ul> 

动态路由

直接添加页面内容，就可以实现路由渲染，直接就可以访问了
文件目录

index（内层）

 		<li><a href="/">Home</a></li>
        <li><a href="/news/123">news-1</a></li>
        <li><a href="/news/456">news-2</a></li>

_id.vue

 <div>
        <h2>News-content</h2>
        <p>NewsId:{{$route.params.id}}</p>
        <ul>
            <nuxt-link :to="{name:'index'}">Home</nuxt-link>
        </ul>
    </div>