vuessr nuxt入门指南

nuxt.js

官网地址：https://zh.nuxtjs.org/guide/installation

1.安装

vue init nuxt-community/starter-template <project-name>
cd <project-name>
npm install

npm run dev

2.目录结构

2.1 layout

• layout/blog.vue

<template>
    <section>
        <div>这里是博客导航</div>
        <nuxt/>
    </section>
</template>

• layout/error.vue

<template>
  <div class="container">
    <h1 v-if="error.statusCode === 404">页面不存在</h1>
    <h1 v-else>应用发生错误异常</h1>
    <nuxt-link to="/">首 页</nuxt-link>
  </div>
</template>

<script>
export default {
  props: ['error'],
  layout: 'blog' // 你可以为错误页面指定自定义的布局 ,这个是上一个文件
}
</script>

3.路由

3.1 validate 方法 页面校验

Nuxt.js 可以让你在动态路由对应的页面组件中配置一个校验方法用于校验动态路由参数的有效性。

<script>
export default {
  validate ({ params }) {
    // 这里校验必须为数字，parems.info info是文件名字
    return /^\d+$/.test(params.info)
  }
}
</script>

3.2 路由跳转

<nuxt-link to="/">首 页</nuxt-link>

4.发送请求

• async await

<script>
  async asyncData({ params }) {
    var url = "http://dev.api.looklook.cn/kt_server/common/orderquery";

    var params_data = {
      out_trade_no: "1529386449613100027156",
      sign: "454C7C068BCEAA4ADC01F0AD4EDC5385",
      time: "1530110050760"
    };

    let res = await axios.post(url, params_data);
    return {
      response: res.data.data.information
    };
  }
</script>

• Promise

asyncData({params}) {
    let that = this;

    var url = "http://dev.api.looklook.cn/kt_server/common/orderquery";

    var params_data = {
        out_trade_no: "1529386449613100027156",
        sign: "454C7C068BCEAA4ADC01F0AD4EDC5385",
        time: "1530110050760"
    };
    return axios
        .post(url, params_data)
        .then(function(response) {
        return {
        response: response.data.data.information
        }
    })
        .catch(function(error) {
        console.error(error);
    });
 }

• 普通请求

created() {
    let that = this;

    var url = "http://dev.api.looklook.cn/kt_server/common/orderquery";

    var params = {
        out_trade_no: "1529386449613100027156",
        sign: "454C7C068BCEAA4ADC01F0AD4EDC5385",
        time: "1530110050760"
    };
    axios
        .post(url, params)
        .then(function(response) {
        that.response = response.data.data.information
    })
        .catch(function(error) {
        console.error(error);
    });
}

注意：

有一个值得注意的问题是，如果我们在另外一个页面内也引用了 axios，那么在应用打包发布的时候 axios 会被打包两次，而实际上我们只需要打包一次。这个问题可以通过在 nuxt.config.js 里面配置 build.vendor 来解决：

module.exports = {
  build: {
    vendor: ['axios']
  }
}

5.部署

• 服务端部署

npm run build
npm run start

提示： 建议将 .nuxt 加入 .npmignore 和 .gitignore 文件中。

• 静态资源部署

npm run generate

6. 引入element-ui

npm i element-ui -S

• 再plugins 文件夹下，添加 ElementUI.js文件，内容如下：

import Vue from 'vue'
import ElementUI from 'element-ui'
Vue.use(ElementUI)

• 在 nuxt.config.js中添加配置

plugins: [{
  src: '~plugins/ElementUI',
  ssr: true,
}],
css: [
  'element-ui/lib/theme-chalk/index.css'
],
build:{
   vendor:['element-ui']   //防止element-ui被打包多次
}

7.封装axios

在plugins 文件夹中 添加 axios.js

• /plugins/axios.js

import axios from 'axios'
//定义fetch函数，config为配置
export function fetch(config){
   //返回promise对象
   return new Promise((resolve,reject) =>{
       //创建axios实例，把基本的配置放进去
       const instance = axios.create({
           //定义请求文件类型
           headers:{
              'Content-Type': 'application/json',
            },
            // 请求超时  
            timeout: 3000,
            //定义请求根目录
            baseURL: 'http://dev.api.looklook.cn/kt_server/'
        });
       //请求成功后执行的函数
        instance(config).then(res =>{
            console.log(res);
            resolve(res);
        //失败后执行的函数
        }).catch(err => {
            console.log(err);
            reject(err);
        })
    });
}

// 封装调用的接口 getData
export function getData(url,type,data) {
    //如果type为空，默认为post方法，也可以自己改成get
    if(type==='')
        type = 'post';
    return fetch({
    //这里的url为baseURL下接口地址，如baseURL为'www.baidu.com',接口地址为'www.baidu.com/api/getdata',那么url里就写'api/getdata'
        url: url,
        method: type,
        data: data,
    })
}

• page/user/user.vue

<script>
import User from '~/components/User.vue'
import {getData} from '~/plugins/axios.js'

export default {
  components: {
    User
  },
  async asyncData({ params, query }) {
    var params_data = {
      out_trade_no: "1529386449613100027156",
      sign: "454C7C068BCEAA4ADC01F0AD4EDC5385",
      time: "1530110050760"
    };

    let res = await getData('common/orderquery','POST',params_data)
    return {
      response: res.data.data.information
    };
  }
}
</script>

更改端口号

nuxt 默认端口号3000
在 package.json 里添加如下代码

  "config": {
    "nuxt": {
      "host": "0.0.0.0",
      "port": "8080"
    }
  }

项目打包上线

1.删除node_moudles
2.删除package-lock.json 此文件里包含校验文件
3.npm run build
4.npm run generate
5.生成dist文件夹

nuxt 项目部署几项注意

1. node 版本>=8
2. vue 和 vue-server-renderer 版本一致