NuxtJs学习笔记

入门

含义

 Nuxt.js 通用Vue.js ssr
    ssr:服务器端 Vue渲染html 返回浏览器
    SEO:VUE SPA(单页) 新闻 搜索引擎
    SPA: 快速
必须用到SSR的地方
    新闻、博客、。。需要搜索引擎提供流量的应用都需要用到ssr 

优点

1.基于VUE
2.自动代码分层
3.强大的路由功能，支持异步数据
4.静态文件服务
5.es6/es7语法支持
6.打包和压缩js和css
7.html头部标签管理
8.本地开发支持热加载
9.集成eslint
10.支持各类样式预处理器：SASS,LESS,STYLUS等等

基础要求

1.html
2.css
3.vue

环境的搭建

• node.js 安装
• 全局安装vue-cli

    npm install vue-cli -g
    查看版本
    vue -V
  

• 指定目录初始化项目

      在指定目录下
      vue init nuxt/starter
      初始化后，更新包文件
      npm install
      启动项目
      npm run dev
  

Nustjs目录结构和配置文件

文件夹的作用

• .nuxt

一般不需要动，是npm run bulid自动生成的

• assets

放置less sass javascript 图标什么的

• components

  自己写的组件

• layouts

  布局，

• middleware

放置中间件的位置

• page

  自己编写的页面

• plugins

  放js的一些插件，例如弹出插件

• static

静态文件，例如图片

• store

  状态管理 vuex的知识

文件的作用

• .eslintrc.js

eslintrc的配置文件,规范代码编写风格

• .gitignore

 上传的规则，设置不上传的文件

• nuxt.config.js

head:所有页面的头部
loading:加载的样式
build:扩展

• package.json

默认包管理：
  dependencies：生成环境的配置
  devDependencies：产品环境的配置

常用配置项的配置

• 端口，ip的配置

package.json文件内添加：
"config":{
  "nuxt":{
    "host":"127.0.0.1",//设置的ip
    "port":"1818"//设置的端口
  }
},

• 配置全局css，全局js

 ~:根目录匹配符
 在nuxt.config下添加
 css:['~assets/css/normailze.css'],

• 图片url的打包

在nuxt.config文件build下
loaders:[
     {
     test:/\.(png|jpg|gif|svg)$/,
     loader:'url-loader',
     query:{
       limit:10000,
       name:'img/[name].[hash].[ext]'
     }
   }

   ],

路由与参数传递

标签传递路由

• 1.使用a标签直接跳转，href内是跳转的页面路由(不推荐使用)

about

• 2.使用官方推荐标签 nuxt-link,使用params进行传参.

  普通跳转
 about
 带参跳转
 news
 接收参数
 this.$route.params.newsId

动态路由和参数校验

• 动态路由

  • 使用a标签

      动态路由文件名称需要_开头,例_id,id才是文件名称
      具体案例如下：
      news文件（调用动态路由处的文件）：
       
    
          
    news index page
          
    
            
    回到首页 {{$route.params.newsId}}
            
    news1
            
    nuxt-link
            
    news3
          
        
       _id文件（动态路由文件）：路由中的参数id就是文件名
       
    
           
    News--contents
           
    NewsId:{{$route.params.id}}
           
    home
         
        注：export default中的name需要去除
    

    • 使用nuxt-link

       动态路由文件名称需要_开头,例_id,id才是文件名称
                     具体案例如下：
                     news文件（调用动态路由处的文件）：
                      
    
                         
    news index page
                         
    
                           
    nuxt-link
                         
                       
                      _id文件（动态路由文件）：路由中的参数id就是文件名
                      
    
                          
    News--contents
                          
    NewsId:{{$route.params.id}}
                          
    home
                        
                       注：export default中的name需要去除
                   
    

• 路由校验

   在动态路由 export default中定义校验规则，例如：设置只允许参数是数字
   validate({params}){
           return /^\d+$/.test(params.id);
         }
    news1//允许通过，允许渲染
    news2//不允许通过，不进行渲染
  

路由动画效果

• css全局控制

  全局css样式添加
  //进入的动画
  .page-enter-active,.page-leave-active{
      transition: opacity 2s;
  }
  //离开的动画
  .page-enter,.page-leave-active{
    opacity: 0;
  }

• css单独控制

  css添加动画
  //注意test
.test-enter-active,.test-leave-active{
  transition: all 2s;
  font-size: 12px;
}
.test-enter,.test-leave-active{
  opacity: 0;
  font-size: 40px;
}
单独设置的页面中的export default 中添加
transition:'test' //test 和css中的test类似

默认模板和默认布局

默认模板与默认布局的区别，默认模板的级别最高，且可以改变头部内容，默认布局可以不需要重启服务器就可以生效

默认模板（不常用）

  在根目录下，新建app.html nuxt会默认将其当作模板
  例：
 
 
   
     {{HEAD}}
   
 
   
这是公共的模板，每次更改需要重启
 {{APP}}
 
 
 //其中 {{HEAD}}为引入nuxt.config.js中的head内容
 //{{APP}}为真实页面占位

默认布局（常用）

  在layouts文件下的default内进行修改，例如
   

    
这是默认布局内的全局内容，不需要重启就可以生效！！！
      
    

NuxtJS错误页面和个性meta标签设置

错误页面

• 错误页面设置

  在layouts文件夹下创建error文件
  通过props:['error']用来接收错误代码
  通过error.statusCode来判断错误信息，代码案例如下
  
  
  
  

• 个性meta标签设置

在需要个性化标签设置的页面的export default中使用head(){}设置个性化
例如：
   head(){
          return{
            title:"ssssss",
            meta:[
              {hid:'description',name:'news1',content:'this is new page'}
            ]
          }
        }
    title：头部文字
    meta head标签内的内容，hid需要和nuxt.config.js中的head对象内的hid相同，不然会有问题    

NuxtJS的asyncData方法

• 异步请求数据

 在页面渲染之前从服务器上获取数据对象，获取后再显示页面内容

• 配置方式

 //安装axios
 npm install axios --save
 

Nuxt静态资源文件和生产静态文件

Nuxt静态资源文件

1 img引入 使用 ~直接到达根目录
  
2 背景映入 也是使用~到达根目录
.div-class-img{
    width: 500px;
    height: 300px;
    background-image: url("~static/img/logo.png");
  }   

生产静态文件

使用 npm run generate 生成静态文件