vue入坑總結


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

Vue2.x之后不推薦掛載vue實例到<html>和<body>上;

2、Vue2.x在loader上不支持直接書寫!style!css!style.css;應該為都為每個loader添加一個-loader;

3、vue2.x在webpack打包上,直接將main指向vue.common.js;(有待補充);在webpack.config.js中添加:

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

4、在vue-cli腳手架中,已經在build文件家中的utils.js設置好了css-loader加載:

 // 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樣式的方法有:

1)直接在head標簽里面使用link標簽引入

2)在style標簽中使用@import引入

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

 

5、注:每一個vue組件都是一個vue實例,而每一個vue組件都要求有一個根節點,不允許存在並排節點:

錯誤實例:

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

  正確實例:

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

  

6、父子組件使用事件綁定通信時,必須用v-on,不能使用簡寫,否則沒有反應。

7、一般復用的組件不存在同一個父組件里,因為數據的處理比較麻煩。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM