nginx

优点

1. 　支持海量高并发（官方说是5W个）
2. 　内存消耗少
3. 　免费使用可以商业化
4.    配置文件简单

 

安装

 

$ yarn create nuxt-app <项目名>

 

 

目录结构

|-- .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包管理配置文件

配置

/package.json

"config":{
    "nuxt":{
      "host":"127.0.0.1",
      "port":"1818"
    }
  },

配置全局CSS

/assets/css/normailze.css

html{
    color:red;
}

/nuxt.config.js

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

 

路由参数

<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:3306}}">NEWS</nuxt-link></li>
//获取参数

 <p>NewsID:{{$route.params.newsId}}</p>

 

动态路由和参数校验

/pages/news/_id.vue

<template>
  <div>
      <h2>News-Content [{{$route.params.id}}]</h2>
      <ul>
        <li><a href="/">Home</a></li>
      </ul>
  </div>
</template>

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


//校验

export default {
  validate ({ params }) {
    // Must be a number
    return /^\d+$/.test(params.id)
  }

}

 

路由动画效果

//全局动画

/assets/css/main.css

.page-enter-active, .page-leave-active {
    transition: opacity 2s;
}
.page-enter, .page-leave-active {
    opacity: 0;
}

然后在nuxt.config.js里加入一个全局的css文件就可以了

css:['assets/css/main.css'],

 

单独设置页面动效

.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'
}

 

错误页面

在根目录下的layouts文件夹下建立一个error.vue文件，

<template>
  <div>
      <h2 v-if="error.statusCode==404">404页面不存在</h2>
      <h2 v-else>500服务器错误</h2>
      <ul>
          <li><nuxt-link to="/">HOME</nuxt-link></li>
      </ul>
  </div>
</template>

<script>
export default {
  props:['error'],
}
</script>

 

 

个性meta

head(){
      return{
        title:this.title,
        meta:[
          {hid:'description',name:'news',content:'This is news page'}
        ]
      }
    }

 

 

获取数据

 

asyncData(){
      return axios.get('https://api.myjson.com/bins/8gdmr')
      .then((res)=>{
          console.log(res)
          return {info:res.data}
      })

  }

 

async asyncData(){
      let {data}=await axios.get('https://api.myjson.com/bins/8gdmr')
      return {info: data}

  }

 

静态资源和打包

"scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "export": "nuxt export",
    "serve": "nuxt serve"
  },

 

npm run generate