一、命名方式（目錄、元件）
元件的檔案夾與檔案名都使用PascalBase命名
二、父元件與子元件：
1、 父元件引用子元件：
//父元件
<script>
import TitleBar from './Common/TitleBar'
export default {
name: 'WapCalc',
components: {
TitleBar: TitleBar
}
}
</script> 複制
2、父元件向子元件傳值
父元件關鍵點：
1、:xxx="xxx"
2、data(){
return{
xxx: 'xxx'
}
} 複制
//父元件
<template>
<div class="WapCalc">
<TitleBar :title="title"></TitleBar>
</div>
</template>
<script>
import TitleBar from './Common/TitleBar'
export default {
name: 'WapCalc',
data () {
return {
title: '房貸電腦'
}
},
components: {
TitleBar: TitleBar
}
}
</script>
<style scoped>
</style> 複制
子元件關鍵點：
1、props: ['xxx']
2、{{xxx}} 複制
//子元件
<template>
<div class="title-bar">
<span class="back" style="display: none;"></span>
<span>{{title}}</span>
</div>
</template>
<script>
export default {
name: 'TitleBar',
data () {
return {
}
},
props: ['title']
}
</script>
<style scoped>
</style> 複制
3、 兄弟元件間傳值
使用一個Vue執行個體作為中央事件總線。
Vue内部有一個事件機制，可以參考源碼。
$on方法用來監聽一個事件
$emit用來觸發一個事件。
/*建立一個Vue執行個體作為中央事件總嫌*/
import Vue from 'vue';
let VueEvent = new Vue()
export default VueEvent 複制
在觸發的元件中引入
import VueEvent from '../../assets/js/VueEvent.js'
VueEvent.$emit('事件名', data) 複制
在接收的元件中引入
import VueEvent from '../../assets/js/VueEvent.js'
VueEvent.$on('事件名', (data) => {...}) 複制
三、vue-cli支援scss
vue-cli中已經内置配置好了sass 以及lass的配置。
如果需要的話直接下載下傳兩個子產品就可以了
webpack它會根據 lang 屬性自動用适當的加載器去處理。
npm install node-sass --save-dev
npm install sass-loader --save-dev
四、vue-cli配置autoprefixer
npm install postcss-loader autoprefixer --save-dev
建立一個 postcss.config.js 檔案，輸入:
module.exports = {
plugins: [
require('autoprefixer')({
browserslist: [
">0.01%"
]
})
]
} 複制
五、vue-cli配置雪碧圖
npm i --save webpack-spritesmith
//添加配置
const SpritesmithPlugin = require('webpack-spritesmith');
......
plugins: [
new SpritesmithPlugin({
//目标小圖示
src: {
cwd: path.resolve(__dirname, `./src/${PAGE}/assets/sprite`),
glob: '*.png'
},
// 輸出雪碧圖檔案及樣式檔案
target: {
image: path.resolve(__dirname, `./src/${PAGE}/assets/images/sprite.png`),
css: path.resolve(__dirname, `./src/${PAGE}/assets/css/sprite.scss`)
},
apiOptions: {
cssImageRef: '../../assets/images/sprite.png'
},
// 雪碧圖中每個圖檔帶有一定間距
spritesmithOptions: {
algorithm: 'top-down',
padding: 4
}
}),
TARGET_NODE ? new VueSSRServerPlugin() : new VueSSRClientPlugin(),
]
...... 複制
六、vue生命周期
vue生命周期
七、v-for既可以周遊數組也可以周遊對象
周遊對象：
v-for="(value, proper) in obj"
value是屬性值，proper是屬性索引
八、class動态綁定方式
1、根據某個條件加載樣式
:class="{'樣式名': 條件}" 複制
2、三元表達式
:class="[條件?'條件為真時的class':'條件為假時的class']" 複制
3、三元表達結合數組
:class="[[條件?'條件為真時的class':'條件為假時的class'],{'樣式名': 條件},'樣式名'...]" 複制
九、webkit-box-orient: vertical打包線上不顯示
為什麼用：多行截斷
overflow:hidden;/*超出隐藏*/
text-overflow:ellipsis;/*文本溢出時顯示省略标記*/
display:-webkit-box;/*設定彈性盒模型*/
-webkit-line-clamp:1;/*文本占的行數,如果要設定2行加...則設定為2*/
-webkit-box-orient: vertical;/*設定或檢索伸縮盒對象的子元素的排列方式*/ 複制
原因： optimize-css-assets-webpack-plugin 這個插件的問題，在webpack打包的時候，過濾了部分css
解決：
/*! autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */ 複制
十、Vue使用axios
axios是一個基于 promise 的 HTTP 庫
使用：npm install axios
自己封裝一個方法使用：
import axios from 'axios'
async getApi(url) {
try {
let res = await axios.get(url)
res = res.data
return new Promise((resolve) => {
if (res.code === 0) {
resolve(res)
} else {
resolve(res)
}
})
} catch (err) {
console.log(err)
}
}, 複制
=》IE相容性問題
報錯：promise 在ie中未定義的問題
解決：
import Promise from 'promise-polyfill'
if (!window.Promise) {
window.Promise = Promise
} 複制
十一、dev開發階段解決跨域問題
在/config/index.js裡設定
proxyTable: {
'/api': {
target: 'http://10.129.232.183:8364', /*後端提供服務的字首位址*/
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
} 複制
十二、package.json中dependencies與devDependencies差別
dependencies
生産環境依賴，會被打包
裝包姿勢：npm install xxx –save
devDependencies
開發環境依賴，不會被打包
裝包姿勢：npm install xxx –save-dev
差別：
在開發階段，dependencies與devDependencies沒什麼大的差別，都需要被下載下傳，因為我們開發時要用到開發環境
但當我們把打包好的項目交給運維部署時，他使用npm install指令去安裝，隻會把dependencies的包下載下傳下來，而不會去下載下傳devDependencies裡面的包