Vue Router解释

昨晚自己新建一个Vue Project打算模仿京东商城做一下网站，感觉自己学了几个月的Vue，胸有成竹，以为很简单，没想到现实就是那么残酷，连基本路由都配置不好。

不过经过昨晚，终于把一些以前不明白的东西弄懂了。

我一般都是用Vue的脚手架搭建的项目。

Src的目录下App.vue是主文件，入口文件。所有组件和路由都需要挂载进这个文件。

重点是这个

       <router-view></router-view>

以前我搞不懂这个router-view是什么，和router有什么关系。
昨晚终于明白了。
原来是把所有路由放在router文件夹下面的index.js里面，然后这些路由或者页面，都会挂载进App.vue的文件里。

<template>
  <div id="app">
      <router-view></router-view>
      <player></player>
  </div>
</template>

这道理很简单，但是新手没有人指导的话不容易想明白。

还有关于路径的，当想import组件的时候

  import my-component from 'components/my-component'

会报错，提示找不到这个组件。
这也是新手容易犯的错误。
两个解决办法
一： 改为相对路径

  import my-component from './components/my-component'

二：
在webpack.base.conf.js的文件里的resolve选项的alias对象设置

alias: {
    'components': resolve('src/components')
}

webpack就会把这个路径通过这个函数

function resolve(dir) {
  return path.join(__dirname, '..', dir)
}

把路径配置好。
不明白的请留言。

上星期，前端框架撕逼大战，作为一个新手，我也愤怒了，也怼了几句。不过静下来想想，之前我是因为水平不够暂时不学React，看来是时候学习React了。
React和Vue很多相似的地方，应该不难学，但是那语法比Vue更难写和更难懂。慢慢来。

本人承接前端外包项目和应聘前端工程师
广州地区
Github: github.com/hccdj131
有兴趣的请联系