muse-ui升级至2.0最新版，采用单组件加载模式

README.md

@@ -69,9 +69,9 @@ gif图好像被压缩的太多了，感兴趣的可以clone后查看。
 ***
 
 ## 更新说明
-
-* 对更多内容进行详细的注释，修正了左滑删除的一些错误，现在能够对消息进行正常的左滑删除，然后在朋友列表进行对话就能重新生成聊天队列了（可以删除信息后再继续与机器人进行对话了），另外扩大了删除按钮的宽度————3.28
-
+> 最近更新说明列表
+* 项目muse-ui已升级至2.0.0，并且优化为单组件加载，精简体积，增加了响应键盘事件，升级ui后出现的小部分问题下次更新就会修复，目前正在整体**重构css样式**，优化移动端的兼容性问题，目的是使视图在各平台上都能够保持一致性
+* 对更多内容进行详细的注释，修正了左滑删除的一些错误，现在能够对消息进行正常的左滑删除，然后在朋友列表进行对话就能重新生成聊天队列了（可以删除信息后再继续与机器人进行对话了），另外扩大了删除按钮的宽度
 
 ## 问题反馈
 
@@ -112,20 +112,21 @@ gif图好像被压缩的太多了，感兴趣的可以clone后查看。
 <pre>
 .
 ├── README.md           
-├── build              // 构建服务和webpack配置,转发聊天机器人以及ajax获取用户数据相关内容
-├── config             // 项目不同环境的配置
-├── dist               // 项目build目录
-├── index.html         // 项目入口文件
-├── package.json       // 项目配置文件
-├── mockdata.json      // 项目模拟数据
+├── build                 // 构建服务和webpack配置,转发聊天机器人以及ajax获取用户数据相关内容
+├── config                // 项目不同环境的配置
+├── dist                  // 项目build目录
+├── index.html            // 项目入口文件
+├── package.json          // 项目配置文件
+├── mockdata.json         // 项目模拟数据
 ├── src
-│   ├── common         // 公用的css样式
-│   ├── components     // 各种组件
-│   ├── router         // 存放路由的文件夹
-│   ├── vuex	         // 存放Vuex的相关
-│   ├── App.Vue        // 模板文件入口
-│   └── main.js        // Webpack 预编译入口
-├── static             // css js 和图片资源
+│   ├── common            // 公用的css样式
+│   ├── components        // 各种组件
+│   ├── router            // 存放路由的文件夹
+│   ├── vuex	            // 存放Vuex的相关
+│   ├── muse-ui.config.js // muse-ui单组件加载配置
+│   ├── App.Vue           // 模板文件入口
+│   └── main.js           // Webpack 预编译入口
+├── static                // css js 和图片资源
 │   
 
 </pre>

build/webpack.base.conf.js

@@ -3,7 +3,7 @@ var utils = require('./utils')
 var config = require('../config')
 var vueLoaderConfig = require('./vue-loader.conf')
 
