nuxt的使用

大家好，我是讯享网，很高兴认识大家。

1.首先创建项目运行命令

vue init nuxt-community/starter-template projectname

若执行命令报错，

讯享网

请全局执行

npm install -g @vue/cli-init

正常执行命令创建项目之后，查看项目的package.json文件运行

npm install命令下载包

认识目录

.nuxt自动生成的

assets静态资源目录（放些less，sass，javaScript）

layouts用作布局的相当于全局父级，其中的vue页包含<nuxt>相当于将pages页面中的内容全部在此入口展示

middleware是放置中间件的

pages是写的页面全部放到这个里面

plugins放置js插件

static放置静态文件（img等）

store放置vuex

.editorconfig是vscode的默认规则

eslintrc.js 规范代码书写

nuxt.config.js是覆盖原来的配置，相当于配置默认vue项目的index.html

二.

nuxt设置引入全局css在nuxt.config.js

在pages新建的vue文件nuxt会自动分配路由，直接按路径访问即可

其中~波浪线符号是代表根目录

nuxt使用scss

npm install node-sass@4.14.1

npm install sass-loader@8.0.2

必须下载两个版本是适应的，如果版本不适用则会报错，以上两个版本是适用的

执行完成后即可在单页面中使用了

</style>

全局使用scss

首先下载

npm i @nuxtjs/style-resources

修改配置
修改nuxt.config.js文件，添加内容
这里配置，采用的是nuxt 2.0.0版本

modules: [     '@nuxtjs/style-resources' ], styleResources: {     scss: [         //把全局样式放到这里，同时把css节点中引用的scss删除         '~assets/my-global.scss'     ] },

讯享网

讯享网//主要就是这里改为了buildModules buildModules: [     '@nuxtjs/style-resources' ], styleResources: {     scss: [         '@/assets/my-global.scss'     ] },

三.路由配置

1.路由基本用法

//news.vue //路由使用nuxt-link标签包裹如果所跳转路由名称是index,则对应打开页面时pages下的index.vue <li><nuxt-link :to="{name:'index'}">HOME</nuxt-link></li> //如果想跳转路由名称为news则对应打开页面时pages下的news文件夹下的index.vue //此处由于是传参所以name原来应为news现在加了个-id则是规定所传的params对象名为id //若传多个参数可以对象的形式用JSON.stringify转成字符串传值 <li><nuxt-link :to="{name:'news-id',params:{id:123}}">new1</nuxt-link></li>

2.路由跳转页面验证，及默认设置为子路由页

讯享网//当前页面是news文件夹下新建的一个index.vue <li><nuxt-link :to="{name:'news-id',params:{id:123}}">new1</nuxt-link></li> <li><nuxt-link :to="{name:'news-id-name',params:{id:'nice'}}">new2</nuxt-link> </li>

（2）在_id.vue必须删掉export default下的name否则会将路由子页面当成子组件来用，就会报错news文件夹下同时新建index.vue及_id.vue是命名规则加下滑线就是默认为index.vue页的子路由页，会根据index.vue传的参数不同通过_id.vue页显示不同结果

//在当前页_id页中作正则验证如果参数都是数字则进入 //当前页，并显示结果，否则进入nuxt.js的默认404页面 //_id.vue <template> <div> <h2>News-content</h2> <p>NewsId{ 
  
    
  {$route.params.id}}</p> <ul> <li><a href="/">HOME</a></li> </ul> </div> </template> <script> export default { // name: "_id", //加校验如果路由参数中包含数字则返回true执行进入此子组件页面,否则会进入404页面 validate({params}){ return /^\d+$/.test(params.id); }, } </script>

3.nuxt.js的路由页在根目录下.nuxt文件夹下的router.js页中配置

三点一.路由动画

（1）路由动画默认配置写法

讯享网//normal.css /*以下是全局页面切换路由渐隐渐显效果， 其中类名的方式enter-active,level-active及 -enter,level-active是固定的搭配写法，为什么不加page是因为page可以自定义*/ //意思是进入激活效果 离开激活效果 .page-enter-active,.page-level-active{ transition: all 1s; } //进入触发效果 离开激活 .page-enter,.page-level-active{ opacity: 0; }

（2）路由动画自定义配置写法

https://myjson.com/

//normal.css /*以下是test自定义路由动画配置写法效果是进入时字体由大到小，离开是字体由小到大*/ .test-enter-active, .test-leave-active{ transition: all 1s; font-size: 12px; } .test-enter, .test-leave-active{ opacity: 0; font-size: 40px; }

当其他页面使用此自定义动画效果时需要在export default中的transition设置值为‘test’

四.nuxt模板及默认布局

1.模板

在根目录下新建一个app.html

讯享网<!DOCTYPE html>
<html lang="en">
<head>
  {
  
  
  
  
  
  
  
    
  {HEAD}} //固定写法 </head> <body> <p>JSPang.com 技术胖博客</p> //在此处添加内容相当于在所有vue上方都会显示此内容 { 
  
    
  {APP}}//其中App位置显示的是所有vue页的内容
</body>
</html>

2.默认布局

在layouts文件中的index.vue设置默认布局

<nuxt/>标签表示所有.vue页的内容可以自定义所有vue页面的外部盒子

五.错误页面配置

1.在layout文件夹中新建error.vue
<template> <div> <h2 v-if="error.statusCode===404">404页面，你需要的页面没有找到</h2> <h2 v-else>500页面，服务器错误</h2> </div> </template> <script> export default { /*error是系统自带的值，可以获取网页状态*/ props:['error'] } </script> 
配置完后当访问当前域名下的地址无法访问就会自动进入error.vue中

六。个性meta标签设置

1.默认给某一个vue页设置meta或head内容

七。请求接口

讯享网<template> <div> <ul> <h2>姓名：{ 
  
    
  {info.name}}</h2> <h2>年龄：{ 
  
    
  {info.age}}</h2> <h2>{ 
  
    
  {info}}</h2>
    </ul>
  </div>
</template>

<script>
    import axios from 'axios'
    export default {
      data(){
        return{
          name:'Hello World'
        }
      },
      //将json值直接返回给当前方法，在html中可直接使用对象的值
      async asyncData(){
        let {data}=await axios.get('https://api.myjson.com/bins/7g5mb');
        return {info:data}

      }
    }
</script>

八。nuxt打包后静态资源（img,file等）无法显示

打包命令是npm run generate

打包成dist文件后打开里面的index.html文件发现原来配置的图片没有出现

解决方式：

需要有服务器辅助，可以全局下载liver-server： npm install -g live-server

启动方式直接在生成静态文件的dist文件夹中运行命令live-server即可