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.
3.jsonp 封装与调用以及修改后端代理请求数据
先引入npm的jsonp 在封装jsonp 在拼接返回的数据后在引入到页面,但是会出现跨域问题,此时需要修改webpack里面的配置问题,达到修改后端代理解决跨域问题。
4 vuex的使用
4.1 vuex是什么
是状态管理工具使状态以一种个预测的方式发生变化 是一种设计思想。
4.2 使用场景 多组件共享、复杂的数据传递
报错类型:
1.
解决方法: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)
解决办法如下: