github 項(xiàng)目地址
預(yù)覽
效果圖1
效果圖2
效果圖3
效果圖3.jpg
說明
- vue學(xué)習(xí)整理
- 未嚴(yán)格按照Vue風(fēng)格指南
- 旨在學(xué)習(xí)與交流vue語法以及基本入門
- 由于對(duì)css了解不深入笨觅，使用了FlexBox布局，界面樣式可忽略
功能
- 基于nuxt搭建項(xiàng)目
- axios數(shù)據(jù)請(qǐng)求以及跨域問題解決方案
- router（頁面跳轉(zhuǎn)動(dòng)畫等）
- vuex基本用法封裝與實(shí)現(xiàn),全局store婶希，修改主題等（暫未實(shí)現(xiàn)語言全球化）。
- vuex深入蓬衡，模塊下store（module）喻杈，經(jīng)典的記事本(任務(wù)管理)demo
- 支持vuex logger日志打印
- 基本組件封裝
- 組件傳值（props）
- 子父組件互調(diào)用
- 封裝模態(tài)框以及slot的使用
- eslint配置（暫未配置）
參考文檔
依賴庫(kù)
- vue
- vue服務(wù)端渲染：nuxt
- Node.js服務(wù)器端呈現(xiàn)：vue-server-renderer
- vue路由管理器：vue-router
- Vue Loader 是一個(gè) webpack 的 loader，它允許你以一種名為單文件組件 (SFCs)的格式撰寫 Vue 組件: vue-loader,中文文檔
- Webpack的Vue樣式加載程序模塊:vue-style-loader
- 日期處理類庫(kù)：moment
運(yùn)行項(xiàng)目
- clone項(xiàng)目或者直接下載壓縮包
git clone https://github.com/weifengzz/qz-weather-vue.git
- 安裝依賴
npm install
or
yarn
- 運(yùn)行
npm run dev
- 打開網(wǎng)頁狰晚，輸入網(wǎng)址
http://localhost:9002/
axios跨域問題
- 添加 @nuxtjs/axios筒饰，@nuxtjs/proxy 依賴庫(kù)
npm install @nuxtjs/axios @nuxtjs/proxy --dev
- 在nuxt.config.js文件中配置
modules: [
'@nuxtjs/axios',
'@nuxtjs/proxy'
],
axios: {
proxy: true
},
proxy: {
'/api': {
target: 'http://t.weather.sojson.com/api/weather/city/',
pathRewrite: {
'^/api' : '/'
}
}
}
計(jì)算屬性 computed
例1(無參數(shù))：
...
<p class="q-release-time-text">{{ releaseTime }} 發(fā)布</p>
....
export default {
...
computed: {
// 使用計(jì)算屬性，獲取發(fā)布時(shí)間
releaseTime: () => {
return moment().format('hh:mm:ss')
}
}
...
}
- 例2（有參數(shù)）
...
<p class="q-release-time-text">{{ releaseTime('hh:mm:ss') }} 發(fā)布</p>
....
export default {
...
computed: {
// 使用計(jì)算屬性壁晒，獲取發(fā)布時(shí)間
releaseTime: () => {
return (format) => {
return moment().format(format)
}
}
}
...
}
vue組件 : 符號(hào)的作用
- :是v-bind的縮寫瓷们，是為了動(dòng)態(tài)綁定數(shù)據(jù)。
<!-- 完整語法 -->
<a v-bind:href="url">...</a>
<!-- 縮寫 -->
<a :href="url">...</a>
vue中 @ 符號(hào)的作用
- @是v-on的縮寫秒咐。
<!-- 完整語法 -->
<a v-on:click="doSomething">...</a>
<!-- 縮寫 -->
<a @click="doSomething">...</a>
動(dòng)態(tài)設(shè)置樣式
- 動(dòng)態(tài)綁定class寫法 :
<div :class="{'bor':clicked==index}"></div>
- 動(dòng)態(tài)綁定style
<div :style="{ 'background-color': theme.color }">
vuex的使用
- 說明：vuex封裝的比較好相對(duì)于redux簡(jiǎn)單
- 參考資料：5分鐘帶你入門vuex（vue狀態(tài)管理）
- 官方參考資料: vuex
- 如果想深入了解谬晕，請(qǐng)參考：redux基本原理
發(fā)布部署
- 參考文檔
- package.json配置
....
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start"
},
...
- 執(zhí)行build命令
npm run build
- 執(zhí)行啟動(dòng)服務(wù)命令
npm run start
- 可使用pm2: pm2是node進(jìn)程管理工具,可以利用它來簡(jiǎn)化很多node應(yīng)用管理的繁瑣任務(wù),如性能監(jiān)控、自動(dòng)重啟携取、負(fù)載均衡等,而且使用非常簡(jiǎn)單攒钳。