-function resolve (dir) {
+function resolve(dir) {
   return path.join(__dirname, '..', dir)
 }
 
@@ -21,12 +21,18 @@ module.exports = {
   resolve: {
     extensions: ['.js', '.vue', '.json'],
     alias: {
+      'muse-components': 'muse-ui/src',
       'vue$': 'vue/dist/vue.esm.js',
-      '@': resolve('src'),
+      '@': resolve('src')
+
     }
   },
   module: {
     rules: [
+      {
+        test: /muse-ui.src.*?js$/,
+        loader: 'babel-loader'
+      },
       {
         test: /\.(js|vue)$/,
         loader: 'eslint-loader',

package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "axios": "^0.15.3",
-    "muse-ui": "^2.0.0-rc.5",
+    "muse-ui": "^2.0.0",
     "vue": "^2.2.2",
     "vue-router": "^2.3.0",
     "vuex": "^2.2.1"
@@ -46,6 +46,7 @@
     "html-webpack-plugin": "^2.28.0",
     "http-proxy-middleware": "^0.17.3",
     "keycode": "^2.1.8",
+    "less": "^2.7.2",
     "opn": "^4.0.2",
     "optimize-css-assets-webpack-plugin": "^1.3.0",
     "ora": "^1.1.0",

src/App.vue

@@ -1,4 +1,5 @@
 <template>
+
   <div id="app">
     <!--头部导航-->
     <div class="container-top">
@@ -74,9 +75,8 @@ export default {
   .my-dialog
     position: absolute
   .my-personindex
-    .bottom
-      .material-icons
-        color: color-b
+    .material-icons
+      color: color-b
   .container-top
     position: fixed
     z-index: 101

src/components/bottomtab/bottom-tab.vue

@@ -20,6 +20,7 @@
 
 <script>
 export default {
+  name: 'bottomTab',
   data() {
     return {
       bottomNav: 'message'

src/components/dialog/dialog.vue

@@ -34,10 +34,12 @@
         <mu-text-field hintText="输入文字"
                        v-model="value"
                        @focus="focus"
-                       @blur="blur" />
+                       @blur="blur"
+                       @keyup.enter.native="sendValue"
+                        />
 
         <mu-icon-button icon="send"
-                        @click="sendValue" />
+                        @click="sendValue"   />
       </div>
       <div class="bottom">
         <mu-icon-button icon="mic_none" />
@@ -57,6 +59,7 @@ import { mapState, mapMutations } from 'vuex'
 import myDialogue from './dialogue'
 
 export default {
+  name: 'dialog',
   components: {
     myDialogue
   },

src/components/dialog/dialogue.vue

@@ -16,6 +16,7 @@
 <script>
 import { mapGetters } from 'vuex'
 export default {
+  name: 'dialogue',
   props: ['userData'],
   computed: {
     ...mapGetters(['nowMessageList']),

src/components/discover/discover.vue

@@ -98,6 +98,9 @@
   </div>
 </template>
 <script>
+export default({
+  name: 'discover'
+})
 </script>
 <style lang="stylus"  scoped>
 @import '../../common/stylus/mixin.styl'

src/components/friends/friends.vue

@@ -77,6 +77,7 @@
 </template>
 <script>
 export default {
+  name: 'friend',
   computed: {
     // 获取全部好友
     friends() {

src/components/message/message.vue

@@ -42,6 +42,7 @@ import { mapState, mapGetters, mapMutations } from 'vuex'
 // 后续会将滑动封装至子组件
 // import swipeDelete from './swipeDelete'
 export default {
+  name: 'message',
   data() {
     return {
       isSwipe: [false, false, false]

src/components/message/swipeDelete.vue

@@ -5,6 +5,7 @@
 </template>
 <script>
 export default {
+  name: 'swipeDelete',
   methods: {
     clickitem() {
       this.$emit('clickitem')

src/components/personindex/personindex.vue

@@ -74,11 +74,11 @@
       </div>
     </div>
 
-    <mu-tabs class="bottom">
+    <mu-tabs class="bottom" >
       <mu-tab value="tab1"
               icon="videocam" />
       <mu-tab value="tab2"
-              icon="phone" />
+              icon="phone" color="#f00"/>
       <mu-tab value="tab3"
               icon="chat_bubble"
               @click="showDialog_x" />
@@ -89,6 +89,7 @@
 <script>
 import { mapState, mapGetters, mapMutations } from 'vuex'
 export default {
+  name: 'personindex',
   data() {
     return {
       activeTab: 'tab1'

src/components/search/search.vue

@@ -33,6 +33,7 @@
 <script>
 import { mapState, mapMutations } from 'vuex'
 export default {
+  name: 'search',
   data() {
     return {
       value: '',

src/components/sidebar/sidebar.vue

@@ -48,16 +48,13 @@
 </template>
 
 <script>
-import { mapMutations } from 'vuex'
+import { mapState, mapMutations } from 'vuex'
 export default {
-  computed: {
-    sidebar() {
-      return this.$store.state.sidebar
-    },
-    self() {
-      return this.$store.state.data.self
-    }
-  },
+  name: 'sidebar',
+  computed: mapState({
+    sidebar: 'sidebar',
+    self: state => state.data.self
+  }),
   methods: {
     ...mapMutations(['showSidebar', 'showPersonindex']),
     showPersonindex_x() {

src/components/topnav/top-nav.vue

@@ -28,6 +28,7 @@
 <script>
 import { mapState, mapMutations } from 'vuex'
 export default {
+  name: 'topNav',
   computed: mapState({
     avatar: state => state.data.self.avatar,
     headerTitle: 'headerTitle'

src/main.js

@@ -5,6 +5,9 @@ import axios from 'axios'
 import App from './App'
 import router from './router/index'
 import store from './vuex/store'
+import MuseUi from './muse-ui.config'
+
+Vue.use(MuseUi)
 
 // 懒加载模块,由于暂时没有几张图，主要为后续使用做准备，使用方法见https://github.com/hilongjw/vue-lazyload
 import VueLazyload from 'vue-lazyload'
@@ -13,17 +16,9 @@ Vue.use(VueLazyload, {
   error: 'static/images/lazy.jpg',
   loading: 'static/images/lazy.jpg',
   attempt: 1,
-  listenEvents: [ 'scroll' ]
+  listenEvents: ['scroll']
 })
 
-// 引入基础css样式
-import './common/stylus/base.styl'
-
-// 加载ui
-import MuseUI from 'muse-ui'
-import 'muse-ui/dist/muse-ui.css'
-Vue.use(MuseUI)
-
 // 在vue原型中添加$http方法等于axios
 Vue.prototype.$http = axios
 // 设置默认打开的页面

src/muse-ui.config.js

@@ -0,0 +1,46 @@
+// 单组件加载
+
+// 加载基础样式
+import 'muse-components/styles/base.less'
+import appBar from 'muse-components/appBar'
+import avatar from 'muse-components/avatar'
+import badge from 'muse-components/badge'
+import * as bottomNav from 'muse-components/bottomNav'
+import flatButton from 'muse-components/flatButton'
+import iconButton from 'muse-components/iconButton'
+import chip from 'muse-components/chip'
+import drawer from 'muse-components/drawer'
+import icon from 'muse-components/icon'
+import * as list from 'muse-components/list'
+import textField from 'muse-components/textField'
+import * as tabs from 'muse-components/tabs'
+import divider from 'muse-components/divider'
+import subHeader from 'muse-components/subHeader'
+// 这个模块在项目官网上并没有看到，但是看到作者在issues上回答时说是高分辨率屏的处理，于是就试着加进去了
+import {retina} from 'muse-components/utils'
+
+const components = {
+  appBar,
+  avatar,
+  badge,
+  ...bottomNav,
+  flatButton,
+  iconButton,
+  chip,
+  drawer,
+  icon,
+  ...list,
+  textField,
+  ...tabs,
+  divider,
+  subHeader
+}
+
+export default {
+  install (Vue) {
+    Object.keys(components).forEach((key) => {
+      Vue.component(components[key].name, components[key])
+    })
+    retina()
+  }
+}