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

---

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