起步：
1、全局安裝vue-cli：npm install vue-cli -g
2、初始化nuxt：vue init nuxt/starter（先進入項目目錄文件夾）
3、安裝依賴：npm install
4、開發(fā)環(huán)境啟動項目：npm run dev
5、開發(fā)完成后打包代碼：npm run build
6、啟動服務：npm start
一、Nuxt常用配置項
1、配置IP和端口：
開發(fā)中經(jīng)常會遇到端口被占用或者指定IP的情況。我們需要在根目錄下的package.json里對config項進行配置。比如現(xiàn)在我們想把IP配置成127.0.0.1，端口設置1818
公司主營業(yè)務：成都網(wǎng)站建設、網(wǎng)站制作、移動網(wǎng)站開發(fā)等業(yè)務。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)建站是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)建站推出陽城免費做網(wǎng)站回饋大家。
重慶分公司
重慶分公司
//package.json
"config":{
"nuxt":{
"host":"127.0.0.1",
"port":"1818"
}
},配置好后，我們在終端中輸入npm run dev，然后你會看到服務地址改為了127.0.0.1:1818.
2、配置全局CSS
在nuxt.config.js里進行操作：
//assets/css/normailze.css
html{
color:red;
}
//nuxt.config.js
css:['~assets/css/normailze.css'], PS：~表示nuxt項目根目錄
二、Nuxt的路由配置和參數(shù)傳遞
基本路由：
Nuxt根據(jù)文件目錄結構，自動給我們配置好了路由
所以我們如果需要進行頁面跳轉，直接在pages目錄下，新建對應的頁面文件夾，比如about文件夾，然后在下面建立index.vue文件，這樣訪問 http://localhost:3000/about，
就可以訪問到下面的頁面了，比如：
路由跳轉不要使用a標簽，因為這樣會有頁面的刷新跳轉
使用
//index.vue
About Index page
HOME HOME ABOUT NEWS
//news/index.vue
News
- userId:{{$route.params.newsId}}
home
三、Nuxt的動態(tài)路由和參數(shù)校驗
動態(tài)路由：即帶參數(shù)的路由，模板結構都是一樣的，根據(jù)參數(shù)的不同，顯示不同的內容
動態(tài)路由命名都以 _xx 為前綴，比如_id.vue，接收使用：$route.params.id來接收參數(shù)。
這里的id和動態(tài)路由的名稱一樣
動態(tài)參數(shù)校驗：
進入一個頁面，對參數(shù)傳遞的正確性校驗是必須的，Nuxt.js也貼心的為我們準備了校驗方法validate( )。
//pages/news/_id.vue
export default {
validate ({ params }) {
// Must be a number
return /^\d+$/.test(params.id)
}
}我們使用了validate方法，并把params傳遞進去，然后用正則進行了校驗，如果正則返回了true正常進入頁面，如果返回false進入404頁面( nuxt已經(jīng)幫我們默認建立好了 )。
四、Nuxt的路由動畫效果
樣式寫在全局樣式：normailze.css里面
1、全局路由動畫
.page-enter-active,.page-leave-active{ transition:opacity 2s }
.page-enter,.page-leave-active{ opacity:0 }
2、單頁路由動畫
.test-enter-active, .test-leave-active {
transition: all 2s;
font-size:12px;
}
.test-enter, .test-leave-active {
opacity: 0;
font-size:40px;
}
然后在about/index.vue組件中設置
export default {
transition:'test'
}
這時候在進入about頁面就有了頁面的切換獨特動效了。
五、Nuxt的默認模版和默認布局
目的：復用公共元素，比如網(wǎng)頁標題等等
1、默認模板，可以定義包括head在內的一些公用的元素，命名為：app.html，一個完整的html文件
在根目錄下創(chuàng)建一個app.html就可以實現(xiàn)默認模板的創(chuàng)建
{{ HEAD }}
每個頁面都會顯示這個內容，而且是在pages每個組件內容的上面顯示
{{ APP }}
這里的{{ HEAD }}讀取的是nuxt.config.js里的head信息，{{APP}} 就是我們寫的pages文件夾下的主體頁面了，比如about、news等等。需要注意的是HEAD和APP都需要大寫，如果小寫會報錯的。
修改刪除app.html文件都需要重啟服務
2、默認布局，這里是default.vue，一個vue組件，只可定制template里面的內容
默認布局主要針對于頁面的統(tǒng)一布局使用。它在位置根目錄下的layouts/default.vue。需要注意的是在默認布局里不要加入頭部信息，只是關于標簽下的內容統(tǒng)一訂制。
JSPang.com 技術胖的博客
這里的
修改后不需要重啟服務
總結：要區(qū)分默認模版和默認布局的區(qū)別，模版可以定制很多頭部信息，包括IE版本的判斷；布局只能定制里的內容，跟布局有關系。在工作中修改時要看情況來編寫代碼。
注意：工作中一般都是定義默認布局
六、Nuxt的錯誤頁面和個性meta設置
當用戶輸入路由錯誤的時候，我們需要給他一個明確的指引，所以說在應用程序開發(fā)中404頁面是必不可少的。Nuxt.js支持直接在默認布局文件夾里建立錯誤頁面。
1、建立錯誤頁面
在根目錄下的layouts文件夾下建立一個error.vue文件，它相當于一個顯示應用錯誤的組件
代碼用v-if進行判斷錯誤類型，需要注意的是這個錯誤是你需要在
注意：為了避免子組件中的meta標簽不能正確覆蓋父組件中相同的標簽而產(chǎn)生重復的現(xiàn)象，建議利用 hid 鍵為meta標簽配一個唯一的標識編號。
七、asyncData異步方法獲取數(shù)據(jù)
在項目中需要在初始化頁面前先得到數(shù)據(jù)，也就是我們常說的異步請求數(shù)據(jù)
1、普通vue方式異步獲取遠程數(shù)據(jù)
- 姓名：{{info.name}}
- 年齡：{{info.age}}
- 興趣：{{info.interest}}
2、使用nuxt封裝的anyncData方法，直接在data下面書寫anyncData方法，不用寫在methods里面
- 姓名：{{info.name}}
- 年齡：{{info.age}}
- 興趣：{{info.interest}}
八、靜態(tài)資源和打包
1、圖片、樣式路徑均使用~，這種引用方法是不用估計相對路徑的，“~”就相當于定位到了項目根目錄
2、打包靜態(tài)HTML并運行
npm run generate，生成dist文件夾，在dist文件夾下使用命令：live-server即可查看打包后的效果
九、博文搬錄：
1、快速模板
在已經(jīng)安裝了 vue-cli 的前提下，可以快速創(chuàng)建一個 nuxt 的項目模板vue init nuxt-community/starter-template MyProject
// 其中 MyProject 是項目文件夾名稱，可自定義
通過 npm install（似乎用 yarn install 更順利）安裝依賴之后，可以直接 npm run dev 在開發(fā)環(huán)境啟動項目
默認啟動的地址為 http://localhost:3000/，可以在 package.json 中添加以下配置來修改主機端口號
"config": {
"nuxt": {
"host": "0.0.0.0",
"port": "7788"
}
},開發(fā)完成后執(zhí)行 npm run build 打包代碼，最后 npm start 啟動服務
2、重要目錄
生成的項目目錄如下
大部分文件夾名稱都是 nuxt 默認保留的，不可修改
其中比較關鍵的目錄有三個：
components 組件目錄：
一般用來存放非頁面級別的組件，如 header、footer 等公共組件
該目錄下的組件具有常規(guī) vue 組件的方法和特性，不會被 nuxt.js 擴展特性
layouts 布局目錄
可以修改該目錄下的 default.vue 來修改默認布局
其中
此外還可以在目錄下新增 error.vue 作為錯誤頁面，具體的寫法可以參考官方文檔
3、pages 頁面目錄
用于存放頁面級別的組件，nuxt 會根據(jù)該目錄下的頁面結構生成路由
比如上圖中的頁面結構，會生成這樣的路由配置：
router: {
routes: [
{
name: 'index',
path: '/',
component: 'pages/index.vue'
},
{
name: 'about',
path: '/about',
component: 'pages/about.vue'
},
{
name: 'cla***oom',
path: '/cla***oom',
component: 'pages/cla***oom.vue',
children: [
{
path: 'student',
component: 'pages/cla***oom/student.vue',
name: 'student'
},
{ //定義帶參數(shù)的動態(tài)路由，需要創(chuàng)建對應的以下劃線作為前綴的 Vue 文件或目錄
path: ':id',
component: 'pages/cla***oom/_id.vue',
name: 'cla***oom-id'
}
]
}
]
}此外，該目錄下的 vue 組件還具備一些 Nuxt.js 提供的特殊功能特性
其中 asyncData 方法比較常用，支持異步數(shù)據(jù)處理
這個方法會在頁面組件每次加載之前被調用，然后獲取數(shù)據(jù)并返回給當前組件
asyncData ({ params, error }) {
return axios.get(`api/posts/${params.id}`)
.then((res) => {
return { name: res.data.name}
})
.catch((e) => {
error({ statusCode: 404, message: 'not found' })
})
}asyncData 方法的第一個參數(shù)為上下文對象 context，具體屬性可以查看這里
由于asyncData方法是在組件初始化前被調用的，所以在方法內是沒有辦法通過 this 來引用組件的實例對象
4、使用插件
如果項目中還需要引入其他的第三方插件，可以直接在頁面中引入，這樣在打包的時候，會將插件打包到頁面對應的 js 里面
但要是別的頁面也引入了同樣的插件，就會重復打包。如果沒有需要分頁打包的需求，這時候可以配置 plugins
以 element-ui 為例，在安裝了 element-ui 之后，在 plugins 目錄下創(chuàng)建 elementUI.js
然后在根目錄的 nuxt.config.js 中添加配置項 build.vendor 和 plugins
build: {
vendor: ['~/plugins/elementUI.js']
},
plugins: [
{src: '~/plugins/elementUI.js'},
]這里的 plugins 屬性用來配置 vue.js 插件，也就是可以用 Vue.user() 方法的插件
默認只需要 src 屬性，另外還可以配置 ***: false，讓該文件只在客戶端被打包引入
如果是像 axios 這種第三方（不能 use）插件，只需要在 plugins 目錄下創(chuàng)建 axios.js
// axios.js
import Vue from 'vue'
import axios from 'axios'
const service = axios.create({
baseURL: '/api'
})
Vue.prototype.$ajax = axios
export default service然后在 build.vendor 中添加配置（不需要配置 plugins）
build: {
vendor: ['~/plugins/axios.js']
}這樣在打包的時候，就會把 axios 打包到 vendor.js 中
5、Vuex 狀態(tài)樹
如果在 store 目錄下創(chuàng)建了 index.js，nuxt.js 會根據(jù)該目錄下的文件創(chuàng)建 Vuex 狀態(tài)樹
// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import Axios from '~/plugins/axios.js';
Vue.use(Vuex)
const store = () => new Vuex.Store({
state: {
author: 'WiseWrong',
info: ''
},
mutations: {
setInfo (state, val) {
state.info = val
}
},
actions: {
loadAboutMeInfo ({commit, state}) {
return Axios.get(`/about`)
.then(res => {
console.log('ajax is success')
console.log(res.data.info)
commit('setInfo', res.data.info)
})
.catch(err => {
console.log('error')
})
}
}
})
export default store// Nuxt.js 內置引用了 vuex 模塊，不需要額外安裝
上面的代碼中，我在 actions 中寫了一個 loadAboutMeInfo() 方法，用來請求 /api/about 接口
然后在 about.vue 頁面中調用
// about.vue
{{$store.state.info}}
成果演示：
