vue入坑

自定义组件

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

<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内容分为两个对应的文件，这个时候就需要手动引入：

<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中有一行：

<router-view/>

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

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

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数组对象里面就可以。如下：

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
    }
  ]
})

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

webstorm vue import component: "Module is not installed"

有没有发现，在上面import组件的时候，路径是手动打上去的，而且下面有波浪号提示：Module is not installed。这就很揪心了，在webstorm这种强大的IDE中不应该出现这种提示啊，而且在import的时候路径也会有提示的，要不然鬼知道自己写对了没。。。

那我们需要搞清楚导入语句中的，让我们再看看导入语句：import HelloWorld from '@/components/HelloWorld'。首先可以确定的是，这个form后面的字符串应该是路径，但是为啥是以@开始？？

再回头想想，我们初始化项目的时候使用了webpack的方式，那么这个路径会不会和webpack有关呢？是不是在哪里定义了这个@符号？在项目中全局查找字符串'@'，果然在文件bulid > webpack.base.conf.js中找到了定义：

 resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': resolve('src'),
    }
},

根据这个定义我们可以猜测，@这个符号其实就是替代了当前项目的src目录。那我们需要让webstorm知道我们的这个定义。

打开设置：preferences > Languages & Frameworkes > JavaScript > Webpack，里面有个webpack configuration file，默认里面是：

/.../vue-app/webpacj.conf.js

也就是默认选择的是项目文件夹里面的默认的webpack配置文件，这也无可厚非，但是我们项目里面的webpack的位置不一样啊，所以我们需要改为我们自己的配置。再看build里面，有多个webpack.config.js，分别为基本（webpack.base.conf.js）、开发环境(webpack.dev.conf.js)、生产环境(webpack.prod.conf.js)，我们在webstorm中当然是开发环境了，所以直接选择webpack.dev.conf.js：

/.../vue-app/build/webpack.dev.conf.js

点击apply，然后就可以看到下波浪线消失了，并且当我们点击对应的组件的时候回识别并跳转。同时我们输入的时候也会有路径提示。nice~

文件类型分离带来的问题

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

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

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

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. 向恶势力低头吧，采用单文件组件不就啥事都没了~

---

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