vue入坑總結

時間 2019-11-19

標籤 vue 總結简体版

原文原文鏈接

一、Do not mount Vue to <html> or <body> - mount to normal elements instead.javascript

Vue2.x以後不推薦掛載vue實例到<html>和<body>上；css

二、Vue2.x在loader上不支持直接書寫！style！css！style.css；應該爲都爲每一個loader添加一個-loader；html

三、vue2.x在webpack打包上，直接將main指向vue.common.js；（有待補充）;在webpack.config.js中添加：vue

resolve: {
    alias: {
        'vue': 'dist/vue.js'
    }
}

四、在vue-cli腳手架中，已經在build文件家中的utils.js設置好了css-loader加載：java

 // https://vue-loader.vuejs.org/en/configurations/extract-css.html
  return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }
}

所以不用重複在webpack.base.config.js中配置css-loader，而引入全局css樣式的方法有：webpack

1)直接在head標籤裏面使用link標籤引入web

2)在style標籤中使用@import引入vue-cli

3)在main.js中使用import引入sass

五、注：每個vue組件都是一個vue實例，而每個vue組件都要求有一個根節點，不容許存在並排節點：less

錯誤實例：

<template>
    <head-top></head-top>
    <main></main>
</template>

　　正確實例：

<template>
     <div>
       <head-top></head-top>
        <main></main>
    </div>
</template>

六、父子組件使用事件綁定通訊時，必須用v-on，不能使用簡寫，不然沒有反應。

七、通常複用的組件不存在同一個父組件裏，由於數據的處理比較麻煩。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。