Open oliver1521314 opened 7 years ago
this is the code of vue file
<template> <div id='userManagePart'> <div> <con-title>用户管理</con-title> </div> <el-row> <el-col :span="5"> <div> <teemTree></teemTree> </div> </el-col> <el-col :span="19"> <div> <userDataList></userDataList> </div> </el-col> </el-row> </div> </template>
Only the style markup of teemTree component wouldn't be extract into css file ,But the style of userDataList component is ok , I check the two components ,they are just the same.
Below is the code of teemTree component:
<template> <div class="teem-tree"> <div class="teem-tree-title">部门</div> <div class="tree"> <el-tree :data="treeD" node-key="deptId" accordion default-expand-all :highlight-current="rowSelect" :expand-on-click-node="false" @node-click="TreeClick" :props="defaultTreeProps"> </el-tree> </div> </div> </template> <script> import {vueEle} from '../common/js/vueBus.js' export default { data() { return { rowSelect:true, defaultTreeProps:{ children:'childList', label:'deptName' } } }, props:['treeD'], methods:{ TreeClick(data){ if(data.deptId!=null){ vueEle.$emit('deptChange',data.deptId); this.rowSelect=true; } } }, filters:{ formatIndex(_val){ return '2-'+_val } }, created(){ vueEle.$on('ChangeStyle',(changevalue)=>{ this.rowSelect=changevalue; }) }, mounted(){ console.log(this.treeD) } } </script> <style scoped> .teem-tree{ border-radius: 4px; } .teem-tree-title{ padding: 0 15px; line-height: 30px; background-color: #5f9b69; color: #fff; } </style>
the webpack config is below:
module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', options: { loaders: { css: ExtractTextPlugin.extract({ use: loaders, fallback: ['vue-style-loade'] })} } }, { test: /\.js$/, loader: 'babel-loader', include: [resolve('src'), resolve('test')], query: { presets: ['es2015'] } }, { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'file-loader', query: { limit: 8000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } }, { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader?limit=10000&name=static/fonts/[name].[ext]',//?limit=10000&'+ urlname // query: { // limit: 8000, // name: utils.assetsPath('fonts/[name].[hash:7].[ext]') // } } ]
I think you have a typo in webpack.config.js:
fallback: ['vue-style-loade']
shouldn't it be vue-style-loader?
vue-style-loader
this is the code of vue file
Only the style markup of teemTree component wouldn't be extract into css file ,But the style of userDataList component is ok , I check the two components ,they are just the same.
Below is the code of teemTree component:
the webpack config is below: