nuxt的学习之路

最新推荐文章于 2025-08-05 22:17:37 发布

m18565890306

最新推荐文章于 2025-08-05 22:17:37 发布

阅读量408

点赞数 1

CC 4.0 BY-SA版权

文章标签： nuxt

本文链接：https://blog.csdn.net/m18565890306/article/details/85162722

nuxt.js安装

1.用npm来安装vue-cli这个框架
npm install vue-cli -g
2..使用vue安装 nuxt
vue init nuxt/starter
3.使用npm install安装依赖包
npm install
4.使用npm run dev 启动服务
npm run dev
5.在浏览器输入 localhost:3000,可以看到结果。
6.打包
$ npm run build
$ npm start

改IP：

配置IP和端口 /package.json
  "config": {
    "nuxt": {
      "host": "172.16.0.55",
      "port": "1234"
    }
  }

配置全局CSS：

 assets/建css文件，在/nuxt.config.js配置中引入
  css:['~assets/css/normailze.css'],
或者在default里面开发公共样式

动态路由传参:

News-1
News-2

<li><nuxt-link :to="{path:'/news/123'}">news1</nuxt-link></li>
 <li><nuxt-link :to="{path:'/news/456'}">news2</nuxt-link></li>
 
 <li><nuxt-link :to="{name:'news',params:{id:789}}">News-1</nuxt-link></li>

 接收: 

进入一个页面，对参数传递的正确性校验是必须的，Nuxt.js也贴心的为我们准备了校验方法validate( )。
export default{
validate({params}){
 console.log(params)
return /^\d+$/.test(params.id)
},
}
template里面   {{$route.params.id}}

插件的引入如：

第一种方式：
    npm install --save jquery

然后 在nuxt.config.js配置
const webpack = require('webpack')
module.exports = {
            build: {
    
    plugins: [
      new webpack.ProvidePlugin({
        '$': 'jquery'
      })
    ]
},
plugins: []
}
然后页面上
export default {
	mounted () {
	    }
    第二种方式：在nuxt.config.js的配置
	           module.exports = {
				head: {
				    script: [
				      { src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' }
				    ]
				}

自己写的 插件 或者网上轮播图插件 你要把他放在 static的文件里面  因为  static是nuxt默认的存放类似不编译的 png图片 js的地方  ，放进去之后  

export default {
	head: {
	    script: [
	      { src: 'js/move.js' }
	    ],
	    link: [
	      { rel: 'stylesheet', href: 'css/zzsc.css' }
	    ]
	},

全局路由动画

全局动画默认使用page来进行设置，例如现在我们为每个页面都设置一个进入和退出时的渐隐渐现的效果。我们可以先在根目录的assets/css下建立一个main.css文件。

然后在nuxt.config.js里加入一个全局的css文件就可以了。
css:['~assets/css/normailze.css','~assets/css/main.css']

单独设置页面动效

 想给一个页面单独设置特殊的效果时，我们只要在css里改变默认的page，然后在页面组件的配置中加入transition字段即可。例如，我们想给        about页面加入一个字体放大然后缩小的效果，其他页面没有这个效果。
在全局样式assets/main.css 中添加以下内容。
.test-enter-active, .test-leave-active {
      transition: all 2s;
      font-size:12px;
  }
  .test-enter, .test-leave-active {
      opacity: 0;
      font-size:40px;
  }
	  然后在about/index.vue组件中设置
export default {
transition:'test'
}

Nuxt的默认模版和默认布局

Nuxt为我们提供了超简单的默认模版订制方法，只要在根目录下创建一个app.html就可以实现了。
<!DOCTYPE html>
<html lang="en">
<head>
   {{ HEAD }}
</head>
<body>
    <p>我是头部公共的</p>
    {{ APP }}
</body>
</html>

这里的{{ HEAD }}读取的是nuxt.config.js里的信息，{{APP}} 就是我们写的pages文件夹下的主体页面了。需要注意的是HEAD和APP都需要大写，如果小写会报错的。

默认布局

和默认模板类似的功能还有默认布局，但是从名字上你就可以看出来，默认布局主要针对于页面的统一布局使用。它在位置根目录下的layouts/default.vue。需要注意的是在默认布局里不要加入头部信息，只是关于<template>标签下的内容统一订制。

<template>
  <div>
     <p>我是头部公共的</p>
    <nuxt/>
  </div>
</template>

个性meta设置每页的title

export default {
  validate ({ params }) {
   
  },
  data(){
    return{
      title:this.$route.params.title,
    }
  },
//独立设置head信息
  head(){
      return{
        title:this.title,
        meta:[
          {hid:'description',name:'news',content:'This is news page'}
        ]
      }
    }
}

ansycData的promise方法

<script>
import axios from 'axios'
export default {
  data(){
     return {
         name:'hello World',
     }
  },
  asyncData(){
      return axios.get('https://api.myjson.com/bins/8gdmr')
      .then((res)=>{
          console.log(res)
          return {info:res.data}
      })
  }
}
</script>

ansycData的await方法

<script>
import axios from 'axios'
export default {
  data(){
     return {
         name:'hello World',
     }
  },
  async asyncData(){
      let {data}=await axios.get('https://api.myjson.com/bins/8gdmr')
      return {info: data}
  }
}
</script>

生成的每个文件的含义

|-- .nuxt                            // Nuxt自动生成，临时的用于编辑的文件，build
|-- assets                           // 用于组织未编译的静态资源入LESS、SASS 或 JavaScript
|-- components                       // 用于自己编写的Vue组件，比如滚动组件，日历组件，分页组件
|-- layouts                          // 布局目录，用于组织应用的布局组件，不可更改。
|-- middleware                       // 用于存放中间件
|-- pages                            // 用于存放写的页面，我们主要的工作区域
|-- plugins                          // 用于存放JavaScript插件的地方
|-- static                           // 用于存放静态资源文件，比如图片
|-- store                            // 用于组织应用的Vuex 状态管理。
|-- .editorconfig                    // 开发工具格式配置
|-- .eslintrc.js                     // ESLint的配置文件，用于检查代码格式
|-- .gitignore                       // 配置git不上传的文件
|-- nuxt.config.json                 // 用于组织Nuxt.js应用的个性化配置，已覆盖默认配置
|-- package-lock.json                // npm自动生成，用于帮助package的统一性设置的，yarn也有相同的操作
|-- package-lock.json                // npm自动生成，用于帮助package的统一性设置的，yarn也有相同的操作
|-- package.json                     // npm包管理配置文件

nuxt.config.js文件

   const webpack = require('webpack');
module.exports = {
  /*
  ** Headers of the page
  */
  head: {
    title: 'nuxtdemo', //头部
    meta: [  //个性meta
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'demo' }
    ],
    link: [ //头部的title图片
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  /*
  ** Customize the progress bar color
  */
  loading: { color: '#3B8070' },
  /*
  ** Build configuration
  */
  build: {
    /*
    ** Run ESLint on save
    */
    extend (config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    },

    plugins:[
      new webpack.ProvidePlugin({  //Jq
        "$":'jquery'
      }),
    ],
  },
  vendor: ["~/plugins/axios"],
  plugins: [{src: "~/plugins/axios",ssr: false}],  //插件配置
  css:['~assets/css/normailze.css','~assets/css/main.css'],  //公用css
  modules: [ '@nuxtjs/axios' ], // 不需要加入@nuxtjs/proxy
  axios: {
    proxy: true,
    prefix: '/api', // baseURL
    credentials: true,
  },
  proxy: {
    '/api/': {
      target: 'http://172.16.0.55:1234', // 代理地址
      changeOrigin: true,
      pathRewrite: {
        '^/api': ''
      },
    },
  },

}

packjson文件

{
  "name": "nuxtdemo",
  "version": "1.0.0",
  "description": "demo",
  "author": "liqiangsheng <125373914@qq.com>",
  "private": true,
  "scripts": {
    "dev": "nuxt --open",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.3.6",
    "@nuxtjs/proxy": "^1.3.1",
    "axios": "^0.18.0",
    "jquery": "^3.3.1",
    "nuxt": "^2.0.0"
  },
  "devDependencies": {
    "babel-eslint": "^10.0.1",
    "eslint": "^4.19.1",
    "eslint-friendly-formatter": "^4.0.1",
    "eslint-loader": "^2.1.1",
    "eslint-plugin-vue": "^4.0.0"
  },
  "config": {
    "nuxt": {
      "host": "172.16.0.55",
      "port": "1234"
    }
  }
}