vuejs 音乐app项目记录

1.相对路径引用会出现编译报错

在webpack.base.conf.js 文件中

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'src': resolve('src'),
      'common': resolve('src/common'),
      'components': resolve('src/components')
    }
},

2路由使用

2.0路由的配置 index.js文件中

import Vue from 'vue'
import Router from 'vue-router'
import Recommend from 'components/recommend/recommend'
import Singer from 'components/singer/singer'
import Rank from 'components/rank/rank'
import Search from 'components/search/search'

Vue.use(Router)

export default new Router({
routes: [
    {
       path: '/recommend',
       component: Recommend
    },
    {
       path: '/singer',
       component: Singer
    },
    {
       path: '/rank',//path一定要加 "/"
       component: Rank
    },
    {
       path: '/search',
       component: Search
    },
]
})

2.1 引入到vue实例

在main.js文件中import router from './router'
new Vue({
el: '#app',
render: h => h(App),
router//传入对象
})
2.2路由使用

app.vue文件中 <router-view></router-view> 在通过顶导组件使用
2.3顶导组件介绍

<router-link tag="div" class="tab-item" to="/recommend">
<span class="tab-link">推荐</span>

</router-link>/*tag属性为渲染对象 to 为路径*/

2.3.1切换的项高亮显示（被选中的项高亮）配置根路由在index.js中配置router根路径redirect

   routes: [
    {
        path:'/',
        redirect: '/recommend' 指向的页面

    },

3.jsonp 封装与调用以及修改后端代理请求数据

先引入npm的jsonp 在封装jsonp 在拼接返回的数据后在引入到页面，但是会出现跨域问题，此时需要修改webpack里面的配置问题，达到修改后端代理解决跨域问题。

4 vuex的使用

4.1 vuex是什么

是状态管理工具使状态以一种个预测的方式发生变化是一种设计思想。

4.2 使用场景多组件共享、复杂的数据传递

报错类型：

解决方法：vuejs2.0与1.0不同 2.0是在webpack.base.conf.js文件中删除以下代码：在运行npm run dev

2.axios base/loading/loading base/scroll

解决办法： npm install --save axios

上述的方法请求文件时候，body的默认格式不是form-data。因此我们需要请求的数据格式为form-data的时候，需要使用下面的库 request

npm install --save request

3,报错：vue.common.js?e881:435 TypeError: Cannot read property ‘children’ of undefined

把dom里面的ref改掉。ref=”menuWrapper”,ref=”foodsWrapper”,不要写成menu-wrapper形式就能解决问题

4,报错类型如下：

createError.js?16d0:16 Uncaught (in promise) Error: Request failed with status code 404

at createError (createError.js?16d0:16)
at settle (settle.js?db52:18)

at XMLHttpRequest.handleLoad (xhr.js?ec6c:77)

解决办法如下：

vuejs 音乐app项目记录

猜你喜欢