安裝
yarn create nuxt-app my-project
引用scss
yarn add node-sass sass-loader --save-dev
"node-sass": "^4.12.0",
"sass-loader": "^10.1.1"
- vue頁(yè)面中使用
<style lang="scss">
</style>
- 全局引用
// nuxt.config.js
css: [
'@/assets/style/index.scss' // scss文件所在路徑
],
引用高德地圖
- 引入script
// nuxt.config.js
script: [
{src: 'http://webapi.amap.com/maps?v=1.3&key=**********' }
],
- 在plugins下新建一個(gè)aMap.js
export default function MapLoader() {
return new Promise((resolve, reject) => {
// 全局對(duì)象如果存在地圖直接將結(jié)果拋出
if (window.AMap) {
resolve(window.AMap)
} else {
// 創(chuàng)建script標(biāo)簽并放入cdn鏈接
var script = document.createElement('script')
script.type = 'text/javascript'
script.async = true
script.src = 'http://webapi.amap.com/maps?v=1.3&key=your key&callback=initAMap'
script.onerror = reject
document.head.appendChild(script)
}
window.initAMap = () => {
// 注入相關(guān)插件
window.AMap.plugin(['AMap.ToolBar', 'AMap.CircleEditor', 'AMap.PolyEditor'], function () {
//異步同時(shí)加載多個(gè)插件
var toolbar = new AMap.ToolBar();
map.addControl(toolbar);
});
// 將結(jié)果拋出
resolve(window.AMap)
}
})
}
- vue頁(yè)面使用
<div id="container" class="map">
import MapLoader from '@/plugins/aMap'
mounted() {
let that = this
MapLoader().then(AMap => {
that.map = new AMap.Map('container', {
center: [121.42, 31.2371], // [經(jīng)度,緯度]
resizeEnable: true,
zoom: 17
})
// 矢量圖形
var circle = new AMap.Circle({
center: new AMap.LngLat(121.42, 31.2371), // 圓心位置
radius: 100, // 圓半徑
fillColor: '#3ebff191', // 圓形填充顏色
strokeColor: '#fff', // 描邊顏色
strokeWeight: 2// 描邊寬度
})
that.map.add(circle)
})
},
生命周期
Nuxt在vue的基礎(chǔ)上對(duì)生命周期做了擴(kuò)展：
export defualt {
middleware(){ }, // 服務(wù)端
validate(){ }, // 服務(wù)端
asyncData(){ }, // 服務(wù)端
fetch(){ }, // store數(shù)據(jù)加載
beforeCreate(){ }, // 服務(wù)端和客戶(hù)端都會(huì)執(zhí)行
created(){ }, // 服務(wù)端和客戶(hù)端都會(huì)執(zhí)行
beforeMount(){ }, //
mounted(){ } // 客戶(hù)端
}
-
asyncData(context)
如果需要服務(wù)端渲染，首次渲染時(shí)一定要使用這個(gè)方法。它可以在渲染組件前異步獲取數(shù)據(jù)羽资。asyncData傳入context參數(shù)桶唐，可以獲取一些信息摊腋，如：
export default {
asyncData(ctx){
ctx.app // 根實(shí)例
ctx.route // 路由實(shí)例
ctx.params // 路由參數(shù)
ctx.query // 路由問(wèn)號(hào)后的參數(shù)
ctx.error // 錯(cuò)誤處理方法
}
}
使用這個(gè)方法時(shí)要注意犀被，如果由于服務(wù)器或api錯(cuò)誤導(dǎo)致無(wú)法渲染厕倍，就要做好容錯(cuò)機(jī)制昏鹃，可以使用context.error方法尚氛。我們可以這樣做：
async asyncData(ctx){
try {
throw new Error()
} catch {
ctx.error( {statusCode: 500, message: '服務(wù)器開(kāi)小差了~'} ) // 這里的statusCode參數(shù)必須是http狀態(tài)碼
}
}
head()
用于更新頭部信息title/descripe等
export default {
head: {
title: '文章頁(yè)',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'keywords', name: 'keywords', content: '文章頁(yè)的關(guān)鍵字' },
{ hid: 'description', name: 'description', content: '文章頁(yè)的描述' }
],
}
}
打包發(fā)布
yarn build // 打包
yarn start // 本地運(yùn)行看是否可運(yùn)行
將package.json、.nuxt洞渤、static阅嘶、nuxt.config.js這四個(gè)文件上傳到服務(wù)器,再在服務(wù)器運(yùn)行：
yarn install
yarn start
使用二級(jí)路由時(shí)刷新路由與數(shù)據(jù)問(wèn)題
目錄結(jié)構(gòu)
//目錄結(jié)構(gòu)
pages
product
index.vue
product.vue
在product.vue里
<template>
<div>
<nuxt-child :key="key" />
</div>
</template>
<script>
export default {
computed: {
key() {
return this.$route.path + Math.random();
}
}
}
</script>
在index.vue里使用watchQuery來(lái)控制數(shù)據(jù)刷新
watchQuery: true,
watchQuery: ['id'], // 此id為路由里query里的屬性
async asyncData({ query }) {
let [productInfo, carouselList] = await Promise.all([
product_info(query),
carousel_list({ type: 1 }),
])
return {
productInfo: productInfo.data,
carouselList: carouselList.data,
}
},
切換頁(yè)面不自動(dòng)回到頂部問(wèn)題
// nuxt.config.js
router: {
scrollBehavior(to, from, savedPosition) {
return { x: 0, y: 0 }
}
}
使用pm2
安裝
npm i -g pm2
啟用nuxt項(xiàng)目（這個(gè)my-nuxt，就是項(xiàng)目名字）
pm2 start npm --name "my-nuxt" -- run start
常用pm2命令
pm2 list # 查看當(dāng)前正在運(yùn)行的進(jìn)程
pm2 start all # 啟動(dòng)所有應(yīng)用
pm2 restart all # 重啟所有應(yīng)用
pm2 stop all # 停止所有的應(yīng)用程序
pm2 delete all # 關(guān)閉并刪除所有應(yīng)用
pm2 logs # 控制臺(tái)顯示所有日志
pm2 start 0 # 啟動(dòng) id為 0的指定應(yīng)用程序
pm2 restart 0 # 重啟 id為 0的指定應(yīng)用程序
pm2 stop 0 # 停止 id為 0的指定應(yīng)用程序
pm2 delete 0 # 刪除 id為 0的指定應(yīng)用程序
pm2 logs 0 # 控制臺(tái)顯示編號(hào)為0的日志
pm2 show 0 # 查看執(zhí)行編號(hào)為0的進(jìn)程
pm2 monit jsyfShopNuxt # 監(jiān)控名稱(chēng)為jsyfShopNuxt的進(jìn)程
設(shè)置端口
// package.json
"config": {
"nuxt": {
"host": "0.0.0.0",
"port":"8136"
}
}
