vue項(xiàng)目創(chuàng)建,lint,--fix,打包項(xiàng)目發(fā)給同事,反向代理解決axios跨域訪問(wèn)問(wèn)題@詩(shī)書畫唱
目錄：
知識(shí)
例子1：創(chuàng)建vue項(xiàng)目，解決空格問(wèn)題，打包項(xiàng)目發(fā)給同事的方法
注釋掉.eslintrc.js中的'standard'解決空格問(wèn)題（如果你不想注釋掉'standard'，那么就用npm run lint的方式自動(dòng)修復(fù)空格等的不規(guī)范問(wèn)題等等）
用npm run build打包，dist文件夾下會(huì)生成文件
package.json中添加--fix
例子2：在src目錄下的App.vue中使用在components目錄下的自定義的My.vue組件（功能是：依次點(diǎn)擊1，2，3......次“添加選項(xiàng)”按鈕后，下拉框會(huì)依次增加1，2，3......的內(nèi)容的option選項(xiàng)。提示：當(dāng)npm run dev后，訪問(wèn)的路徑默認(rèn)呈現(xiàn)的是App.vue中調(diào)用的組件）
My.vue
App.vue
用d：在cmd中切換到D盤后用cd命令切換文件夾等等
Microsoft Windows [版本 10.0.18363.1256]
(c) 2019 Microsoft Corporation。保留所有權(quán)利。
C:\Windows\system32>d:
D:\>cd D:\vsCodeProject\vue_project_houtai
D:\vsCodeProject\vue_project_houtai>node index
服務(wù)器完畢，訪問(wèn)地址http://127.0.0.1:9001/
例子3：使用反向代理解決axios的跨域訪問(wèn)問(wèn)題
index.js
You.vue
index.js
npm install --save axios
例子4：實(shí)現(xiàn)導(dǎo)航條
Tabbar.vue
index.js
Comingsoon.vue
Nowplaying.vue
Center.vue
Cinema.vue
Detail.vue
Film.vue
App.vue
standard
知識(shí)
"1、npm run lint命令:
如果config/index.js文件中的useEslint被設(shè)置為true,那么在編譯時(shí)會(huì)報(bào)eslint錯(cuò)誤
修改package.json文件中的""lint""為 ""eslint --fix --ext .js,.vue src"",
運(yùn)行npm run lint，會(huì)自動(dòng)修復(fù)所有的eslint錯(cuò)誤
那么再執(zhí)行npm run dev時(shí)就不會(huì)報(bào)錯(cuò)了"
"2、npm run build打包命令：
會(huì)自動(dòng)生成dist文件，將dist文件夾中的內(nèi)容部署到后臺(tái)程序中"
"3、配置反向代理
修改config/index.js文件中的proxyTable屬性
pathRewrite的作用"
4、創(chuàng)建導(dǎo)航欄
5、配置歡迎頁(yè)面
6、高亮顯示
7、二級(jí)路由配置
8、去掉路徑的#
9、路由守衛(wèi)
10、傳參
項(xiàng)目中的跨域訪問(wèn)問(wèn)題：
1、cors
2、jsonp
3、反向代理
例子1：創(chuàng)建vue項(xiàng)目，解決空格問(wèn)題，打包項(xiàng)目發(fā)給同事的方法
npm install --global vue-cli
vue init webpack my_vue_project1
全部直接按回車也行（有些不用的，可以寫n后按回車）：
打開生成的項(xiàng)目
http://localhost:8080/#/
注釋掉.eslintrc.js中的'standard'解決空格問(wèn)題（如果你不想注釋掉'standard'，那么就用npm run lint的方式自動(dòng)修復(fù)空格等的不規(guī)范問(wèn)題等等）
package.json中添加--fix
用npm run lint可以自動(dòng)修復(fù)一些空格等的報(bào)錯(cuò)，讓其代碼等等變得更規(guī)范
用npm run build打包，dist文件夾下會(huì)生成文件
被打包的文件基本都是變成一行的代碼的：
如果寫好組件等等后打包好后，復(fù)制打包的文件到下面的文件夾中的public文件夾下（給同事看的是打包后的文件）
http://127.0.0.1:9001/#/
standard
例子2：在src目錄下的App.vue中使用在components目錄下的自定義的My.vue組件（功能是：依次點(diǎn)擊1，2，3......次“添加選項(xiàng)”按鈕后，下拉框會(huì)依次增加1，2，3......的內(nèi)容的option選項(xiàng)。提示：當(dāng)npm run dev后，訪問(wèn)的路徑默認(rèn)呈現(xiàn)的是App.vue中調(diào)用的組件）
My.vue
<template>
??<div>
??????<input?type="button"?value="添加選項(xiàng)"?@click="add"/>
??????<select>
??????????<option?v-for="opt?in?opts"?:key="opt">{{opt}}</option>
??????</select>
??</div>
</template>
<script>
export?default?{
??data?()?{
????return?{
??????opts:?[],
??????num:?1
????}
??},
??methods:?{
????add?()?{
??????this.opts.push(this.num++)
????}
??}
}
</script>
<style>
</style>
App.vue
<template>
??<div?id="app">
????<img?src="./assets/logo.png">
<!--?自己加的代碼?START?-->
<my/>
<!--?自己加的代碼?END?-->
????<router-view/>
??</div>
</template>
<script>
//自己加的代碼?START
//?import?tabbar?from?'@/components/Tabbar'
import?my?from?'@/components/my'
//自己加的代碼?END
export?default?{
??name:?'App',
??//自己加的代碼?START
??components:?{
????//?tabbar
????my
??}
??//自己加的代碼?END
}
</script>
<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>
npm run dev運(yùn)行后：
http://localhost:8081/#/
例子3：在例子2的基礎(chǔ)上，用npm run build命令打包（打包的CSS和單頁(yè)面的單個(gè)html是被混淆后的）
這里我框起來(lái)的部分表示，一訪問(wèn)下面的訪問(wèn)地址就會(huì)自動(dòng)訪問(wèn)當(dāng)前目錄下的public目錄下的index.html文件，所以會(huì)把打包好的文件復(fù)制，放到后臺(tái)目錄的public目錄下
npm run build
自己創(chuàng)建的后臺(tái)：
把打包的文件放到后臺(tái)的public文件夾下
用d：在cmd中切換到D盤后用cd命令切換文件夾等等
Microsoft Windows [版本 10.0.18363.1256]
(c) 2019 Microsoft Corporation。保留所有權(quán)利。
C:\Windows\system32>d:
D:\>cd D:\vsCodeProject\vue_project_houtai
D:\vsCodeProject\vue_project_houtai>node index
服務(wù)器完畢，訪問(wèn)地址http://127.0.0.1:9001/
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"]');
????});
}
index.js
//index.js
//引入express模塊
let?express?=?require('express');
//獲取express框架配置對(duì)象app
let?app?=?express();
app.use(express.static(__dirname?+?'/public'));
//導(dǎo)入路由配置
let?routes?=?require('./routes/index')(app);
//設(shè)置訪問(wèn)的端口號(hào)是9001
app.listen(9001);
//啟動(dòng)項(xiàng)目以后，在瀏覽器地址欄輸入http://127.0.0.1:9001以后，
//就會(huì)跳轉(zhuǎn)到__dirname?+?'/public'目錄下的index.html頁(yè)面去
console.log('服務(wù)器完畢，訪問(wèn)地址http://127.0.0.1:9001/');
例子3：使用反向代理解決axios的跨域訪問(wèn)問(wèn)題
npm install --save axios
前臺(tái)，后臺(tái)服務(wù)器都開啟：
http://localhost:8080/#/you
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"]');
????});
}
index.js
//自己加的關(guān)于反向代理的部分?START
'/axs':?{
??target:?'http://127.0.0.1:9001',
??changeOrigin:?true,
??pathRewrite:?{//請(qǐng)求路徑中的/axs僅用來(lái)匹配代理的target是哪個(gè)
????'^/axs':?''
??}
}
//自己加的關(guān)于反向代理的部分?END
You.vue
<template>
??<div>
????<h1>{{msg}}</h1>
????<input?type="button"?value="獲取數(shù)據(jù)"?@click="loadData"?/>
??</div>
</template>
<script>
import?axios?from?'axios'
export?default?{
??data?()?{
????return?{
??????msg:?''
????}
??},
??methods:?{
????loadData?()?{
??????//?因?yàn)檫@個(gè)url路徑以axs開頭，所以ip地址指向與/axs匹配的target
??????//?^/axs表示最后請(qǐng)求的路徑中不包含/axs
??????/*?所以最后的請(qǐng)求路徑是http://127.0.0.1:9001/query
??????，http://127.0.0.1:9001和/axs等價(jià)，因?yàn)?config目錄的index.js文件進(jìn)行了配置
??????：?proxyTable:?{
//自己加的關(guān)于反向代理的部分?START
'/axs':?{
??target:?'http://127.0.0.1:9001',
??changeOrigin:?true,
??pathRewrite:?{//請(qǐng)求路徑中的/axs僅用來(lái)匹配代理的target是哪個(gè)
????'^/axs':?''
??}
}
//自己加的關(guān)于反向代理的部分?END
????},
??????*/
??????axios.get('/axs/query')
????????.then(res?=>?{
??????????this.msg?=?res.data.content
????????})
????}
??}
}
</script>
<style>
</style>
index.js
import?Vue?from?'vue'
import?Router?from?'vue-router'
import?HelloWorld?from?'@/components/HelloWorld'
//自己加的代碼?START
//?import?ZuJian1?from?'@/components/ZuJian1'
import?My?from?'@/components/My'
import?You?from?'@/components/You'
//自己加的代碼?END
Vue.use(Router)
export?default?new?Router({
??routes:?[
????{
??????path:?'/',
??????name:?'HelloWorld',
??????component:?HelloWorld
????},
????//?//?http://localhost:8080/#/ZuJian1
????//?{
????//???path:?'/ZuJian1',
????//???name:?'ZuJian1',
????//???component:?ZuJian1
????//?}
????//?http://localhost:8080/#/my
?????{
??????path:?'/my',
??????name:?'My',
??????component:?My
????},?
????//?http://localhost:8080/#/you
????{
??????path:?'/you',
??????name:?'You',
??????component:?You
????},
??]
})
例子4：實(shí)現(xiàn)導(dǎo)航條
Tabbar
tabBar??指底部的 導(dǎo)航配置屬性
Tabbar.vue
<template>
??<nav>
??????<ul>
??????????<!--?<li>
??????????????<a?href="#/film">電影</a>
??????????</li>
??????????<li>
??????????????<a?href="#/cinema">劇院</a>
??????????</li>
??????????<li>
??????????????<a?href="#/center">個(gè)人中心</a>
??????????</li>?-->
??????????<router-link?to="/film"?tag="li"?active-class="hl">電影</router-link>
??????????<router-link?to="/cinema"?tag="li"?active-class="hl">劇院</router-link>
??????????<router-link?to="/center"?tag="li"?active-class="hl">個(gè)人中心</router-link>
??????</ul>
??</nav>
</template>
<script>
export?default?{
}
</script>
<style>
??.hl?{
??????color:?red;
??}
</style>
index.js
import?Vue?from?'vue'
import?Router?from?'vue-router'
import?HelloWorld?from?'@/components/HelloWorld'
//自己加的代碼?START
//?import?ZuJian1?from?'@/components/ZuJian1'
import?My?from?'@/components/My'
import?You?from?'@/components/You'
import?Film?from?'@/views/Film'
import?Cinema?from?'@/views/Cinema'
import?Center?from?'@/views/Center'
import?Detail?from?'@/views/Detail'
import?Nowplaying?from?'@/views/Film/Nowplaying'
import?Comingsoon?from?'@/views/Film/Comingsoon'
//自己加的代碼?END
Vue.use(Router)
export?default?new?Router({
??routes:?[
????{
??????path:?'/',
??????name:?'HelloWorld',
??????component:?HelloWorld
????},
????//?//?http://localhost:8080/#/ZuJian1
????//?{
????//???path:?'/ZuJian1',
????//???name:?'ZuJian1',
????//???component:?ZuJian1
????//?}
????//?http://localhost:8080/#/my
?????{
??????path:?'/my',
??????name:?'My',
??????component:?My
????},?
????//?http://localhost:8080/#/you
????{
??????path:?'/you',
??????name:?'You',
??????component:?You
????},
?????{
??????path:?'/film',
??????component:?Film,
??????children:?[
????????{//?也可以寫成path:?'nowplaying'
??????????path:?'/film/nowplaying',
??????????component:?Nowplaying
????????},
????????{//?也可以寫成path:?'comingsoon'
??????????path:?'/film/comingsoon',
??????????component:?Comingsoon
????????},
????????{//?設(shè)置二級(jí)路由為空時(shí)訪問(wèn)哪個(gè)組件
??????????path:?'',
??????????redirect:?'/film/nowplaying'
????????}
??????]
????},?{
??????path:?'/cinema',
??????component:?Cinema
????},?{
??????path:?'/center',
??????component:?Center
????},?{
??????path:?'/detail',
??????component:?Detail
????},?{//?輸入不匹配的路徑是統(tǒng)一跳轉(zhuǎn)到/film對(duì)應(yīng)的組件
??????path:?'*',
??????redirect:?'/film'
????}
??]
})
Comingsoon.vue
<template>
??<h1>即將上映</h1>
</template>
<script>
export?default?{
}
</script>
<style>
</style>
Nowplaying.vue
<template>
??<div>
????<h1>正在熱映</h1>
????<ul>
??????<li?v-for="data?in?dataList"?:key="data"?@click="viewDetail(data)">{{data}}</li>
????</ul>
??</div>
</template>
<script>
export?default?{
??data?()?{
????return?{
??????dataList:?['唐人街探案1',?'懸崖之上',?'唐伯虎點(diǎn)秋香']
????}
??},
??methods:?{
????viewDetail?(name)?{
??????//?顯示Detail組件
??????this.$router.push('/detail')
????}
??}
}
</script>
<style>
</style>
Center.vue
<template>
??<h1>個(gè)人中心</h1>
</template>
<script>
export?default?{
}
</script>
<style>
</style>
Cinema.vue
<template>
??<h1>影院</h1>
</template>
<script>
export?default?{
}
</script>
<style>
</style>
Detail.vue
<template>
??<h1>電影詳情</h1>
</template>
<script>
export?default?{
}
</script>
<style>
</style>
Film.vue
<template>
??<div>
????<div>電影LOGO</div>
????<div>電影Tab</div>
????<router-view/>
??</div>
</template>
<script>
export?default?{
}
</script>
<style>
</style>
App.vue
<template>
??<div?id="app">
????<img?src="./assets/logo.png">
<!--?自己加的代碼?START?-->
?<tabbar/>
<!--?<My/>?-->
<!--?自己加的代碼?END?-->
????<router-view/>
??</div>
</template>
<script>
//自己加的代碼?START
import?tabbar?from?'@/components/Tabbar'
//?import?my?from?'@/components/My'
//自己加的代碼?END
export?default?{
??name:?'App',
??//自己加的代碼?START
??components:?{
????tabbar
????//?My
??}
??//自己加的代碼?END
}
</script>
<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>
