Vue单文件组件中的小技巧

如何设置路径的别名

可以在build目录下的webpack-base-config.js
在resolve进行配置如下

{
    resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'styles': resolve('src/assets/styles'),
      'common': resolve('src/common'),
    }
  }
}

extensions是支持设置扩展名称,上面可以是.js、.vue、.json,还可以在后面进行扩展
alias就是配置别名,列如我们想定位到src资源路径下那么就可以通过

{
    '@': resolve('src')
}
//在vue中如何使用 想下面这样直接就可以使用了
import Detail from '@/pages/detail/Detail'

别名设置的好处是什么?

有人可能会问,为什么设置别名,答案很简单,设置别名是更加的方便,不用写很长来引入资源

在vue中如何设置css和css的作用域?

{
    <style lang="stylus" scoped>
    </style>
}

其中lang指的是使用css语言,这里我使用的是stylus,scoped指的是设置只在这个css作用域范围

在vue中遍历的key是从哪里来?

在开发中,我们都会遍历后端传递来的数据,一般这个key我们都是在用v-for进行循环遍历data数据的时候,data里面带了数据库唯一的key,列如数据库中主键唯一的id,这个key是不能重复的。
下面我在data中自定义了一组对象属性

{
    data () {
        return {
            list: [{
                id: '0001',
                username: 'jishu',
                password: '$abcndhfgdfjdjfjdbf3'
            }, {
                id: '0002',
                username: 'zhangsan',
                password: '$agdgfjdjgjfgjfjgjfj'
            }]
        }
    }
}

上面list中的数据我是模拟后端发来的数据,其中的id是唯一不会重复的,那么key就使用list中的id

在vue中如何设置router?

router的设置在src路径下router文件下的index.js
这里注意的是要对其它组件进行路由设置,首先要导入这个组件如下

{
    import City from '@/pages/girs/Woman'
}

// 然后在Router中配置
export default new Router({
    routers: [{
        path: '/girl',
        name: 'Woman',
        component: Woman
    }, {
        path: 'xxxx',
        name: 'xxxxx',
        component: xxxx
    }, {
        path: 'xxxxx',
        name: 'xxxxxxx',
        component: xxxxxxx
    }]
})

routers是一组路由配置的名称,就是一个数组,因为路由有很多

path是访问的路径

name是名称这里最好填写和组件名一样

component是组件的名

配置好了我们就可以在vue中使用如下

{
    <router-link to="/girl">
    </router-link>
}

这里强调的是router-link这个标签包裹的一定是一个div或者其它的标签,被它包裹的标签就变成了一个a标签当点击时候就会跳转到girl上

在vue中如何减少请求次数,优化网站?

我们可以使用vue自带的标签,我们在app.vue中进行配置如下

{
<template>
  <div id="app">
    <keep-alive>
      <router-view/>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
</style>
}

我们使用了keep-alive包裹了router-view这样就缓存了请求,大大的降低了网站的频繁请求,十分的方便

在vue中如何使用localStorage

使用localStorage来缓存用户登录的状态或者记录用户的操作都是可以的,怎么使用可以自定义一个js文件

{
    localStorage.xxxx =  xxxx
}

其中的xxxx是vuex中保存的字段,也可以是你要缓存的字段。

在vue中如何使用vuex?

当我们需要在各个组件传递数据的时候,就需要使用vuex

当然有些时候我们还是需要和localStorage配合使用,列如记录用户的操作记录,当用户将选好的产品加入购物车,一刷新页面,之前选择的商品就没有了,一刷新就要重新添加,要借助localStorage配合使用解决,将state对象放入localStorage中,再将localStorage中存的数据取出来给vuex中的state赋值。如果不存在，说明是第一次打开，则取vuex中定义的state初始值。

我们在src路径下的store中创建一个index.js来使用vuex，在使用vuex之前需要安装vuex

{
 import Vue from 'vue' //引入基本vue
 import Vuex from 'vuex'//引入vuex

 export default new Vuex.Store({
     //这里就是你要保存的逻辑代码
 })
}