🔥 use muse-ui

Author: xrr2016

package.json

@@ -8,17 +8,17 @@
     "dev": "node build/dev-server.js",
     "build": "node build/build.js",
     "server": "nodemon app.js",
-    "start" : "node app.js"
+    "start": "node app.js"
   },
   "dependencies": {
     "axios": "^0.15.3",
     "body-parser": "^1.16.1",
     "express": "^4.14.1",
     "jquery": "^3.1.1",
     "mongoose": "^4.8.2",
+    "muse-ui": "^2.0.0-rc.5",
     "toastr": "^2.1.2",
     "vue": "^2.1.10",
-    "vue-material": "^0.7.1",
     "vue-router": "^2.2.0"
   },
   "devDependencies": {

src/App.vue

@@ -1,6 +1,9 @@
 <template>
   <div id="app">
-    <!-- <h2 class="md-dispaly-4 title">{{ title }}</h2> -->
+    <mu-appbar title="Title">
+      <mu-icon-button icon='menu' slot="left"/>
+      <mu-icon-button icon='expand_more' slot="right"/>
+    </mu-appbar>
     <router-view></router-view>
   </div>
 </template>
@@ -26,7 +29,6 @@ export default {
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  margin-top: 20px;
 }
 .title{
   letter-spacing: 1px;

src/assets/material.font.css renamed to src/assets/icon.css

@@ -1,42 +1,12 @@
 <template lang="html">
-  <md-table-card>
-      <!-- <md-toolbar>
-        <h1 class="md-title" style="flex:1;">Movie List</h1>
-        <md-button class="md-icon-button">
-         <md-icon>search</md-icon>
-        </md-button>
-      </md-toolbar> -->
-
-      <md-table-header>
-       <md-table-row>
-         <md-table-head>电影海报</md-table-head>
-         <md-table-head>电影名称</md-table-head>
-         <md-table-head>上映年份</md-table-head>
-         <md-table-head>电影类型</md-table-head>
-         <md-table-head>电影评分</md-table-head>
-         <md-table-head>操作</md-table-head>
-       </md-table-row>
-     </md-table-header>
-
-     <md-table-body>
-       <md-table-row v-for="movie of movies" :key="movie.id">
-         <md-table-cell><img :src="movie.image" alt=""></md-table-cell>
-         <md-table-cell>{{ movie.title }}</md-table-cell>
-         <md-table-cell>{{ movie.genres }}</md-table-cell>
-         <md-table-cell md-numeric>{{ movie.rating}}</md-table-cell>
-         <md-table-cell>
-           <md-button class="md-primary">编辑</md-button>
-           <md-button class="md-warn">删除</md-button>
-         </md-tanle-cell>
-       </md-table-row>
-     </md-table-body>
-
-  </md-table-card>
+  <div class="list">
+    List.vue
+  </div>
 </template>
 
 <script>
 export default {
-  mounted(){
+  created(){
     this.getMovies()
   },
   data(){

src/components/List.vue

@@ -1,12 +1,15 @@
 import Vue from 'vue'
 import App from './App'
 import toastr from 'toastr'
+import MuseUI from 'muse-ui'
 import axios from 'axios'
-import VueMaterial from 'vue-material'
 import router from './router'
-import 'vue-material/dist/vue-material.css'
-import './assets/material.font.css'
 import 'toastr/build/toastr.min.css'
+import 'muse-ui/dist/muse-ui.css'
+import './assets/icon.css'
+
+Vue.use(MuseUI)
+Vue.prototype.$http = axios
 
 toastr.options = {
   "closeButton": true,
@@ -31,8 +34,7 @@ toastr.options = {
 //   return prefix + url
 // })
 
-Vue.use(VueMaterial)
-Vue.prototype.$http = axios
+
 /* eslint-disable no-new */
 new Vue({
   created(){