vue-element-admin
1、簡介
vue-element-admin是基於element-ui 的一套后台管理系統集成方案。
功能：https://panjiachen.github.io/vue-element-admin-site/zh/guide/#功能
GitHub地址：https://github.com/PanJiaChen/vue-element-admin
項目在線預覽：https://panjiachen.gitee.io/vue-element-admin
2、安裝
# 解壓壓縮包
# 進入目錄
cd vue-element-admin-master
# 安裝依賴
npm install
# 啟動。執行后，瀏覽器自動彈出並訪問http://localhost:9527/
npm run dev
vue-admin-template
1、簡介
vueAdmin-template是基於vue-element-admin的一套后台管理系統基礎模板（最少精簡版），可作為模板進行二次開發。
GitHub地址：https://github.com/PanJiaChen/vue-admin-template
建議：你可以在 vue-admin-template 的基礎上進行二次開發，把 vue-element-admin當做工具箱，想要什么功能或者組件就去 vue-element-admin 那里復制過來。
2、安裝
# 解壓壓縮包
# 進入目錄
cd vue-admin-template-master
# 安裝依賴
npm install
# 啟動。執行后，瀏覽器自動彈出並訪問http://localhost:9528/
npm run dev
富文本編輯器Tinymce
參考
https://panjiachen.gitee.io/vue-element-admin/#/components/tinymce
https://panjiachen.gitee.io/vue-element-admin/#/example/create
vue-admin-template整合Tinymce富文本編輯器
Tinymce是一個傳統javascript插件，默認不能用於Vue.js因此需要做一些特殊的整合步驟
1、復制腳本庫
將腳本庫復制到項目的static目錄下（在vue-element-admin-master的static路徑下）
2、配置html變量
在 build/webpack.dev.conf.js 中添加配置
使在html頁面中可是使用這里定義的BASE_URL變量
new HtmlWebpackPlugin({
......,
templateParameters: {
BASE_URL: config.dev.assetsPublicPath + config.dev.assetsSubDirectory
}
})
3、引入js腳本
在index.html 中引入js腳本
<script src=<%= BASE_URL %>/tinymce4.7.5/tinymce.min.js></script>
<script src=<%= BASE_URL %>/tinymce4.7.5/langs/zh_CN.js></script>
組件引入
為了讓Tinymce能用於Vue.js項目，vue-element-admin-master對Tinymce進行了封裝，下面我們將它引入到我們的編輯頁面
1、復制組件
在vue-element-admin的src/components/Tinymce
2、引入組件
課程信息組件中引入 Tinymce
import Tinymce from '@/components/Tinymce'
export default {
components: { Tinymce },
......
}
3、組件模板
<!-- 課程簡介-->
<el-form-item label="課程簡介">
<tinymce :height="300" v-model="courseInfo.description"/>
</el-form-item>
4、組件樣式
在.vue文件的最后添加如下代碼，調整上傳圖片按鈕的高度
<style scoped>
.tinymce-container {
line-height: 29px;
}
</style>
5、圖片的base64編碼
Tinymce中的圖片上傳功能直接存儲的是圖片的base64編碼，因此無需圖片服務器
服務端渲染技術NUXT
一、什么是服務端渲染
服務端渲染又稱SSR (Server Side Render)是在服務端完成頁面的內容，而不是在客戶端通過AJAX獲取數據。
服務器端渲染(SSR)的優勢主要在於：更好的 SEO，由於搜索引擎爬蟲抓取工具可以直接查看完全渲染的頁面。
如果你的應用程序初始展示 loading 菊花圖，然后通過 Ajax 獲取內容，抓取工具並不會等待異步完成后再進行頁面內容的抓取。也就是說，如果 SEO 對你的站點至關重要，而你的頁面又是異步獲取內容，則你可能需要服務器端渲染(SSR)解決此問題。
另外，使用服務器端渲染，我們可以獲得更快的內容到達時間(time-to-content)，無需等待所有的 JavaScript 都完成下載並執行，產生更好的用戶體驗，對於那些「內容到達時間(time-to-content)與轉化率直接相關」的應用程序而言，服務器端渲染(SSR)至關重要。
二、NUXT環境初始化
1、下載壓縮包
https://github.com/nuxt-community/starter-template/archive/master.zip
2、解壓
將template中的內容復制到項目路徑
4、修改package.json
name、description、author（必須修改這里，否則項目無法安裝）
"name": "demo",
"version": "1.0.0",
"description": "谷粒學院",
"author": "Helen <123123@qq.com>",
5、修改nuxt.config.js
修改title: '{{ name }}'、content: '{{escape description }}'
這里的設置最后會顯示在頁面標題欄和meta數據中
head: {
title: '谷粒學院 - Java視頻|HTML5視頻|前端視頻|Python視頻|大數據視頻-自學拿1萬+月薪的IT在線視頻課程，谷粉力挺，老學員為你推薦',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'keywords', name: 'keywords', content: '谷粒學院,IT在線視頻教程,Java視頻,HTML5視頻,前端視頻,Python視頻,大數據視頻' },
{ hid: 'description', name: 'description', content: '谷粒學院是國內領先的IT在線視頻學習平台、職業教育平台。截止目前,谷粒學院線上、線下學習人次數以萬計！會同上百個知名開發團隊聯合制定的Java、HTML5前端、大數據、Python等視頻課程，被廣大學習者及IT工程師譽為：業界最適合自學、代碼量最大、案例最多、實戰性最強、技術最前沿的IT系列視頻課程！' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
6、在命令提示終端中進入項目目錄
7、安裝依賴
npm install
8、測試運行
npm run dev
9、NUXT目錄結構
（1）資源目錄 assets
用於組織未編譯的靜態資源如 LESS、SASS 或 JavaScript。
（2）組件目錄 components
用於組織應用的 Vue.js 組件。Nuxt.js 不會擴展增強該目錄下 Vue.js 組件，即這些組件不會像頁面組件那樣有 asyncData 方法的特性。
（3）布局目錄 layouts
用於組織應用的布局組件。
（4）頁面目錄 pages
用於組織應用的路由及視圖。Nuxt.js 框架讀取該目錄下所有的 .vue 文件並自動生成對應的路由配置。
（5）插件目錄 plugins
用於組織那些需要在 根vue.js應用 實例化之前需要運行的 Javascript 插件。
（6）nuxt.config.js 文件
nuxt.config.js 文件用於組織Nuxt.js 應用的個性化配置，以便覆蓋默認配置。
三、頁面布局
1、復制靜態資源
將靜態css、img、js、photo目錄拷貝至assets目錄下
將favicon.ico復制到static目錄下
2、定義布局
我們可以把頁頭和頁尾提取出來，形成布局頁
修改layouts目錄下default.vue，從靜態頁面中復制首頁，修改了原始文件中的資源路徑為~/assets/，將主內容區域的內容替換成<nuxt />
內容如下：
<template>
<div>
<!-- 頁頭部分 -->
<!-- 內容的區域 -->
<nuxt/>
<!-- 頁尾部分 -->
</div>
</template>
四、幻燈片(輪播圖)插件
1、安裝插件
npm install vue-awesome-swiper
2、配置插件
在 plugins 文件夾下新建文件 nuxt-swiper-plugin.js，內容是
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper/dist/ssr'
Vue.use(VueAwesomeSwiper)
在 nuxt.config.js 文件中配置插件
將 plugins 和 css節點 復制到 module.exports節點下
module.exports = {
// some nuxt config...
plugins: [
{ src: '~/plugins/nuxt-swiper-plugin.js', ssr: false }
],
css: [
'swiper/dist/css/swiper.css'
]
}
幻燈片插件使用
<!-- 幻燈片 開始 -->
<div v-swiper:mySwiper="swiperOption">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background: #040B1B;">
<a target="_blank" href="/">
<img src="~/assets/photo/banner/1525939573202.jpg" alt="首頁banner">
</a>
</div>
<div class="swiper-slide" style="background: #040B1B;">
<a target="_blank" href="/">
<img src="~/assets/photo/banner/1525939573202.jpg" alt="首頁banner">
</a>
</div>
</div>
<div class="swiper-pagination swiper-pagination-white"></div>
<div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
<div class="swiper-button-next swiper-button-white" slot="button-next"></div>
</div>
<!-- 幻燈片 結束 -->
script
<script>
export default {
data () {
return {
swiperOption: {
//配置分頁
pagination: {
el: '.swiper-pagination'//分頁的dom節點
},
//配置導航
navigation: {
nextEl: '.swiper-button-next',//下一頁dom節點
prevEl: '.swiper-button-prev'//前一頁dom節點
}
}
}
}
}
</script>
五、路由
1、固定路由
（1）使用router-link構建路由，地址是/course
<router-link to="/course" tag="li" active-class="current">
<a>課程</a>
</router-link>
（2）在page目錄創建文件夾course ，在course目錄創建index.vue
<template>
<div>
課程列表
</div>
</template>
點擊導航，測試路由
2、動態路由
如果我們需要根據id查詢一條記錄，就需要使用動態路由。NUXT的動態路由是以下划線開頭的vue文件，參數名為下划線后邊的文件名
在pages下的course目錄下創建_id.vue
<template>
<div>
講師詳情
</div>
</template>
六、封裝axios
我們可以參考guli-admin將axios操作封裝起來
下載axios ，使用命令 npm install axios
創建utils文件夾，utils下創建request.js
例如：
import axios from 'axios'
import cookie from 'js-cookie'
// 創建axios實例
const service = axios.create({
baseURL: 'http://localhost:9001', // api的base_url
timeout: 20000 // 請求超時時間
})
//http request 攔截器
service.interceptors.request.use(
config => {
//判斷cookie里面是否有名稱token數據
if(cookie.get('token')){
config.headers['token'] = cookie.get('token');
}
return config
},
err =>{
return Promise.reject(err);
}
)
export default service