码迷,mamicode.com
首页 > Web开发 > 详细

webpack+vue2.0遇到的一些坑

时间:2017-06-09 22:42:47      阅读:335      评论:0      收藏:0      [点我收藏+]

标签:compile   save   json   component   版本   1.0   url   icon   ext   

部分依赖包的版本:

 1 "dependencies": {
 2    "vue": "^2.3.3",
 3    "vue-router": "^2.3.1"
 4  },
 5 "devDependencies": {
 6   "eslint-loader": "^1.7.1",
 7   "stylus": "^0.54.5",
 8    "stylus-loader": "^3.0.1",
 9   "url-loader": "^0.5.8",
10    "vue-loader": "^12.1.0",
11    "vue-style-loader": "^3.0.1",
12    "vue-template-compiler": "^2.3.3",
13   "webpack": "^2.6.1",
14 }

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‘;

 

webpack+vue2.0遇到的一些坑

标签:compile   save   json   component   版本   1.0   url   icon   ext   

原文地址:http://www.cnblogs.com/hello-wuhan/p/6973773.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!