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. 向惡勢力低頭吧，採用單文件組件不就啥事都沒了~

---

暫時就這麼多，後續繼續更新~