vue

vue项目开发步骤及遇到的问题

vue项目开发步骤及遇到的问题：
1、使用脚手架工具vue-cli创建项目目录结构，之后就可以进行开发了。
2、根据组件化思想，抽象出可复用性组件（比如按钮、列表、模块），这要根据页面结构进行提取
3、对于必备模块（比如轮播图）进行封装，实现可扩展。借助vue-awesome-swiper
使用的时候，首先要安装：npm install vue-awesome-swiper –save
4、借助vue-awesome-swiper可实现轮播图、带回弹效果的横向滚动的多列商品、小模块入口超过固定数目后允许横向滚动、垂直滚动的消息提醒。

imageimage
5、按钮的点击事件
点击跳转到新页面，可以在元素外包裹<router-link :to={name=”componentName”}>
也可以使用：this.$router.push({name:”componentName”})
返回按钮的点击事件：this.$router.go(-1);或者使用window.history.back();
6、如果要使用sass,需要安装sass-loader和node-sass(sass-loader依赖node-sass)
npm i sass-loader node-sass -D
并在build/webpack.base.conf.js文件中的loader中添加配置

1
2
3
4
{
   test: /\.scss$/,
   loader: 'style-loader!css-loader!sass-loader'
 },

7、使用css-module,实现css模块化。在build/vue-loader.conf.js中添加配置之后即可使用：

1
2
3
4
cssModules: {
	localIdentName: '[path][name]---[local]---[hash:base64:5]',
	camelCase: true
},

使用方法：style标签里添加module,定义类名时使用:class=”$style.className”
关于列表项点击高亮效果，通过动态添加类名实现，css-module关于动态添加类名active的写法如下：
:class=”{[$style.active]:activeName == item.name, }”
更多关于css-module的用法看这里：原文链接
8、使用图标字体（阿里巴巴矢量图库，需要将iconfont.css和fonts文件拷贝到项目中），然后在main.js中全局引入字体图标样式
底部tab选中时高亮，可以直接修改颜色

1
2
3
4
// 选中状态时自带类名
a.router-link-exact-active{
	color: orange;
}

9、修改轮播图指示器默认样式：

1
2
3
.swiper-pagination-bullet-active{
	background:rgba(0,0,255,0.6);
}

10、垂直滚动的新闻列表禁用手势：外层包裹元素添加class=”swiper-no-swiping”
11、使用better-scroll实现滚动效果
首先安装：npm install better-scroll –save
使用的时候引入组件import Bscroll from ‘better-scroll’;
//Vue.js 提供了我们一个获取 DOM 对象的接口—— vm.$refs
并给要滚动元素的父元素添加ref=”wrapper”属性，并将此父元素进行绝对定位

1
2
3
4
5
6
position: absolute;
top: 96px;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;

一般在mounted()钩子函数中使用它

1
2
3
4
mounted(){
	<!-- 第二个参数必须写，否则被better-scroll包裹的元素将无法响应点击事件 -->
	this.scroll = new Bscroll(this.$refs.wrapper,{click:true});
}

12、动态数据渲染，使用axios
首先安装：npm install –save axios
没有服务器时，模拟ajax请求，使用proxy代理

1
2
3
4
5
6
7
8
9
<!-- 使用proxy代理，将真实线上接口地址（转发机制，转发到mock文件夹下） -->
config/index.js中的proxyTable: {
"/api":{
            target:'http://localhost:8080/',
            pathRewrite:{
                '^/api':'/static/mock'
            }
        }
},

13、用computed计算属性做数据拆分，数据遍历时，我们也可以把in换成of作为分隔符，因为它是最接近JavaScript迭代器的语法。
14、兄弟组件的联动效果（字母索引到正确位置）使用bus或者将数据传给父组件，再由父组件转发。
没有关系的组件间数据共享，使用vuex实现
首先安装：npm i vuex –save
src目录下新建store/index.js文件,内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

export default new Vuex.Store({
	// state存放的是全局共用数据
	state:{
		city:'上海'
	},
	actions:{
		changeCity(cxt,cityName){
			// 提交事件
			cxt.commit('changeCity',cityName);
		}
	},
	<!-- 真正执行数据修改的函数 -->
	mutations:{
		changeCity(state,cityName){
			state.city = cityName;
		}
	}
})

然后在main.js中进行全局配置import store from ‘./store’，并将store放入vue实例中
触发函数的方法：

1
2
3
this.$store.dispatch('changeCity',cityName);//调用actions中的方法

//this.$store.commit('changeCity',cityName);//或者直接调用mutations中的方法

遇到的问题


1、vue中水平flex布局（左边宽度固定，右边自适应），在默认的flex-wrap:nowrap(默认值)的情况下（即不允许折行），右侧内容过长时会发生挤压变形问题
image
解决办法：给右侧flex:1;添加width:0或者overflow:hidden;
2、轮播图布局与下面的布局之间有缝隙：是因为图片的对齐方式问题
解决办法：img{width:100%;vertical-align:top},
3、使用better-scroll不响应点击事件的问题
4、css-module中动态添加类名的写法问题

优化


1、轮播图未加载完成时，如果不占位会发生抖动问题（即下面的布局会上来，加载完成后又被顶回原位）
解决办法：给swiper的父容器设置
1
2
3
4
5
6
7
｛
	width: 100%;
	height: 0;
	overflow: hidden;		
	// 这个值要根据图片的真实宽高比（且必须是bottom，不然swiper位置被顶下去了）
	padding-bottom: 42.67%;
｝

2、主题颜色通过sass文件做成一个全局变量，在全局中直接使用变量，方便修改（只用改一个地方，所有用到这个变量的地方都会改变）
3、对于引入文件时路径过长的问题，可以通过其别名：
在webpack.base.conf.js文件中的resolve里配置别名（less\sass\stylus）
4、函数截流：对于touch事件，可以使用函数截流