webpack+vue2.0遇到的一些坑

部分依賴包的版本：

"dependencies": {
   "vue": "^2.3.3",
   "vue-router": "^2.3.1"
 },
"devDependencies": {
　 "eslint-loader": "^1.7.1",
　 "stylus": "^0.54.5",
   "stylus-loader": "^3.0.1",
　　"url-loader": "^0.5.8",
   "vue-loader": "^12.1.0",
   "vue-style-loader": "^3.0.1",
   "vue-template-compiler": "^2.3.3",
　　"webpack": "^2.6.1",
}

1.使用stylus需要先再package.json中配置'stylus'和'stylus-loader',並執行'npm install stylus-loader stylus --save-dev'命令。

1.1將所有styl文件依賴到一個主文件index.stly，然后在main.js里依賴主文件

//index.styl文件，通過@import將其他styl文件注入依賴
@import "base"
@import "mixin"
@import "icon"

 

2.在webpack.base.conf文件中配置別名以及擴展名

注意：‘__dirname’是兩個下划線！

resolve: {
    extensions: ['.js', '.vue', '.json', '.styl'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'src': path.resolve(__dirname, '../src'),
      'common': path.resolve(__dirname, '../src/common'),
      'components': path.resolve(__dirname, '../src/components')
    }
  }

配置好別名和擴展名后，main.js就可以這樣寫：

import Vue from 'vue';
import App from './App';
import Router from 'vue-router';
//components前面可以加上'@/'，也可以省略不寫
//如果沒有別名，就要寫成“import goods from '../components/goods/goods';“
import goods from 'components/goods/goods';
import seller from 'components/seller/seller';
import ratings from 'components/ratings/ratings';
import '@/common/stylus/index';