一、命名方式（目錄、組件）
組件的文件夾與文件名都使用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內(nèi)部有一個事件機制，可以參考源碼。
$on方法用來監(jiān)聽一個事件
$emit用來觸發(fā)一個事件。
/*新建一個Vue實例作為中央事件總嫌*/
import Vue from 'vue';
let VueEvent = new Vue()
export default VueEvent
在觸發(fā)的組件中引入
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中已經(jīng)內(nèi)置配置好了sass 以及l(fā)ass的配置。
如果需要的話直接下載兩個模塊就可以了
webpack它會根據(jù) lang 屬性自動用適當?shù)募虞d器去處理。
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生命周期
七、v-for既可以遍歷數(shù)組也可以遍歷對象
遍歷對象：
v-for="(value, proper) in obj"
value是屬性值，proper是屬性索引
八、class動態(tài)綁定方式
1、根據(jù)某個條件加載樣式
:class="{'樣式名': 條件}"
2、三元表達式
:class="[條件?'條件為真時的class':'條件為假時的class']"
3、三元表達結合數(shù)組
:class="[[條件?'條件為真時的class':'條件為假時的class'],{'樣式名': 條件},'樣式名'...]"
九、webkit-box-orient: vertical打包線上不顯示
為什么用：多行截斷
overflow:hidden;/*超出隱藏*/
text-overflow:ellipsis;/*文本溢出時顯示省略標記*/
display:-webkit-box;/*設置彈性盒模型*/
-webkit-line-clamp:1;/*文本占的行數(shù),如果要設置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開發(fā)階段解決跨域問題
在/config/index.js里設置
proxyTable: {
'/api': {
target: 'http://10.129.232.183:8364', /*后端提供服務的前綴地址*/
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
十二、package.json中dependencies與devDependencies區(qū)別
dependencies
生產(chǎn)環(huán)境依賴，會被打包
裝包姿勢：npm install xxx –save
devDependencies
開發(fā)環(huán)境依賴，不會被打包
裝包姿勢：npm install xxx –save-dev
區(qū)別：
在開發(fā)階段，dependencies與devDependencies沒什么大的區(qū)別，都需要被下載，因為我們開發(fā)時要用到開發(fā)環(huán)境
但當我們把打包好的項目交給運維部署時，他使用npm install命令去安裝，只會把dependencies的包下載下來，而不會去下載devDependencies里面的包
