1. 什么是服務器端渲染妄讯？
服務器端渲染：后端先調用數(shù)據(jù)庫，獲得數(shù)據(jù)之后鸟顺，將數(shù)據(jù)和頁面元素進行拼裝惦蚊，組合成完整的HTML頁面，再直接返回給瀏覽器讯嫂，以便用戶瀏覽蹦锋。
2. 什么是客戶端渲染？
客戶端渲染：數(shù)據(jù)由瀏覽器通過ajax動態(tài)取得欧芽，再通過js將數(shù)據(jù)填充到dom元素上最終展現(xiàn)到網(wǎng)頁中莉掂，這樣的過程叫做客戶端渲染。
3. 服務器端渲染 VS 客戶端渲染千扔？
（1）服務器端渲染需要消耗更多的服務器端資源（CPU憎妙、內存等）库正；
（2）客戶端渲染可以將靜態(tài)資源部署到cdn上，實現(xiàn)高并發(fā)尚氛；
（3）服務端渲染對SEO更有好诀诊。
4. Vue的SSR框架？
https://github.com/vuejs/vue-hackernews-2.0
5. Nuxt的安裝阅嘶？
npm v5.2.0引入的一條命令（npx），引入這個命令的目的是為了提升開發(fā)者使用包內提供的命令行工具的體驗载迄。
npx方式：npx create-nuxt-app my-app
使用這條命令可以避免開發(fā)者全局安裝一個腳手架讯柔。
6. Nuxt目錄結構？
--nuxt
|_ assets // 組織未編譯的靜態(tài)資源 如：less sass
|_ components // 組件目錄
|_ layouts // 組織應用的布局組件
|_ middleware // 用于存放應用的中間件 比如一些權限請求
|_ pages // 頁面
|_ plugins // 插件目錄
|_ static // 靜態(tài)文件
|_ store // vuex狀態(tài)樹文件
|_ nuxt.config.js // nuxt的配置文件
7. nuxt引入less护昧，使用less全局變量魂迄？
首先安裝依賴，執(zhí)行：npm install less less-loader @nuxtjs/style-resources sass-resources-loader --save-dev
修改nuxt.config.js文件惋耙，新增如下：
modules: [
'@nuxtjs/style-resources'
],
styleResources: {
less: [
'./assets/less/variable.less',
'./assets/less/mixin.less',
]
},
8. nuxt中引入全局css文件捣炬？
修改nuxt.config.js文件：
/*
** Global CSS
*/
css: [
'./assets/animation/animation.css' // animation.css文件將會全局引入
],
9. nuxt中路由切換的過渡效果 transition？
（1）全局過渡效果設置绽榛，在全局css文件中添加樣式：
.page-enter-active, .page-leave-active {
transition: opacity .5s;
}
.page-enter, .page-leave-active {
opacity: 0;
}
（2）給單獨的頁面設置過渡效果湿酸，則先需要加上css樣式，然后再在頁面中設置transition屬性灭美，如下所示：
.test-enter-active, .test-leave-active {
transition: opacity .5s;
}
.test-enter, .test-leave-active {
opacity: 0;
}
export default {
transition: 'test'
}
10. nuxt中融合ESLint推溃？
在實際項目開發(fā)中，經(jīng)常會使用ESLint來規(guī)范代碼格式届腐，如果在初始化Nuxt時沒有引入ESLint铁坎，那么需要后續(xù)手動引入一下，過程如下：
（1）先安裝一些依賴犁苏，執(zhí)行npm install babel-eslint eslint eslint-friendly-formatter eslint-loader eslint-plugin-vue --save-dev
（2）在package.json文件的scripts標簽中添加如下代碼：
"lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
（3）在項目的根目錄下新增.eslintrc.js和.eslintignore文件硬萍。（詳細配置省略）
（4）修改nuxt.config.js文件，新增如下（目的是擴展webpack配置）：
build: {
/*
** Run ESLint on save
*/
extend(config, { isDev, isClient }) {
if (isDev && isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/,
options: {
fix: true
}
})
}
}
}
11. nuxt中融合vant框架围详？
在實際的項目中經(jīng)常會用到一些UI框架朴乖，這里以vant舉例，介紹nuxt如何引入vant UI框架：
（1）安裝vant短曾，執(zhí)行：npm install vant --save寒砖；
（2）在plugins文件夾下建一個vant.js文件，引入vant的css文件及相關組件嫉拐，如下所示：
import Vue from 'vue'
import 'vant/lib/index.less'
import { Tabbar, TabbarItem, Toast, Button } from 'vant'
Vue.use(Tabbar).use(TabbarItem).use(Toast).use(Button)
（3）配置nuxt.config.js中的plugins哩都，如下所示：
plugins: [
{
src: '~/plugins/vant.js',
ssr: false // 因為是UI框架，所以可以不要服務端渲染
}
],
