官網地址:https://zh.nuxtjs.org/guide/installationjavascript
vue init nuxt-community/starter-template <project-name> cd <project-name> npm install npm run dev
<template> <section> <div>這裏是博客導航</div> <nuxt/> </section> </template>
<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>
Nuxt.js 能夠讓你在動態路由對應的頁面組件中配置一個校驗方法用於校驗動態路由參數的有效性。css
<script> export default { validate ({ params }) { // 這裏校驗必須爲數字,parems.info info是文件名字 return /^\d+$/.test(params.info) } } </script>
<nuxt-link to="/">首 頁</nuxt-link>
<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>
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
來解決:vue
module.exports = { build: { vendor: ['axios'] } }
npm run build npm run start 提示: 建議將 .nuxt 加入 .npmignore 和 .gitignore 文件中。
npm run generate
npm i element-ui -S
import Vue from 'vue' import ElementUI from 'element-ui' Vue.use(ElementUI)
plugins: [{ src: '~plugins/ElementUI', ssr: true, }], css: [ 'element-ui/lib/theme-chalk/index.css' ], build:{ vendor:['element-ui'] //防止element-ui被打包屢次 }
在plugins 文件夾中 添加 axios.jsjava
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, }) }
<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
裏添加以下代碼node
"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文件夾
1. node 版本>=8 2. vue 和 vue-server-renderer 版本一致