标签: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‘;
标签:compile save json component 版本 1.0 url icon ext
原文地址:http://www.cnblogs.com/hello-wuhan/p/6973773.html