Vue框架—專案部署與實踐
環境配置
-
首先安裝 node.js 去官網安裝
LTS
下的指定版本。- 檢視是否安裝Node.js 安裝成功,開啟cmd黑視窗, 輸入
node -v
輸出了版本號說明成功了。 - 輸入
npm -v
檢視是否有版本號。
- 檢視是否安裝Node.js 安裝成功,開啟cmd黑視窗, 輸入
-
使用碼雲:來儲存程式碼。
- 在碼雲中建立完專案目錄後,生成公鑰:
- 在本地的資料夾中 輸入
ssh-keygen -t rsa -C '[email protected]'
- 然後在提示的想對應目錄中:找到
.ssh/id_rsa.pub
檢視這個檔案。把生成的私鑰複製到碼雲對應公鑰的上。
- 在本地的資料夾中 輸入
- 切換到Travel目錄上,點選
生成克隆/下載
點選ssh
到本地的資料夾中,輸入git clone '複製的地址'
- 在碼雲中建立完專案目錄後,生成公鑰:
-
建立Vue專案:
- 1:首先全域性安裝
vue-cli
:npm install --global vue-cli
- 2:建立一個基於 webpack 模板的新專案:
vue init webpack Travel
(*注意碼雲生成的LICENSE檔案跟README.md檔案, 跟專案檔案在同一個路徑下) - 簡單介紹一下專案於中目錄檔案:
- 1:README.md:說明檔案
- 2:package.json:第三方依賴包
- 3:package-lock.json:鎖檔案,安裝包的版本
- 4:LICENES:開源協議的說明
- 5:index.html:首頁預設的模板檔案
- 6:.postcssrc.js:css預設項
- 7:.gitnore:提交到git倉庫時,可以忽略的字尾名檔案
- 8:.eslintrc.js:程式碼的規範,才不會有警告的提示
- 9:.eslintignore:裡面這些檔案,是不會受
eslintrc
檢測 - 10:.editorconfig:編輯器裡面的語法
- 11:.babelrc:vue寫的都是單檔案組建,通過babelrc來進行語法的轉換,轉換成瀏覽器能執行編譯的程式碼。
- 12:static:存放的是靜態資源
- 13:node_modules:存放的是第三方依賴包
- 14:src:存放的是專案的原始碼
- main.js:專案的入口檔案
- App.vue:專案的根元件
- router:
- index.js 配置的路由
- components:存放的元件
- assets:專案中用到的資源
- 15:config:配置檔案
- index.js:存放的是基礎資訊
- dev.env.js:存放的是開發環境資訊
- prod.env.js:存放的是線上環境資訊
- 16:build:專案打包
- 1:首先全域性安裝
-
解決移動端點選事件延遲300ms的問題:
- 移動端點選事件的時候, 會出現300ms延遲的情況, 需要引入第三方包,
npm install fastclick --save
(–save的意思是, 不管是開發環境中, 還是線上環境中都需要使用這個包) - 然後在main.js中引入第三方包:
import fastClick from 'fastclick'
- 在呼叫attach()這個方法:
- fastClick.attach(document.body)
- 移動端點選事件的時候, 會出現300ms延遲的情況, 需要引入第三方包,
-
移動端做適配的問題:
- 首先在專案中最外層的
index.html
檔案中:- 找到< meta>標籤:在content屬性中, 繼續寫入
minimum-scale=1.0, maximum-scale=1.0, user-scalable=no
:代表的是使用者通過手指放大縮小螢幕尺寸都無效, 比列始終是1:1。 - 在src/assets/styles/資料夾中匯入:
reset.css, border.css
。(網上很容易就能找到這檔案)- reset.css: 匯入的這個是關於適配的樣式檔案, 所有手機適配都能相容, 在入口函式中將它引入。
- border.css: 移動端會出現1畫素邊框的問題, 根據每個手機的不同, 畫素也不同。
在main.js
中引入這倆個檔案:- import ‘styles/reset.css’
- import ‘styles/border.css’
- 找到< meta>標籤:在content屬性中, 繼續寫入
- 首先在專案中最外層的
-
< router-link > 標籤的作用:
- 介紹一下 < router-link > 標籤的作用:
<!--template: 模板中只能包裹一個標籤, 所有每個template中直接包含一個div標籤--> <template> <div> <div class="home">home</div> <!--router-link 相當於css中的a標籤, to相當於 a標籤中的href屬性--> <router-link to="/list" class="home">列表頁</router-link> </div> </template>
-
使用stylus來寫css樣式:
- css樣式使用第三方依賴包:
stylus
npm install stylus --save
npm install stylus-loader --save
- css樣式使用第三方依賴包:
-
使用阿里巴巴的 inconfont圖示:
- 如何使用, inconfont: 開啟網站(http://iconfont.cn/), 把選中的圖示放到購物車中, 新增到註冊的專案中, 下載下來, 然後將iconfont的4個`字型檔案(字尾名.eot; .svg; .ttf; .woff:)匯入到/assets/styles/iconfont/中, 把iconfont.css檔案放到/assets/styles/目錄中。
- 開啟:styles目錄中的, inconfont.css檔案, 把匯入的字型檔案
url
進行修改。 - 然後在
main.js
中 引入iconfont:import './assets/styles/iconfont.css'
- 然後在相對應的元件中,使用iconfont:
- 寫個< span class=‘iconfont’>xxx< /span> 標籤 class=‘iconfont’ xxx:表示進入iconfont網站, 點選圖示下面的複製程式碼, 貼上到xxx的位置上就OK了。
- 開啟:styles目錄中的, inconfont.css檔案, 把匯入的字型檔案
- 如何使用, inconfont: 開啟網站(http://iconfont.cn/), 把選中的圖示放到購物車中, 新增到註冊的專案中, 下載下來, 然後將iconfont的4個`字型檔案(字尾名.eot; .svg; .ttf; .woff:)匯入到/assets/styles/iconfont/中, 把iconfont.css檔案放到/assets/styles/目錄中。
-
使用css程式碼中的樣式, 把它作為常量,或者一個方法引入:
- 如何將css中顏色的樣式程式碼進行優化:
- 在/assest/styles/ 檔案中建立:
varibles.styl
檔案 寫入$bgColor = #00bcd4
等號前面是程式碼常量, 等號後面是顏色的樣式。 - 然後在相對應的元件的< style>標籤中引入
@import "~找到存放varibles.styl"檔案路徑
。 - 在css樣式中就可以使用
background: $bgColor
這個常量來代表相對應的顏色。
- 在/assest/styles/ 檔案中建立:
- 如何將css中顏色的樣式程式碼進行優化:
-
使用自定義的名字來代替專案的資料夾所在的路徑:
- 如何使用webpack來簡化程式碼的路徑的問題, 比如
@就代表的是src目錄
。- 首先在專案中
build目錄中找到
webpack.base.conf.js38行,
’@’: resolve(‘src’),, 在它的下面寫上,
‘代替的名字’: resolve(‘相對應的路徑’)`。 - 在修改了
webpack.base.conf.js
檔案後, 需要重新啟動該伺服器。
- 首先在專案中
- 如何使用webpack來簡化程式碼的路徑的問題, 比如
-
使用第三方包, 完成輪播圖:
-
首先安裝輪播圖第三方包的依賴:
-
[email protected] --save
@後面可以指定版本號。 -
在main.js中:
import VueAwesomeSwiper from 'vue-awesome-swiper'
匯入外掛。import 'swiper/dist/css/swiper.css'
把樣式也引入進來。Vue.use(VueAwesomeSwiper)
使用這個外掛。
-
在相對應的元件中:
- 在< template>標籤中, 引入下面這段程式碼:
<swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback"> <!-- slides --> <swiper-slide>I'm Slide 1</swiper-slide> <swiper-slide>I'm Slide 2</swiper-slide> <swiper-slide>I'm Slide 3</swiper-slide> <swiper-slide>I'm Slide 4</swiper-slide> <swiper-slide>I'm Slide 5</swiper-slide> <swiper-slide>I'm Slide 6</swiper-slide> <swiper-slide>I'm Slide 7</swiper-slide> <!-- Optional controls --> <div class="swiper-pagination" slot="pagination"></div> <div class="swiper-button-prev" slot="button-prev"></div> <div class="swiper-button-next" slot="button-next"></div> <div class="swiper-scrollbar" slot="scrollbar"></div> </swiper>
- 在data函式中 返回一個物件:
swiperOption
。
-
在輪播圖上面, 顯示白色的小圓圈(預設顏色是藍色, 通過穿透來改變小圓圈的顏色):
pagination: '.swiper-pagination',
-
讓輪播圖進行迴圈操作:
loop: true
-
定義在swiperOption物件中:
swiperOption: { // 給輪播圖新增, 圖片下面的小點, 預設的顏色是藍色 pagination: '.swiper-pagination', // 開啟輪播圖迴圈 loop: true },
-
-
-
如何在當前元件中修改其他元件中的樣式:
-
1:首先在建立一個< div>標籤 把外部傳入的元件包裹裡面, 自定義class=‘xxx’。
-
2:找到外部元件中的class=‘xxx’
-
3:使用
div標籤定義的class >>> 到外部元件的 class
, 接的在下面寫要修改的樣式, 就可以了。 -
.wrapper 就是div(class), .swiper-pagination-bullet-active(外部元件的class)
.wrapper >>> .swiper-pagination-bullet-active background: #fff
-
-
使用axios傳送 ajax 請求:
-
1:首先安裝依賴:
npm install axios --save
-
2:在主元件中匯入:
import axios from 'axios'
methods: { getHomeInfo () { axios.get('/api/index.json') .then(this.getHomeInfoSucc) }, getHomeInfoSucc (res) { console.log(res) } }, mounted () { this.getHomeInfo() }
-
3: axios.get(‘url’)就發起了請求。(上面的url, 在config目錄下的/index.js 裡面,進行了簡單的配置, 讓它請求的是專案中,static目錄下的index.json檔案)
proxyTable: { '/api': { target: 'http://localhost:8080', pathRewrite: { '^/api': '/static/mock/' } } },
-
-
父子元件傳值:
-
1:首先在父元件中通過
axios.get()
獲取到後端傳遞過來的資料, 然後賦值給data函式中的返回值。 -
2:在子元件標籤中,繫結傳入的值,
:list='xxxlist'
。 -
3:在子元件中, 使用
props:{ list:Array}
來進行接收。 -
4:將list傳入到指令
v-for='item of list'
中。// 發起axios請求後端的資料 getHomeInfo () { axios.get('/api/index.json') .then(this.getHomeInfoSucc) }, // 首先在父元件中, 通過axios獲取值得 getHomeInfoSucc (res) { console.log(res) res = res.data if (res.ret && res.data) { const data = res.data this.city = data.city this.swiperList = data.swiperList this.iconList = data.iconList this.recommendList = data.recommendList this.weekendList = data.weekendList } // 接收到的值,賦值給data函式 data () { return { city: '', swiperList: [], iconList: [], recommendList: [], weekendList: [] } }, // 將data函式的返回值, 繫結到子元件中, 進行傳遞給子元件 <home-header :city="city"></home-header> <home-swiper :list="swiperList"></home-swiper> <home-icons :list="iconList"></home-icons> <home-recommend :list="recommendList"></home-recommend> <home-weekend :list="weekendList"></home-weekend> // 以上操作都是在父元件中完成的 // 使用props 來接收父元件傳遞過來的資料 } props: { list: Array }, // 在你使用v-for迴圈的時候傳入list <li class="item border-bottom" v-for="item of list" :key="item.id">
-
-
路由跳轉:
-
< router-link to='/xxx'>< /router-link>
標籤是跳轉到to=’/xxx’指定的路由.-
你可能會發現,當你標籤包含的這個樣式,文字顏色會變,需要改動一下, 把css的color:設定為#fff:
-
<router-link to="/city"> <div class="header-right"> {{this.city}} <span class="iconfont arrow-icon"></span> </div> </router-link>
-
-
-
better-scroll的使用:
-
首先安裝包
npm install better-scroll --save
-
看better-scroll的結構(新增一條div標籤)
-
在最外層的div標籤中:
<div class="list" ref="wrapper">
繫結wrapper -
在專案的元件中匯入:
import Bscroll from 'better-scroll'
-
接下來在:
// 生命週期函式, 函式掛載之後載入 mounted () { this.scroll = new Bscroll(this.$refs.wrapper) }
-
-
實現
Vuex
實現資料共享:-
Vuex是什麼?
- 專案中多個元件進行傳值,如何把一個公用的資料放到一個公共的儲存空間,某個元件改變資料,其他的元件都能感覺到。
-
State:
儲存公用資料
。 -
Actions:
元件(Vue Components)改資料
必須呼叫(Dispatch方法來進行呼叫)
Actions,做一些非同步處理。 -
Mutations:Actions呼叫
(Commit方法來進行呼叫)
Mutations, 才可以改變多用資料的值
。 -
有的時候也可以
略過Actions
, 讓元件(Vue Components)
直接呼叫Mutations
,讓Mutations直接修改State的資料。 -
流程圖如下:
-
安裝Vuex:
- 執行命令:
npm install vuex --save
- 執行命令:
-
再專案src目錄下建立資料夾
store
:-
1:引入:
import Vue from 'vue'
和import Vuex from 'vuex'
-
2:使用Vuex:
Vue.use(Vuex)
-
3:建立Vuex 倉庫:
export default new Vuex.Store({})
-
state: 儲存資料, 再使用的時候直接再元件中
{{this.$store.state.city}}
就OK。 -
actions:當點選事件觸發的時候
vue元件呼叫
,this.$store.dispatch('changeCity', city)
再元件中操作,dispatch方法,進行傳值,actions
來接收進行處理, changeCity (ctx, city) {ctx.commit('changeCity', city)
}, 傳入兩個引數
,第一個引數ctx
(上下文, 進行commit時候使用),第二個引數city
就是dispatch
總元件中獲取到的。 -
mutations:根據上面的commit(‘changeCity’, city)
changeCity進行命名,傳遞兩個引數
,第一個是state, 第二個引數是city。然後進行賦值給state.city,就改變了公用的儲存資料
。 -
栗子如下(再src/store/index.js):
// 引入vuex import Vue from 'vue' import Vuex from 'vuex' // 使用Vuex Vue.use(Vuex) // 建立Vuex 倉庫 export default new Vuex.Store({ // 存放公用的資料 state: { city: '上海' }, actions: { changeCity (ctx, city) { ctx.commit('changeCity', city) } }, mutations: { changeCity (state, city) { state.city = city } } })
-
-
-
再
main.js
中建立Vuex的根例項
: -
第一步: 首先引入:
import store from './store'
-
第二部: 直接建立:
new Vue({ el: '#app', router, // 建立Vuex 根例項 store, components: { App }, template: '<App/>' })
-
-
程式設計式導航
vue-router
:-
this.$router.push('/')
: 來進行頁面中的跳轉('/')代表的是路徑
。 -
該方法的引數可以是一個
字串路徑
,或者一個描述地址的物件
。比如:// 字串 router.push('home') // 物件 router.push({ path: 'home' }) // 命名的路由 router.push({ name: 'user', params: { userId: 123 }}) // 帶查詢引數,變成 /register?plan=private router.push({ path: 'register', query: { plan: 'private' }})
-
8.9