vuessr nuxt入門指南

Nuxt.js · 發表 2018-10-14 18:16:00

摘要： nuxt.js 官網地址： https://zh.nuxtjs.org/guide/installation 1.安裝 vue init nuxt-community/starter-template <project-name> cd <project-na...

nuxt.js

官網地址： ofollow,noindex" target="_blank">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 版本一致