0%

vue入坑

Posted on Edited on In Views: Valine:
Symbols count in article: 2.6k Reading time ≈ 2 mins.

一直在学习angular，没接触其他的框架，vue感觉上是入门上手很快，所以也来了解学习学习，特别整理下入vue坑的坎坷曲折过程摸着石头过河吧

自定义组件

常用angular，angular中组件都是分离的，html模板、style样式、js控制器是分为三个文件构成了一个组件。但vue很奇怪的是喜欢单文件组件，也就是关注点分离，而不是文件类型分离。这个确实在刚上手的时候很不顺手的，需要慢慢适应。来看看vue的组件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<template>
    <div>hello, {{msg}}</div>
</template
<script>
export default {
  name: 'Hello',
  data () {
    return {
      msg: 'vue'
    }
  }
}
</script>
<style scope>
div{
    color: red;
}
</style>

上面使用<template>标签标记的是组件的html，<script>标签中定义了这个组件并导出，<style>里面定义了这个组件的css样式。这即是vue的单文件组件。

当然，也支持文件类型分离的，就是模板文件依旧为Hello.vue，只不过js内容和css内容分为两个对应的文件，这个时候就需要手动引入：

1
2
3
4
5
<template>
    <div>hello, {{msg}}</div>
</template
<script src="./Hello.js"></script>
<style src="./Hello.css"></style>

这个官方的解释为：

一个重要的事情值得注意，关注点分离不等于文件类型分离。在现代 UI 开发中，我们已经发现相比于把代码库分离成三个大的层次并将其相互交织起来，把它们划分为松散耦合的组件再将其组合起来更合理一些。在一个组件里，其模板、逻辑和样式是内部耦合的，并且把他们搭配在一起实际上使得组件更加内聚且更可维护。

定义路由

我们添加了一些组件，现在希望添加路由来进行跳转到对应的页面。路由我们使用官方的路由组件：vue-router。

我们在用vue-cli创建vue项目的时候，已经添加了vue-router组件，如果没有，你可以参照vue-router官方文档来使用。

我们发现在App.vue中的template中有一行：

1
<router-view/>

这个标签标记了路由的出口，路由匹配到的组件将渲染到这里。

再看看定义的路由，文件路径为：src > router > index.js：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

目前只定义了一个默认路由，当访问http:localhost:8081的时候就渲染HelloWorld组件。

我们可以添加自己定义的路由，只需要import对应的组件，然后添加到routes数组对象里面就可以。如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/components/login/login.vue'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloTest
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    }
  ]
})

注意：定义的路由前面一定要加上斜杠/才能正常输出，否则匹配不到，别问我怎么知道的，说多了都是泪~🤣

文件类型分离带来的问题

因为以前的习惯，我还是尝试着把一个组件分离为三个文件来写，比如login组件，我有三个文件： login.vue、login.js、login.css。这时，当我在路由里面import后出现了问题：

1
Failed to mount component: template or render function not defined.

也是，当使用import语句导入的时候，其实默认的文件类型是.js，也就是说我的导入语句：

1
import Login from '@/components/login/login'

导入的是文件：components > login > login.js，而不是login.vue。这就很尴尬了。解决这个问题有三个方法：

  1. 在导入语句明确加上文件类型：import Login from '@/components/login/login.vue'
  2. 将js文件不要和vue文件同名，import里面的文件名应该是vue文件的名字，和js文件做区分就ok了。
  3. 向恶势力低头吧，采用单文件组件不就啥事都没了~

暂时就这么多，后续继续更新~

码字辛苦，打赏个咖啡☕️可好？💘