vue的初步配置及其扩展
版本是@vue/cli => v2.x版本 cli是v3.x版本
配置打包环境
- 在build目录下的utils.js大约51行 (版本请参考vue-cli入门)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
publicPath: '../../' // +
})
} else {
return ['vue-style-loader'].concat(loaders)
}
- 在config/index.js大约54行
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './', //改 不改会白屏(可能)
- 在build/webpack.base.conf.js的大约29行
//在其它编辑器可能失效
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
//配置到 ‘components’ 的路径具体字符可按自己喜欢配置
'@componets': resolve('src/components),
'@router': '' ;//省略
}
- 以上的alias路径配置只有在转化为node依赖(在html里的src请求)(靠node解析才有用)因此多用于嵌套组件的引入
我一般会用img代替背景图片去省略长路径
扩展
备注: 根据个人喜好建立(在src下)文件夹以整理资源
pages
存放单页型组件
service / api
把所有的数据接口导出为方法,以便使用
mock
模拟数据 参考vue-mockjs使用文档
store
状态管理
utils
一些杂乱的插件或组件的整理
存放axios文件配置