vue獲取圖片，理解插槽，用iconfont加小圖標，swiper實現(xiàn)輪播圖，導航欄【詩書畫唱】
目錄：
例子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>中間的內(nèi)容</h1>
??????<slot?name="footer"></slot>
??</div>
之類的內(nèi)容，后面使用的話，可以在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"（頁眉）的內(nèi)容</label>
??????<p?slot="footer">Hit.vue這個插槽組件中slot="footer"（頁腳）的內(nèi)容</p>
??????
????</his>是使用的方法）
His.vue
App.vue
例子3：用iconfont加小圖標
例子4：使用swiper這個模塊（模塊一般下載后都在node_modules文件夾下）來實現(xiàn)輪播效果，同時后臺接收數(shù)據(jù)，axios，反向代理實現(xiàn)跨域訪問，還有再加上一個導航欄
不要下載最新版本的swiper，否則分頁欄和自動播放無效
npm install swiper@5.4.5 --save"
delay
反向代理實現(xiàn)跨越訪問很簡單，直接config文件夾中的index.js中加上：
?proxyTable:?{
//自己加的關(guān)于反向代理的部分?START
'/axs':?{
??target:?'http://127.0.0.1:9001',
??changeOrigin:?true,
??pathRewrite:?{//請求路徑中的/axs僅用來匹配代理的target是哪個
????'^/axs':?''
??}
}
//自己加的關(guān)于反向代理的部分?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錯誤
那么再執(zhí)行npm run dev時就不會報錯了"
"2、npm run build打包命令：
會自動生成dist文件，將dist文件夾中的內(nèi)容部署到后臺程序中"
"3、配置反向代理
修改config/index.js文件中的proxyTable屬性
pathRewrite的作用"
4、創(chuàng)建導航欄
5、配置歡迎頁面
6、高亮顯示
7、二級路由配置
8、路由傳參和name屬性傳參
9、去掉路徑的#
10、路由守衛(wèi):全局路由守衛(wèi)和局部路由守衛(wèi)
第二階段
"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具名插槽
異步加載數(shù)據(jù)后，放置輪播器中的圖片無法拖動：
添加observer:true配置"
5、電影頁面導航欄（正在熱映和即將上映）的固定定位
6、顯示正在熱映請求數(shù)據(jù)（特殊處理設置請求頭獲取數(shù)據(jù)和反向代理）
7、過濾處理數(shù)據(jù)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"/>之類的獲取圖片。
后臺把很多圖片都放在一個網(wǎng)頁上：
前臺可以獲取這個網(wǎng)頁的圖片
準備開啟傳圖片到網(wǎng)頁的后臺
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以后，
//就會跳轉(zhuǎn)到__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>中間的內(nèi)容</h1>
??????<slot?name="footer"></slot>
??</div>
之類的內(nèi)容，后面使用的話，可以在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"（頁眉）的內(nèi)容</label>
??????<p?slot="footer">Hit.vue這個插槽組件中slot="footer"（頁腳）的內(nèi)容</p>
??????
????</his>是使用的方法）
His.vue
<template>
??<div>
??????<h1>插槽演示</h1>
??????<slot></slot>
??????<slot?name="header"></slot>
??????<h1>中間的內(nèi)容</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"（頁眉）的內(nèi)容</label>
??????<p?slot="footer">Hit.vue這個插槽組件中slot="footer"（頁腳）的內(nèi)容</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+，及所有現(xiàn)代瀏覽器。
相比于unicode語意明確，書寫更直觀?？梢院苋菀追直孢@個icon是什么。
因為使用class來定義圖標，所以當要替換圖標時，只需要修改class里面的unicode引用。
不過因為本質(zhì)上還是使用的字體，所以多色圖標還是不支持的。
使用步驟如下：
第一步：引入項目下面生成的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文件夾下）來實現(xiàn)輪播效果，同時后臺接收數(shù)據(jù)，axios，反向代理實現(xiàn)跨域訪問，還有再加上一個導航欄
不要下載最新版本的swiper，否則分頁欄和自動播放無效
npm install swiper@5.4.5 --save"
npm?install?swiper@5.4.5?--save
delay
反向代理實現(xiàn)跨越訪問很簡單，直接config文件夾中的index.js中加上：
?proxyTable:?{
//自己加的關(guān)于反向代理的部分?START
'/axs':?{
??target:?'http://127.0.0.1:9001',
??changeOrigin:?true,
??pathRewrite:?{//請求路徑中的/axs僅用來匹配代理的target是哪個
????'^/axs':?''
??}
}
//自己加的關(guān)于反向代理的部分?END
????},
下面再實現(xiàn)一個導航欄
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:?{
//自己加的關(guān)于反向代理的部分?START
'/axs':?{
??target:?'http://127.0.0.1:9001',
??changeOrigin:?true,
??pathRewrite:?{//請求路徑中的/axs僅用來匹配代理的target是哪個
????'^/axs':?''
??}
}
//自己加的關(guān)于反向代理的部分?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"（頁眉）的內(nèi)容</label>
??????<p?slot="footer">Hit.vue這個插槽組件中slot="footer"（頁腳）的內(nèi)容</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
