vue获取图片，理解插槽，用iconfont加小图标，swiper实现轮播图，导航栏【诗书画唱】
目录：
例子1：开启后台服务，在App.vue中用<img src="http://127.0.0.1:9001/public/a1.png"/>之类的获取图片。
<style ></style>中如果用scoped，表示只在当前起作用的局部样式，如果直接用<style ></style>，那么通常是全局的设置。
后台中routes目录下的index.js
后台中src目录下的index.js
例子2：理解和使用插槽（个人理解：插槽也是一个组件，但是里面有
<div>
<h1>插槽演示</h1>
<slot></slot>
<slot name="header"></slot>
<h1>中间的内容</h1>
<slot name="footer"></slot>
</div>
之类的内容，后面使用的话，可以在App.vue等中
import his from '@/components/His'导入插槽组件，
//自己加的代码 END
export default {
name: 'App',
//自己加的代码 START
components: {
his
// tabbar
// My
}
//自己加的代码 END
}来声明注册组件，后面方便在HTML部分中使用
<his>
<label>诗书画唱</label>
<label slot="header">Hit.vue这个插槽组件中slot="header"（页眉）的内容</label>
<p slot="footer">Hit.vue这个插槽组件中slot="footer"（页脚）的内容</p>
</his>是使用的方法）
His.vue
App.vue
例子3：用iconfont加小图标
例子4：使用swiper这个模块（模块一般下载后都在node_modules文件夹下）来实现轮播效果，同时后台接收数据，axios，反向代理实现跨域访问，还有再加上一个导航栏
不要下载最新版本的swiper，否则分页栏和自动播放无效
npm install swiper@5.4.5 --save"
delay
反向代理实现跨越访问很简单，直接config文件夹中的index.js中加上：
proxyTable: {
//自己加的关于反向代理的部分 START
'/axs': {
target: 'http://127.0.0.1:9001',
changeOrigin: true,
pathRewrite: {//请求路径中的/axs仅用来匹配代理的target是哪个
'^/axs': ''
}
}
//自己加的关于反向代理的部分 END
},
config目录下的index.js
FilmHeader.vue
FilmSwiper.vue
Film.vue
App.vue
第一阶段
"1、npm run lint命令:
如果config/index.js文件中的useEslint被设置为true,那么在编译时会报eslint错误
修改package.json文件中的""lint""为 ""eslint --fix --ext .js,.vue src"",
运行npm run lint，会自动修复所有的eslint错误
那么再执行npm run dev时就不会报错了"
"2、npm run build打包命令：
会自动生成dist文件，将dist文件夹中的内容部署到后台程序中"
"3、配置反向代理
修改config/index.js文件中的proxyTable属性
pathRewrite的作用"
4、创建导航栏
5、配置欢迎页面
6、高亮显示
7、二级路由配置
8、路由传参和name属性传参
9、去掉路径的#
10、路由守卫:全局路由守卫和局部路由守卫
第二阶段
"1、添加sass支持：--verbose显示安装的详细信息
npm install sass-loader@7.3.1 --save-dev
npm install node-sass@4.14.1 --save-dev
在build文件夹下的webpack.base.conf.js的rules里面添加配置：
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}"
"2、选项卡沉底：App.vue中添加全局样式，Tabbar.vue中添加局部样式，
iconfont方式添加图片：
将所有图片文件放在assets/iconfont文件夹下
在main.js文件中导入图片文件
import './assets/iconfont/iconfont.css'
"
"3、搭建图片服务器（后台代码部分，将图片放在后台代码的public文件夹下）
图片路径：
https://static.maizuo.com/v5/upload/683067671e17cce7b5647693d5733ea3.jpg
配置反向代理解决跨域问题"
"4、轮播效果：
不要下载最新版本的swiper，否则分页栏和自动播放无效
npm install swiper@5.4.5 --save"
"注意：如果反向代理不可用了，可尝试清除一下浏览器的缓存历史记录
插槽slot用法：1、匿名插槽2具名插槽
异步加载数据后，放置轮播器中的图片无法拖动：
添加observer:true配置"
5、电影页面导航栏（正在热映和即将上映）的固定定位
6、显示正在热映请求数据（特殊处理设置请求头获取数据和反向代理）
7、过滤处理数据Vue.filter
引入图片的方式：
1、import方式
2、通过url路径引入
<style ></style>中如果用scoped，表示只在当前起作用的局部样式，如果直接用<style ></style>，那么通常是全局的设置。
例子1：开启后台服务，在App.vue中用<img src="http://127.0.0.1:9001/public/a1.png"/>之类的获取图片。
后台把很多图片都放在一个网页上：
前台可以获取这个网页的图片
准备开启传图片到网页的后台
cd D:\vscodeProject\vue_project_houtai_img
node index
后台中routes目录下的index.js
//routes/index.js
module.exports = function(app){
//http://127.0.0.1:9001/query
app.get('/query',function(req,res){
res.setHeader("content-type", "application/json");
res.end('{"content":"hello"}');
});
//http://127.0.0.1:9001/add
app.get('/add',function(req,res){
res.setHeader("content-type", "application/json");
res.end('["bar","foo"]');
});
}
后台中src目录下的index.js
//index.js
//引入express模块
let express = require('express');
//获取express框架配置对象app
let app = express();
app.use(express.static(__dirname + '/public'));
//导入路由配置
let routes = require('./routes/index')(app);
//http://127.0.0.1:9001/public/a1.png
app.get('/public/*', function (req, res) {
res.sendFile( __dirname + "/" + req.url );
});
//http://127.0.0.1:9001/logos
app.get('/logos',function(req,res){
res.end('["http://127.0.0.1:9001/public/a0.png","http://127.0.0.1:9001/public/a1.png","http://127.0.0.1:9001/public/a2.png","http://127.0.0.1:9001/public/a3.png"]');
});
//设置访问的端口号是9001
app.listen(9001);
//启动项目以后，在浏览器地址栏输入http://127.0.0.1:9001以后，
//就会跳转到__dirname + '/public'目录下的index.html页面去
console.log('服务器完毕，访问地址http://127.0.0.1:9001/');
前台用npm run dev开启，代码和我前面专栏展示的代码基本相同
<img src="http://127.0.0.1:9001/public/a1.png" />
例子2：理解和使用插槽（个人理解：插槽也是一个组件，但是里面有
<div>
<h1>插槽演示</h1>
<slot></slot>
<slot name="header"></slot>
<h1>中间的内容</h1>
<slot name="footer"></slot>
</div>
之类的内容，后面使用的话，可以在App.vue等中
import his from '@/components/His'导入插槽组件，
//自己加的代码 END
export default {
name: 'App',
//自己加的代码 START
components: {
his
// tabbar
// My
}
//自己加的代码 END
}来声明注册组件，后面方便在HTML部分中使用
<his>
<label>诗书画唱</label>
<label slot="header">Hit.vue这个插槽组件中slot="header"（页眉）的内容</label>
<p slot="footer">Hit.vue这个插槽组件中slot="footer"（页脚）的内容</p>
</his>是使用的方法）
His.vue
<template>
<div>
<h1>插槽演示</h1>
<slot></slot>
<slot name="header"></slot>
<h1>中间的内容</h1>
<slot name="footer"></slot>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
App.vue
<template>
<div id="app">
<!-- <img src="./assets/logo.png"> -->
<!-- 自己加的代码 START -->
<!-- <tabbar/> -->
<!-- 使用Hit.vue组件这个插槽时才用的代码 START -->
<his>
<label>诗书画唱</label>
<label slot="header">Hit.vue这个插槽组件中slot="header"（页眉）的内容</label>
<p slot="footer">Hit.vue这个插槽组件中slot="footer"（页脚）的内容</p>
</his>
<!-- 使用Hit.vue组件这个插槽时才用的代码 END -->
<img src="http://127.0.0.1:9001/public/a1.png" />
<!-- <My/> -->
<!-- 自己加的代码 END -->
<router-view/>
</div>
</template>
<script>
//自己加的代码 START
//使用Hit.vue组件这个插槽时才用的代码 START
import his from '@/components/His'
// 使用Hit.vue组件这个插槽时才用的代码 END
// import tabbar from '@/components/Tabbar'
// import my from '@/components/My'
//自己加的代码 END
export default {
name: 'App',
//自己加的代码 START
components: {
his
// tabbar
// My
}
//自己加的代码 END
}
</script>
<!--源代码 START
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
源代码 END-->
<!--自己加的SASS的代码 START-->
<style lang="scss">
* {
margin: 0;
padding: 0;
text-align: center;
}
html {
height: 100%;
}
li {
list-style: none;
}
</style>
<!--自己加的SASS的代码 END-->
http://localhost:8080/#/cinema
例子3：用iconfont加小图标
如果点击局部路由的安全验证，那么SASS部分的点“个人中心”等文字后变红色的效果是不会有的
没有通过时就没有点“个人中心”文字后变红色的效果，其他通过了，文字还是会变红的
复制粘贴iconfont文件夹到项目的src\assets目录下
file:///D:/vscodeProject/vue_project/my_vue_project1/src/assets/iconfont/demo_fontclass.html
复制后浏览器查看
自己挑自己想用的小图标
font-class引用
font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。
与unicode使用方式相比，具有如下特点：
兼容性良好，支持ie8+，及所有现代浏览器。
相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。
因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。
不过因为本质上还是使用的字体，所以多色图标还是不支持的。
使用步骤如下：
第一步：引入项目下面生成的fontclass代码：
第二步：挑选相应图标并获取类名，应用于页面：
"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。
<template>
<div>
<nav>
<ul>
<!-- <li><a href="#/film">电影</a></li>
<li><a href="#/cinema">影院</a></li>
<li><a href="#/center">个人中心</a></li> -->
<router-link to="/film" tag="li" active-class="highlight">
<i class="iconfont icon-favoritesfilling"></i>电影
</router-link>
<router-link to="/cinema" tag="li" active-class="highlight">
<i class="iconfont icon-creditlevelfilling"></i>影院
</router-link>
<router-link to="/center" tag="li" active-class="highlight">
<i class="iconfont icon-accountfilling"></i>个人中心
</router-link>
</ul>
</nav>
</div>
</template>
例子4：使用swiper这个模块（模块一般下载后都在node_modules文件夹下）来实现轮播效果，同时后台接收数据，axios，反向代理实现跨域访问，还有再加上一个导航栏
不要下载最新版本的swiper，否则分页栏和自动播放无效
npm install swiper@5.4.5 --save"
npm install swiper@5.4.5 --save
delay
反向代理实现跨越访问很简单，直接config文件夹中的index.js中加上：
proxyTable: {
//自己加的关于反向代理的部分 START
'/axs': {
target: 'http://127.0.0.1:9001',
changeOrigin: true,
pathRewrite: {//请求路径中的/axs仅用来匹配代理的target是哪个
'^/axs': ''
}
}
//自己加的关于反向代理的部分 END
},
下面再实现一个导航栏
config目录下的index.js
'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path')
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
//自己加的关于反向代理的部分 START
'/axs': {
target: 'http://127.0.0.1:9001',
changeOrigin: true,
pathRewrite: {//请求路径中的/axs仅用来匹配代理的target是哪个
'^/axs': ''
}
}
//自己加的关于反向代理的部分 END
},
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
// Use Eslint Loader?
// If true, your code will be linted during bundling and
// linting errors and warnings will be shown in the console.
useEslint: true,
// If true, eslint errors and warnings will also be shown in the error overlay
// in the browser.
showEslintErrorsInOverlay: false,
/**
* Source Maps
*/
// https://webpack.js.org/configuration/devtool/#development
devtool: 'cheap-module-eval-source-map',
// If you have problems debugging vue-files in devtools,
// set this to false - it *may* help
// https://vue-loader.vuejs.org/en/options.html#cachebusting
cacheBusting: true,
cssSourceMap: true
},
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
/**
* Source Maps
*/
productionSourceMap: true,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle Analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
}
FilmHeader.vue
<template>
<div>
<ul>
<router-link to="/film/nowplaying" tag="li" active-class="active">正在热映</router-link>
<router-link to="/film/comingsoon" tag="li" active-class="active">即将上映</router-link>
</ul>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
ul {
display: flex;
li {
flex: 1;
height: 40px;
line-height: 40px;
text-align: center;
background-color: white;
font-weight: 800;
}
}
.active {
color: red;
border-bottom: 2px solid red;
}
</style>
FilmSwiper.vue
<template>
<div class="swiper-container filmswiper">
<div class="swiper-wrapper">
<slot></slot>
</div>
<div class="swiper-pagination myswiper-pagination" ></div>
</div>
</template>
<script>
import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'
export default {
mounted () {
// 初始化swiper组件
// 注解避免lint时，报no-new的错误：
/* eslint-disable no-new */
new Swiper('.filmswiper', {
loop: true,
autoplay: {
delay: 2000
},
pagination: {
el: '.swiper-pagination'
},
// 保证异步加载的图片能够轮播自动播放
observer: true
})
}
}
</script>
<style lang="scss" scoped>
.swiper-wrapper{
text-align: center;
img {
width: 100%;
}
}
.myswiper-pagination{
text-align: right;
}
</style>
Film.vue
<!--
<template>
<div>
<h1>电影LOGO</h1>
<div>电影Tab</div>
<router-view />
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>-->
<template>
<div>
<film-swiper :key="loopList.length">
<div class="swiper-slide" v-for="data in loopList"
:key="data">
<img :src="data"/>
</div>
</film-swiper>
<film-header></film-header>
<router-view />
</div>
</template>
<script>
import filmSwiper from '@/views/Film/FilmSwiper'
import filmHeader from '@/views/Film/FilmHeader'
import axios from 'axios'
export default {
data () {
return {
loopList: []
}
},
components: {
filmSwiper,
filmHeader
},
mounted () {
axios.get('/axs/logos')
.then(res => {
this.loopList = res.data
})
}
}
</script>
<style>
</style>
App.vue
<template>
<div id="app">
<!-- <img src="./assets/logo.png"> -->
<!-- 自己加的代码 START -->
<tabbar/>
<!-- 使用Hit.vue组件这个插槽时才用的代码 START -->
<!-- <his>
<label>诗书画唱</label>
<label slot="header">Hit.vue这个插槽组件中slot="header"（页眉）的内容</label>
<p slot="footer">Hit.vue这个插槽组件中slot="footer"（页脚）的内容</p>
</his> -->
<!-- 使用Hit.vue组件这个插槽时才用的代码 END -->
<!-- <img src="http://127.0.0.1:9001/public/a1.png" /> -->
<!-- <My/> -->
<!-- 自己加的代码 END -->
<router-view/>
</div>
</template>
<script>
//自己加的代码 START
//使用Hit.vue组件这个插槽时才用的代码 START
// import his from '@/components/His'
// 使用Hit.vue组件这个插槽时才用的代码 END
import tabbar from '@/components/Tabbar'
// import my from '@/components/My'
//自己加的代码 END
export default {
name: 'App',
//自己加的代码 START
components: {
// his
tabbar
// My
}
//自己加的代码 END
}
</script>
<!--源代码 START
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
源代码 END-->
<!--自己加的SASS的代码 START-->
<style lang="scss">
* {
margin: 0;
padding: 0;
text-align: center;
}
html {
height: 100%;
}
li {
list-style: none;
}
</style>
<!--自己加的SASS的代码 END-->
运行前台和后台
http://localhost:8080/#/film/nowplaying
