Nuxt教程基础

 

Nuxt.js 是一个基于 Vue.js 的通用应用框架。

        通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI渲染。SSR服务器

        SSR在服务端将vue渲染成html返回给浏览器。

 

优点：

1.对SEO友好。对单纯Vue的spa就很不友好，对于类似新闻的网站，搜索引擎无法抓取。

2.对于SPA的首屏打开速度会更加快速。

 

新闻、博客、电影

 

一、初始化项目  

vue init nuxt/starter

 

二、目录结构

assets	静态资源目录 ,如less,sass等文件。但是图标不会放这里。（This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.）
middleware	中间件
plugins	插件
static	图片、图标
store	Vuex状态管理
editorconfig	vscode编写代码格式规则
eslintrc.js	esList规则，代码规则
.gitignore	默认不上传文件  用generator生成的dist不会上传

 

nuxt.config.js

build 扩展

package depencies生成环境  devDeprendencies 开发环境

script npm run -dev中dev都在其中

 

三、常用配置项

需求一： 修改IP和端口号，修改后需要重启服务。

"config":{

    "nuxt":{

      "host": "127.0.0.1",

      "port": "1818"

    }

  },

 

需求二： 修改字体文件

1.在assets的css文件夹下新建normailze.css文件

2.在nuxt.config.js新建css对象

  

css:['~assets/css/normailze.css'],

 

  nuxt可以直接匹配到当前文件，比较方便。

 

  

需求三、设置配置项

build: {

    loader:[

      {

        test: /\.(png|jpe?g|gif|svg)$/,

        loader: "url-loader",

        query:{

          limit: 1000,

          name:'img/[name].[hash].[ext]'

        }

      }

    ],

    /*

    ** Run ESLint on save

    */

    extend (config, { isDev, isClient }) {



}

 

    

    

四、路由配置和参数传递

Nuxt不需要我们去配置路由，它会自动配置路由。并且不建议使用标签，最好使用标签。

    
HOME

    
ABOUT

    
NEWS

    

传递参数

    


      
HOME

      
ABOUT

      
NEWS

    

      

  


        
NEWS

        
NewsID: {{$route.params.newsId}}

        


            
Home

        

    

 

    

五：动态路由

news/index.vue

        
new-content

        
newsId:{{$route.params.id}}

        


            


                home

            

        

    

news/_id.vue

    


        
new-content

        
newsId:{{$route.params.id}}

        


            


                home

            

        

    
    

    

六、动画效果

分为全局动画效果和局部动画效果

 

全局动画效果： assets/css/main.ss

.page-enter-active, .page-leave-active {

    transition: opacity 2s;

}

.page-enter, .page-leave-active {

    opacity: 0;

}

 

局部动画效果，

assets/css/main.css

.test-enter-active, .test-leave-active{

    transition: all 2s;

    font-size: 12px;

}

.text-enter, .test-leave-active{

    opacity: 0;

    font-size: 40px;

}

 

默认模板

 

默认模板(注意修改后需要重启服务)

/app.html  

    {{HEAD}}





    
JSPang.com 技术胖博客

    {{APP}}

 

 

默认布局（修改后不需要重启，一般都是使用默认布局）

只能定义template的东西，不能定义head里面的东西

news/index.css

export default {

    transition:'test'

};

 

八、错误页面和个性Meta

/layouts/error.vue

 

个性meta

 

news/index.vue

 

 

 

news/_id.vue

 

查看源代码就能发现两个meta,需要覆盖，

将hid设置为“discription”即可

 

九、异步请求数据方法 asyncData

1.创建数据仓库

打开 myjson.com

{

  "name": "lianghaihsia",

  "age": 18,

  "hobby": "readin123123g"

}

 

2.

/asyncData.vue

 

 

 

十、静态资源文件和部署

 

npm run generate

打包完了之后就是传统的Html文件。

 

/index.vue