Vue项目开发总结

这是我在开发中遇到问题的总结

1、在vue-cli的2.x版本中配置sass时 一定要注意sass-loader要下载7.0.0的版本 现在最新版本是8.0.0，如果是8.0.0的话 配置好也是会报错的。
配置如下:
在bulid文件夹下的webpack.base.conf.js文件的module下的rules里添加

	test: /\.scss$/,
    loaders: ["style", "css", "sass"]

2、在npm install下载特别慢的情况下 切换成淘宝源下载

npm config set registry https://registry.npm.taobao.org

3、封装时间戳变成真实时间
首先下载moment

npm install moment -S

然后在main.js里全局引用

import moment from 'moment'

//在这里注册
Vue.filter('dateformat', function (dataStr, pattern = 'YYYY-MM-DD HH:mm') {
  if (dataStr) {
    return moment(dataStr).format(pattern)
  } else {
    return dataStr
  }
})

使用方法 在要用的页面里

//注意：时间戳一定要是毫秒 如果后台传过来的是秒的话 可以直接time*1000
//秒的时间戳是10位 毫秒的时间戳是13位
{{time | dateformat}}

4、从url里获取参数，去动态请求数据
在methods里

getUrl () {
      // 获取url
      this.id = this.$route.query.id
    }

再在created 调用

created () {
    this.getUrl()
  }

在watch里监听url

watch: {
    $route (to, from) {
      this.id = to.query.id
      this.$router.go(0)//因为单页面应用改变#后面的参数不会自动刷新，添加这句可以自动刷新页面。看自己需求
    }
  }

可以说我这个写的是非常的详细了。

5、在vue项目中使用element-ui时，侧边栏刷新光标失效
解决办法：

动态绑定 <el-menu :default-active="activeIndex">

<el-menu-item index="要去的路由地址" >

在data里return一个activeIndex

return {
      activeIndex: ''
    }

在mounted中

mounted () {
    this.activeIndex = window.location.href.split('/')[4]// 你可以打印下这个this.activeIndex
  }

6、当获取到的数据，赋值给data里时 能够打印出来，但是渲染不出来。
这种情况下可以使用Vue.set
当想把获取到的值赋值给tableData里的某个字段里 如果还是循环的多个 可以在循环时加个下标
下面展示的是把获取到的值赋值在tableData里的node字段上

import Vue from 'vue'  //引入

data () {
    return {
      tableData: [],
      }
  }

Vue.set(this.tableData[index],"node",res.data.result.name)

7、将登录时拿取到的token，存放在请求头中的Authorization
在登录时将返回的数据存到localStorage

// 点击登录
    handleLogin () {
      this.$http.post('login/login', this.loginForm).then(res => {
        localStorage.setItem('Authorization', res.data.result.token)
        if (this.$route.path === '/login') {
          this.$router.push({ path: '/' })
        } else {
          this.history.go(-1)
        }
      }).catch(error => {
        this.$message.error('账号或密码错误')
        console.log(error)
      })
    }

在main.js里面设置个拦截器

// 添加请求拦截器，在请求头中加token
request.interceptors.request.use(
  config => {
    if (localStorage.getItem('Authorization')) {
    	//将获取到的localStorage添加到请求头
      config.headers.Authorization = localStorage.getItem('Authorization')     }
    return config
  },
  error => {
    return Promise.reject(error)
  })

这样就会在每次请求时Authorization会携带着token一起请求了。

8、node-sass下载失败 报错
解决方法：使用淘宝镜像源
设置变量 sass_binary_site，指向淘宝镜像地址。示例：

npm install node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

8、element的级联选择器el-cascader同时获取id与lable
给组件设置个ref

<el-cascader
   	:options="organizationList"
    ref="cascader"
    :show-all-levels="false"
    @change="handleItemChange"
    placeholder="请选择负责科室"
    :props="{ checkStrictly: true,expandTrigger: 'hover',value:'id',label:'name',children:'children' }"
   	clearable></el-cascader>

//单选时能获取到所选的lable，是个数组，如果只是要最后一个就取数组的下标-1就行
this.$refs['cascader'].getCheckedNodes()[0].pathLabels