Vue项目笔记(持续更新)
一、命名方式（目录、组件）
组件的文件夹与文件名都使用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里面的包