一啼肩、前言
????最近在慕課網(wǎng)上學(xué)習(xí)Vue全家桶+SSR+Koa2全棧開發(fā)美團(tuán)網(wǎng)
，學(xué)到不少好東西笛洛，為了能夠?qū)W以致用况木，就自己私下用學(xué)到的東西重構(gòu)一下公司最近開發(fā)電子勞動和同項(xiàng)目畅蹂，在此做一些筆記健无。
二、創(chuàng)建項(xiàng)目
????在這個項(xiàng)目中我用的是vue-cli3液斜，所以要嚴(yán)格按照vue-cli官網(wǎng)搭建開發(fā)環(huán)境累贤，然后在nuxtJS創(chuàng)建一個工程目錄叠穆。
運(yùn)行npm run dev發(fā)現(xiàn)根本打不開頁面，頁面出現(xiàn)HTMLElement is not define在nuxt.js中臼膏，這該如何解決呢硼被，在網(wǎng)上搜索了一下，有大神給出方案讶请，親測有效
方法一
global.HTMLElement = typeof window === 'undefined' ? Object : window.HTMLElement
export default {
// ...
}
方法二
import Vue from 'vue'
export default () => {
if (process.browser) {
//console.log('瀏覽器端渲染');
Vue.use(require('element-ui'),require('element-ui/lib/locale/lang/en'))
} else {
//console.log("非瀏覽器端渲染");
}
}
方法三
plugins: [
// '@/plugins/element-ui',
{ src: '@/plugins/element-ui', ssr: false}
],
此時再運(yùn)行項(xiàng)目祷嘶，發(fā)現(xiàn)頁面正常打開
三、import方法導(dǎo)入
????打開server文件下的index.js文件夺溢，發(fā)現(xiàn)引用第三方庫，都是用的reuire方法
const Koa = require('koa')
const consola = require('consola')
const { Nuxt, Builder } = require('nuxt')
現(xiàn)在我們將上面的代碼轉(zhuǎn)換成用es6的import語法烛谊，將第三庫引用進(jìn)來
import Koa from 'koa'
const consola = require('consola')
const { Nuxt, Builder } = require('nuxt')
發(fā)現(xiàn)他并不支持import語法风响，那么如何解決這個問題呢
（1）打開package.json文件
變成
"scripts": {
"dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server --exec babel-node",
"build": "nuxt build",
"start": "cross-env NODE_ENV=production node server/index.js --exec babel-node",
"generate": "nuxt generate"
},
（2）在根目錄下闖將一個.babelrc文件，如下圖
打開該文件丹禀，輸入以下內(nèi)容
{
"presets": ["es2015"]
}
（3）在終端中輸入npm install babel-preset-es2015安裝這個組件状勤，最后重新啟動程序，發(fā)現(xiàn)程序正常顯示了双泪，項(xiàng)目也支持import的es6的語法了持搜。
????前期工作到這兒就結(jié)束了，我們也創(chuàng)建一個完整的項(xiàng)目了焙矛，在此記錄一下葫盼。
