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
鲁公网安备 37010402000926号