vue 2.0 從入門安裝配置到學習遇到的問題

一.解決vue項目中,用submit等編輯器格式化後,因爲縮進導致錯誤

原因:

• 因爲在 package.json文件我們可以發現，在文件中默認安裝了eslint-loader模塊
• eslint-loader模塊是目前相對比較流行的代碼檢測工具，可以檢測書寫的代碼是否符合統一規範，可以在一些比較大型的項目開發中統一開發人員的代碼風格（代碼縮進不符合規範）。

解決方法:

• 一. 按照eslint-loader規則,嚴格書寫代碼,估計是2個縮進(如果習慣用4個空格縮進的 那就看看方法2了);

• 二.關閉 eslint-loader

  • 如果安裝是 webpack-simple 即是普通項目,打開 webpack.config.js 去掉 eslint的配置即可;
  • 如果是vue項目裏 直接安裝 webpack的,需要在項目根目錄下的build文件夾下找到webpack.base.conf.js文件,去掉eslint配置.

我是直接安裝webpack的,直接生成的代碼爲

{
        test: /\.(js|vue)$/,
        // loader: 'eslint-loader',
        enforce: 'pre',
        include: [resolve('src'), resolve('test')],
        // options: {
        //   formatter: require('eslint-friendly-formatter')
        // }
      },

去掉關於eslint的配置即可.

---

二. 引用外部文件

1.在index.html 引入文件

• 問題:
  一開始把外部的文件都放在src目錄下,然後在index.html一直引入也一直找不到該路徑,路徑是對的,就是一直報404.

• 解決:
  上網找答案好久找, 原來在創建項目時會生成static文件夾,只需要把文件放在 static目錄, index.html 按你擺放的路徑就不會出錯了
  ps: 因爲我有一個寫好的樣式,想直接在index.html直接引用就好,如果不想引入可往下看

2.在vue引入文件

• 2.1 引入js文件

  • import ‘文件路徑’
  • import 文件別名 from ‘文件路徑’

• 2.2 引入css文件

  • @import ‘文件路徑’,

  如果在style 寫有scoped 說明該樣式在此vue組件裏調用樣式,不會全局影響其他組件樣式

遇到的坑:

• 問題一:

  • 配置sass/less文件會報錯

  • 原因: 官網的配置並沒有配置,需要手動配置
    npm install less sass-loader --save

並且在webpack.base.conf.js 配置文件下配置以下:
ps: 如果是普通項目,找到對應的webpack.base.js文件修改即可

{
  test: /\.css$/,
  loader:'style-loader!css-loader'
}

• 問題二

  • 如果引入js文件報以下錯誤

  Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

  在配置文件找到以下代碼註釋即可,原因可能是裏面的js文件沒有按es6規範寫,研究好久才知道這問題,如果有知道可以和我說解決方案

  {
     test: /\.js$/,
     loader: 'babel-loader',
     include: [resolve('src'), resolve('test')]
   },
   註釋即可

總體 vue 文件 結構 如下

<template>
    // 相當寫html文件
</template>

<script>
    // 引入js文件
    import '文件路徑'
    import 文件別名 from  '文件路徑'
</script>

<style lang="sass" scoped>
    // 引入樣式文件
     @import '文件路徑'
</style>