vue museui 无法正常编译

使用 vue-cli 创建项目后,引入 muse-ui。运行后,muse-ui 无法正常编译。

输出效果如图:
图片描述

按照官方示例,应该如下显示:
图片描述

目前,我无法排查问题出在哪里...

我在 main.js 文件中的代码:

import Vue from 'vue'
import MuseUI from 'muse-ui'
import 'muse-ui/dist/muse-ui.css'
Vue.use(MuseUI)

import App from './App'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})
})

App.vue 文件

<template>
  <div id="app">
    <mu-appbar title="title">
      <mu-icon-button icon='menu' slot="left"/>
      <mu-icon-button icon='expand_more' slot="right"/>
    </mu-appbar>
  </div>
</template>

<script>
import Hello from './components/Hello'

export default {
  name: 'app',
  components: {
    Hello
  }
}
</script>

<style></style>

index.html 文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>test</title>
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="email=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="full-screen" content="yes">
    <meta name="browsermode" content="application">
    <meta name="x5-orientation" content="portrait">
    <meta name="x5-fullscreen" content="true">
    <meta name="x5-page-mode" content="app">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
阅读 4.7k
3 个回答

这个vue2.1.7的版本升级之后有问题,我正在修复,,,
今天vue发布了2.1.8版本修复了之前的问题,muse-ui也使用最新的compiler重新编译发布了新的版本,更新之后就可以了

npm install vue muse-ui --save
npm install vue-template-compiler --save

目前解决方法是在html文件那里引用css和js文件

<link rel="stylesheet" href="./static/css/muse-ui.css">
<script type="text/javascript" src="./static/js/muse-ui.js"></script>

还有一种比较特殊的情况 换下 dns 试试

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题