stylus
一种css预处理器，可以更加直观的编写css代码，减少不必要的格式
下载：
npm install stylus
使用：
在style标签中加上 lang="stylus"来使用stylus
样式不再需要大括号，而是用缩进来代替
可以省略冒号，用空格代替
不再需要分号来结尾
在style标签中添加scope属性后，样式只会修饰当前组件。
better-scroll
一个用于提高滑动体验的库，可以让移动端的滑动体验更接近于原生APP
下载：仍然是npm下载或script标签引入，没什么好说的
使用也非常简单：
首先 import BScroll from ‘better-scroll’
this.scroll=new Bscroll(this.$refs.wrapper)//wrapper是被选择的元素，也就是进行滚动的元素，完成绑定即成功使用
绑定成功后，要进行元素跳转时，可以用this.scroll.scrollToElement()的方法，括号内的参数是要跳转到的目标
swipper
用于实现轮播图的插件，类似于这样的：
下载：npm install swiper，或是去官网下载压缩包后引入对应的js文件和css文件
使用：通过一段示例demo来看,这是swipper.vue：
<template style="touch-action:none;">
<swiper :options="swiperOption" class=wrapper>
<swiper-slide v-for="item of swiperList" :key="item.id">
<img class="swiper-img" v-bind:src="item.imgUrl">
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
<div class="swiper-scrollbar" slot="scrollbar"></div>
</swiper>
</template>
<script>
export default {
name: 'carrousel',
props:['swiperList'],
data () {
return {
swiperOption: {
loop:true,
pagination:{
el:'.swiper-pagination',
clickable:true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
scrollbar: {
el: '.swiper-scrollbar',
},
}
}
}
}
</script>
swiper标签是整个轮播图的外层父标签，其上绑定了一个配置项swipperOption，在data中定义
swiper-slide标签内部是轮播的图片。可以通过多个swiper-slide标签来定义已知个轮播图片，但仍建议使用v-for的方法进行列表渲染
下面的四个div标签都是可选项，从上到下分别是：分页器（就是图中的小圆点）、上一张按钮、下一张按钮、进度条。
swiperOption的配置方法上面已经给出了示例。注意，这个配置方法随着swiper版本的不同而改变，例如一些老教程中swiperOption的配置方法就已经行不通了。所以如果出现了什么错误，去官网查api即可
以上是最基础的结构，可以给各个组件添加class定制自己想要的样式，或是绑定事件
axios
一个vue官方推荐的基于promise的http库，用于进行数据请求
最常见的使用场景如下：
import axios from 'axios' //首先引入
//发送get请求
axios
.get('URL')//可以直接在URL中添加参数
.then(response => (this.info = response))//请求成功
.catch(function (error) { // 请求失败处理
console.log(error);
});
axios
.get('/user', {// 也可以通过 params 设置参数：
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
//发送post请求
axios.post('/user', {
firstName: 'Fred', // 参数 firstName
lastName: 'Flintstone' // 参数 lastName
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
//发送多个并发请求
function getUserAccount() {
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
// 两个请求现在都执行完成
}));
//通过向axios传递参数来进行请求
// 发送 POST 请求
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});
// GET 请求远程图片
axios({
method:'get',
url:'http://bit.ly/2mTM3nY',
responseType:'stream'
})
.then(function(response) {
response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
});
//可以只传入url，发送 GET 请求（默认的方法）
axios('/user/12345');
//相应函数中接收的response对象含有的信息：
{
// `data` 由服务器提供的响应
data: {},
// `status` HTTP 状态码
status: 200,
// `statusText` 来自服务器响应的 HTTP 状态信息
statusText: "OK",
// `headers` 服务器响应的头
headers: {},
// `config` 是为请求提供的配置信息
config: {}
}
Vuex
解决非父子组件传值的问题。多用于大型单页应用之中，对于小型项目可能是一种多余的存在
使用：下载并引入Vuex，用Vue.use(Vuex)方法来使用Vuex，并export一个Store实例，实例中有存放数据的state，actions，mutations和getters
Vue.use(Vuex)
export default new Vuex.Store({
state:{
city:"bj"
},
actions:{
changeCity(ctx,city){
ctx.commit('changeCityShowing',city)
}
}
mutations:{
changeCityShowing(state,city){
state.city=city;
try {
localStorage.city=city;
} catch (error) {};
}
}
getters:{
reverse(){
return state.city.split('').reverse().join("");
}
}
})
在需要向外传值的组建中用 this.$store.dispatch(‘事件名’,数据); 的方式将数据传给actions
在actions中定义相同的事件，接收两个参数，在其中将事件继续传递给mutations
在mutations中修改state中的数据，达到修改全局状态的目的
在传递的数据较少较简单时，可以直接从组件中this.$store.commit(‘事件名’,数据);将数据提交到mutations
当要对state中的变量加工后使用时，可以将之映射到计算属性（映射至data中的变量则无法加工），或在getters中定义相关的函数
getters相当于store中的计算属性。可以用mapGetters函数将之映射到局部计算属性
computed:{
...mapGetters(['name1'，‘name2’])
//...
}
