nuxtjs相關環境搭建

番茄西紅柿發布于2019-08-23 14:09 / 1549人閱讀

摘要：建議版本關于全局安裝有許多坑。以及一些其它的全局樣式文件都應該在這里引入同時已經使用使用了模塊，關于相關的配置，可以在中進行配置。其他的基本在實戰中進行改裝。這節主要是配置使用的修改配置

建議版本：node8.12.0 vue2.5.17 npm6.4.1 webpack4.19.1 nuxt2.0.0

關于全局安裝webpack有許多坑。詳情可慢慢琢磨（https://blog.csdn.net/Fabulou...，https://www.cnblogs.com/lansan0701/p/7019031.html webpack有關于sass-loader）

全局安裝npx ：npm install -g npx
然后在使用nuxt-cli創建項目 npx create-nuxt-app profectname

創建完成項目運行npm run dev 報錯 index.vue 36行刪除36行空格就可以了

使用nuxt腳手架創建項目沒有處理import問題，也就是模塊只能使用require。識別不了

import引入

問題在于 npm run dev 使用的是cross-env NODE_ENV=development nodemon

server/index.js --watch server
使用了NODE_ENV node本身是不支持import export這種方法的，這里直接使用node啟動程

序，沒有經過babel處理。所以他是不會識別的

解決方法：使用babel啟動。

nodemon 熱啟動，也就是改了文件自動刷新。
使用nodemon和babel一起啟動，
給dev 后加上-exec babel-node 使用babel和他一起啟動。 
也就是變成cross-env NODE_ENV=development nodemon server/index.js --

watch server -exec babel-node (注意不僅僅是開發環境，線上環境也應該加上保證使

用babel)

這樣重新啟動項目會發現還是報錯。是因為雖然我們使用了babel node啟動，但是我們并

沒有給babel指定指令集。所以就要創建babel的配置文件。在項目文件內（如mt-app/）
創建一個配置文件 .babelrc 進入文件加上指令集。
{

"presets":["es2015"]

}

這里仍然需要給配置文件安裝一下 npm install babel-preset-es2015
（注意這里一步！！如果以上步驟做完報錯）babel-node不是內部外部命令。說明你沒有

全局安裝babel，需要全局安裝babel。（安裝教程：

https://www.jianshu.com/p/3e1...）

這樣就會成功了，說明服務端程序支持es6方式去寫了。

同時使用element-ui框架的話，應該在nuxt.config.js中引入餓了么的css文件，也就是

reset初始化css文件 "element-ui/lib/theme-chalk/reset.css" 就可以了。
以及一些其它的全局css樣式文件都應該在這里引入

同時nuxt.config.js 已經使用modules使用了axios模塊，關于axios相關的配置，可以在

axios中進行配置。（前提安裝時候選擇axios模塊）

build的配置文件。

如果我們想加一個緩存，增快他的編譯速度。可以在build中添加 cache:true 增加了編

譯速度。

其他的基本在實戰中進行改裝。
這節主要是配置： 1.使用es6的import/export 2.修改build配置

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100179.html

QuillCMS - 基于Nodejs、Nuxtjs、MongoDB構建內容管理系統

摘要：是一個基于構建的內容管理系統，結構清晰，便于拓展，極其適合前端工程師進行二次開發。技術選型的核心也就是后臺的內容管理，同時具有前臺展示需求等功能。支持服務端渲染，上手也很簡單，是基于的服務端渲染程序的不二選擇。 QuillCMS是一個基于Nodejs、Nuxtjs、MongoDB構建的內容管理系統，結構清晰，便于拓展，極其適合前端工程師進行二次開發。二話不說，先看源碼/演示站 Git...

LiangJ 2019-08-22 18:40 評論0 收藏0
服務端預渲染之Nuxt - （爬坑篇）

摘要：根據官方文檔在文件下面創建兩個文件，分別是和。在中可以直接使用，并且是默認啟用命名空間的。在中觸發熱更新。使用中間件中間件沒有給出具體的使用文檔，而是放入了一個編輯器。對配置有興趣的可以在官方文檔找到渲染文檔。 Nuxt是解決SEO的比較常用的解決方案，隨著Nuxt也有很多坑，每當突破一個小技術點的時候，都有很大的成就感，在這段時間里著實讓我痛并快樂著。在這里根據個人學習情況，所踩過的...

cucumber 2019-08-23 17:02 評論0 收藏0
Service worker (@nuxtjs/workbox) 采坑記

摘要：實際上是指的為簡化開發而開源的第三方庫。首先安裝依賴然后再配置文件中啟用就完成了使用采坑官網上線后發現，啟用后不能播放視頻了。把當成了失敗請求，導致請求視頻文件失敗。 PWA（Progressive Web App）是前端的大趨勢，它能極大的加快前端頁面的加載速度，得到近乎原生 app 的展示效果（其實難說）。PWA 其實是多種前端技術的組合，其中最重要的一個技術就是 service ...

ISherry 2019-08-23 12:04 評論0 收藏0
服務端預渲染之Nuxt(路由篇)

摘要：前面既然說到了會把文件夾下面的所有文件編譯成路由，那么子路由需要使用文件夾嵌套才行。客戶端首次訪問的頁面會在服務端做輸出，一旦渲染完成之后，則不會再在服務端輸出，則會一直在客戶端進行輸出了。服務端預渲染之Nuxt - 使用現在大多數開發都是基于Vue或者React開發的，能夠達到快速開發的效果，也有一些不足的地方,Nuxt能夠在服務端做出渲染，然后讓搜索引擎在爬取數據的時候能夠讀到...

yuanxin 2019-08-23 16:48 評論0 收藏0