Vue单文件组件中的小技巧

灰太狼 2021-01-18 13:49 613阅读 0赞

## 如何设置路径的别名 ##

可以在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({ 
         //这里就是你要保存的逻辑代码
     })
    }