一、安裝nuxt:
$ npm install --save nuxt (如果 vue-cli 沒有安裝, 需先通過 npm install -g vue-cli 來安裝)
二、創建nuxt項目：
npx create-nuxt-app <項目名> （用yarn：yarn create nuxt-app <項目名>）
創建會有一些選擇，可以根據自己項目需要進行選擇，因為我的項目用到了elementUi,axios,eslint，所有選了這些，其他2項都默認，這樣會自動安裝我選好的依賴，如果沒選后期自己下依賴也可以
選完后就創建好了一個nuxt項目，目錄結構是這樣的
├── assets // 資源文件。用於組織未編譯的靜態資源入LESS、SASS 或 JavaScript
│ └── logo.jpg // 默認logo圖片
├── components // 組件。用於自己編寫的Vue組件，比如滾動組件，日歷組件，分頁組件
│ └── AppLogo.vue // 默認logo組件
├── layouts // 布局。頁面都需要有一個布局，默認為 default。它規定了一個頁面如何布局頁面。所有頁面都會加載在布局頁面中的 <nuxt /> 標簽中。
│ └── default.vue // 默認模板頁面，類似mvc中的layout
├── middleware // 中間件。存放中間件。可以在頁面中調用： middleware: 'middlewareName' 。
├── pages // 頁面。一個 vue 文件即為一個頁面。
│ └── index.vue // 默認首頁面
├── plugins // 用於存放JavaScript插件的地方
│ └── element-ui.js // 上邊我們安裝的UI框架
├── static // 用於存放靜態資源文件，比如圖片，此類文件不會被 Nuxt.js 調用 Webpack 進行構建編譯處理。 服務器啟動的時候，該目錄下的文件會映射至應用的根路徑 / 下。
├── store // 用於組織應用的Vuex 狀態管理。
├── .editorconfig // 開發工具格式配置
├── .eslintrc.js // ESLint的配置文件，用於檢查代碼格式
├── .gitignore // 配置git不上傳的文件
├── nuxt.config.js // 用於組織Nuxt.js應用的個性化配置，比如網站title，已便覆蓋默認配置
├── package.json // npm包管理配置文件
└──
README.md // 說明文檔
這時候可以用npm run dev 啟動了，細心的同學會發現沒有router文件，確實nuxt不需要自己配置路由文件，pages中的文件名就是你的路由，執行完npm run dev會發現目錄會多一個.nuxt 文件，
這是程序啟動自動生成的，里面會有一個router.js,就是自動生成的路由，目錄結構是這樣的
三、開始改造
1、把我們原vue項目下的src,直接拷貝到現在的nuxt根目錄下（src和pages一級），把根目錄下的components,layouts,page,store全部刪掉（為了方便區分，不刪也可以），
在nuxt.config.js配置 srcDir:'src/' 重定向默認目錄,這樣就把以前默認根目錄改成src目錄，src/pages里面存放的是所有的vue文件，index.vue是默認展示頁
把plugins放到我們src目錄下（因為plugins要存放js插件），把我們src下的views改為pages
2、把原vue項目的app.vue中的代碼拷貝放到layout/defalut.vue中
3、原vue項目的main.js放到plugins下，然后在nuxt.config.js中引入，這是我用到的所有的js插件，如果你還有其他引用也要放到這里引入
4、如果原項目mian.js里面有引入css文件一定要提出來，把全局引入的css都統一放到src/style目錄下，然后在nuxt.config.js中引入
5、配置生產模式和開發模式請求不同地址
在根目錄創建env.js 內容
module.exports = {
dev: {
MODE: 'development',
ENV_API: 'https://base.exploring.cn/test-jzm-server' //測試服務器地址
},
pro: {
MODE: 'production',
ENV_API: 'https://base.exploring.cn/test-jzm-server' // 正式服務器地址
}
}
在nuxt.config.js 中引入env.js 然后配置env
const env = require('./env’)
module.exports = { env: {
BASE_API: env[process.env.MODE].ENV_API
}
這樣配置完就axios請求生產和開發地址就配置好了，這個時候通過npm run dev 就可以看到你的項目了（如果你原vue 項目的路由和文件名不同名的時候就要修改一下有跳轉路由的地方就可以）
6、如果項目用引入svg文件的還需要在nuxt.config.js中配置
build: {
const svgRule = config.module.rules.find(rule => rule.test.test(".svg"));
svgRule.exclude = [path.resolve(__dirname, "./src/assets/svg")];
// Includes /assets/icons/svg for svg-sprite-loader
config.module.rules.push({
test: /\.svg$/,
include: [path.resolve(__dirname, "./src/assets/svg")],
loader: "svg-sprite-loader",
options: {
symbolId: "icon-[name]"
}
});
return configs
}
這個時候項目便可以正常運行起來了，你會發現跟我們原來vue項目還是差不都，打包的時候並沒有把動態數據靜態化
這個時候就需要asyncData做服務端提前渲染
7、asyncData渲染組件（僅限於pages下的頁面，components下的組件不可以用）之前異步獲取數據
async asyncData() {
const getBannersres = await getBanners()
const bannerLists = getBannersres.data.items
const getHotListres = await getList({isHot:true,sort:'hot_order_no',order:'asc',limit:5})
var hotLists = getHotListres.data.data.items
const hotTotal = getHotListres.data.data.total
const getRouterListres = await getList({page: 1, limit: 5, menuId: 2, sort: 'order_no', order: 'asc'})
const routerLists = getRouterListres.data.data.items
const getThemeListres = await getList({page: 1, limit: 5, themeId: -1, sort: 'order_no', order: 'asc'})
const themeLists = getThemeListres.data.data.items
const getAddressMenures = await getAddressMenu()
const addressLists = getAddressMenures.data.data.items
return {
bannerLists,
hotLists,
hotTotal,
routerLists,
themeLists,
addressLists
}
}
asyncData 方法是在組件初始化之前調用的，所以this關鍵字不能用 ，
我這里的getBanners是提前引入的接口請求，然后拿到的值通過return 返回，return返回的變量都要和頁面要用的變量名（data定義過）一致，這樣就可以在頁面加之前把動態數據拿過來，並進行渲染了，這時候右鍵查看源碼就可以看到動態數據了
8、components組件想提前加載數據可以用vueX
比如菜單這樣的組件是需要提前加載數據利於網頁爬蟲去爬這些鏈接，asyncData又不能在這里用，這個時候就可以用vuex了
你的請求要寫在actions 中的nuxtServerInit里，這里可以參考
https://zh.nuxtjs.org/guide/vuex-store，寫的很詳細就不多闡述了
不需要安裝vuex,因為nuxtjs已經提供了
import { getMenus } from '@/api'
export const state=()=>({
menus: []
})
export const mutations= {
setMeuns (state, value) {
state.menus = value
}
}
export const actions= {
async nuxtServerInit({ commit}, { req }) {
const getMenusres = await getMenus()
let tempMenus = [],menus = getMenusres.data.data.items;
menus.forEach(item => {
if (!item.parentid) {
tempMenus.push(item)
}
})
commit("setMeuns", tempMenus);
}
vue頁面使用直接寫在computed里即可
computed:{
menus(){
console.log(this.$store.state.menus)
return this.$store.state.menus
}
},
8、部署發布
如果是多環境打包的話要在package.json中配置一下，我多配置了一個測試環境，如果你有更多可以多配，打包時候可以npm run generate:xx （xx：是你配置的環境名，如果生產環境可以不加:xx）
Nuxt.js 提供了兩種發布部署應用的方式：服務端渲染應用部署 和 靜態應用部署（可以參考
https://zh.nuxtjs.org/guide/commands）
我使用的是靜態應用部署，因為這個
同時具有預渲染所有頁面的優勢，並具有較高的SEO優化和頁面加載能力
打包完會在根目錄生成一個dist 文件，里面是生成的
靜態目錄和文件
9、配置mate標簽
在nuxt.config.js中配置titile 和mate
head: {
title: ‘your title',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ name: 'keywords', content: ‘content'},
{ hid: 'description', name: 'description', content: 'content' },
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
這樣基本配置就改造完畢，我們是門戶網站沒有使用動態路由，如果你的是動態路由請參考其他動態路由配置
nuxt.js 是項目改造現學現用的，理解不透徹，有寫的不對的地方歡迎留言指正。