一, 命名方式 (目录, 组件)
组件的文件夹与文件名都使用 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>
子组件关键点:
- ,props: ['xxx']
- ,{{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 (!Windows.Promise) {
- Windows.Promise = Promise
- }
十一, dev 开发阶段解决跨域问题
在 / config/index.JS 里设置
- proxyTable: {
- '/api': {
- target: 'http://10.129.232.183:8364', /* 后端提供服务的前缀地址 */
- changeOrigin: true,
- pathRewrite: {
- '^/api': ''
- }
- }
- }
来源: http://www.jianshu.com/p/c99aca25143b