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 版本一致