前面两个组件使用都没错，最后使用TabBar组件报错

按照视频里老师的步骤操作的，不过第一步在main.js里面导入mint-ui好像就有问题，但是它没报错，mint-ui的引号下边有几个点，移到那里显示如下：

main.js：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/'
import VueResource from "vue-resource"
import MintUi from 'mint-ui'
import 'mint-ui/lib/style.css'

Vue.use(VueResource);
Vue.use(MintUi);

Vue.config.productionTip = false

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

demo17的index.vue：

<template>
  <div>
    <div>移动端组件库Mint UI</div>
    <div>-----------------------------</div>

    <mt-tabbar>
      <mt-tab-item id="外卖">
        <img slot="icon" src="../../assets/100x100.png" />
        外卖
      </mt-tab-item>
      <mt-tab-item id="订单">
        <img slot="icon" src="../../assets/100x100.png" />
        订单
      </mt-tab-item>
      <mt-tab-item id="发现">
        <img slot="icon" src="../../assets/100x100.png" />
        发现
      </mt-tab-item>
      <mt-tab-item id="我的">
        <img slot="icon" src="../../assets/100x100.png" />
        我的
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
import Vue from 'vue'

import { Toast } from "mint-ui";
import { MessageBox } from "mint-ui";
import { Tabbar, TabItem } from "mint-ui";

Vue.component(Tabbar.name, Tabbar);
Vue.component(TabItem.name, TabItem);

export default {
  data() {
    return {};
  },
  mounted() {
    // Toast("提示信息");
    // MessageBox('提示', '操作成功');
  }
};
</script>

运行后控制台报错结果如下，共3个错误：

页面显示的内容和最后一条报错信息一样。

Aurora_Meteor 2020-05-16

源自：Vue基础详解 2-26 移动组件库Mint UI

收起

9回答

好帮手慕星星回答被采纳获得+3积分 2020-05-17 19:17:54

同学你好，这张图片不是插件中自带的

是本地的图片，需要自己复制粘贴进去。前面老师是回复过的哦，让同学检查一下项目中是否存在这张图片。要细心一些。

祝学习愉快！

收起回答

好帮手慕星星 2020-05-17 17:34:32

同学你好，截图中安装过程没有问题，所有的包都安装成功了

启动之后是否影响了项目运行？不排除有插件版本问题，可以下载源代码，找到package.json文件，替换自己项目中的文件，将所有依赖删除，然后使用cnpm install命令安装下，会快一些。

祝学习愉快！

收起回答

提问者 Aurora_Meteor #1

我试了一遍，最后运行的时候还是提示那个找不到图片的错误...只不过这次出现了运行地址那一行...然后我从源码里把那种图片复制到项目里再打开页面就成功了...这个图片难道是要自己放进去，不是下载依赖的时候自己就有了的？如果只是因为这个图片是要自己放进去的话，那这么多次回答都白问了了io(╥﹏╥)o

2020-05-17 18:06:46

提问者 Aurora_Meteor 2020-05-17 11:46:05

我删除再次安装完，运行还是一样的错误....我看安装的时候好像有什么错误？是版本不一致导致的吗？

收起回答

好帮手慕星星 2020-05-17 11:33:30

同学你好，运行提示信息确实是图片没有找到

但是老师将同学粘贴的代码全部替换测试没有问题：

建议检查下项目中是否存在这张图片

可以再次将依赖删除，然后使用cnpm install命令安装一下，避免依赖安装不成功。

祝学习愉快！

收起回答

提问者 Aurora_Meteor 2020-05-16 21:10:56

我把node_modules又删除了，然后使用npm install重新安装了一下

这是安装好了吧？然后我运行，它报错，我以为是因为另一个项目在运行，所以把另一个关掉以后再运行这个，结果还是一样的错误，咋回事？

上面那一行应该不是错误吧？最后结束都是下图这样子，这是缺少图片吗，不应该呀...是我网络有问题在下载依赖的时候少东西了？我之前在只装了mint-ui以后没有删除node_modules文件夹，直接运行的npm install，当时安装完了运行就也是这个一样的错误。

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Demo1 from '@/pages/demo1/index'
import Demo2 from '@/pages/demo2/index'
import Demo3 from '@/pages/demo3/index'
import Demo4 from '@/pages/demo4/index'
import Demo5 from '@/pages/demo5/index'
import Demo6 from '@/pages/demo6/index'
import Demo7 from '@/pages/demo7/index'
import Demo8 from '@/pages/demo8/index'
import Demo9 from '@/pages/demo9/index'
import Demo10 from '@/pages/demo10/index'
import Demo11 from '@/pages/demo11/index'
import Demo12 from '@/pages/demo12/index'
import Demo13 from '@/pages/demo13/index'
import Demo14 from '@/pages/demo14/index'
import Demo15 from '@/pages/demo15/index'
import Demo16 from '@/pages/demo16/index'
import Demo17 from '@/pages/demo17/index'

Vue.use(Router)

export default new Router({
    routes: [{
            path: '/',
            name: 'HelloWorld',
            component: HelloWorld
        },
        {
            path: '/demo1',
            name: 'demo1',
            component: Demo1
        },
        {
            path: '/demo2',
            name: 'demo2',
            component: Demo2
        },
        {
            path: '/demo3',
            name: 'demo3',
            component: Demo3
        },
        {
            path: '/demo4',
            name: 'demo4',
            component: Demo4
        },
        {
            path: '/demo5',
            name: 'demo5',
            component: Demo5
        },
        {
            path: '/demo6',
            name: 'demo6',
            component: Demo6
        },
        {
            path: '/demo7',
            name: 'demo7',
            component: Demo7
        },
        {
            path: '/demo8',
            name: 'demo8',
            component: Demo8
        },
        {
            path: '/demo9/:userId',
            name: 'demo9',
            component: Demo9
        },
        {
            path: '/demo10',
            name: 'demo10',
            component: Demo10
        },
        {
            path: '/demo11',
            name: 'demo11',
            component: Demo11
        },
        {
            path: '/demo12',
            name: 'demo12',
            component: Demo12
        },
        {
            path: '/demo13',
            name: 'demo13',
            component: Demo13
        },
        {
            path: '/demo14',
            name: 'demo14',
            component: Demo14
        },
        {
            path: '/demo15',
            name: 'demo15',
            component: Demo15
        },
        {
            path: '/demo16',
            name: 'demo16',
            component: Demo16
        },
        {
            path: '/demo17',
            name: 'demo17',
            component: Demo17
        },
    ]
})

packages.json【应该是叫package.json吧...我的两个项目里都是这个名字耶】

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  },
  "dependencies": {
    "mint-ui": "^2.2.13",
    "vue": "^2.5.2",
    "vue-resource": "^1.5.1",
    "vue-router": "^3.0.1",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.1",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "chalk": "^2.0.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "node-notifier": "^5.1.2",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "rimraf": "^2.6.0",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

收起回答

提问者 Aurora_Meteor #1

这是使用组件的页面，在demo17里，突然发现这里使用的图片在assets文件夹里都没有...不过之前页面报的错误好像没有提到图片？ <template> <div> <div>移动端组件库Mint UI</div> <div>-----------------------------</div> <mt-tabbar> <mt-tab-item id="外卖"> <img slot="icon" src="../../assets/100x100.png" /> 外卖 </mt-tab-item> <mt-tab-item id="订单"> <img slot="icon" src="../../assets/100x100.png" /> 订单 </mt-tab-item> <mt-tab-item id="发现"> <img slot="icon" src="../../assets/100x100.png" /> 发现 </mt-tab-item> <mt-tab-item id="我的"> <img slot="icon" src="../../assets/100x100.png" /> 我的 </mt-tab-item> </mt-tabbar> </div> </template> <script> import Vue from 'vue' import { Toast } from "mint-ui"; import { MessageBox } from "mint-ui"; import { Tabbar, TabItem } from "mint-ui"; Vue.component(Tabbar.name, Tabbar); Vue.component(TabItem.name, TabItem); export default { data() { return {}; }, mounted() { // Toast("提示信息"); // MessageBox('提示', '操作成功'); } }; </script>

2020-05-16 21:14:24

好帮手慕慕子 2020-05-16 18:36:17

同学你好，对于你的问题解答如下：

直接使用npm install命令就可以安装项目所需要的所有依赖。同学删除node_modules文件夹后，只安装了mint-ui，这种行为是不可以的，推荐同学使用npm install命令安装后在测试下。
如下所示，因为在index.vue中，需要谁用Vue注册对应的组件，所以需要单独引入vue文件。
由于网络等原因，会导致在安装依赖中丢失部分依赖包，导致无法启动项目，这个时候，同学也不要着急，可以多试几次删除node_modules文件夹，使用npm install命令重新安装所有的依赖再测试下。
如果还有问题，可以将你的router/index.js， packages.json文件代码粘贴过来，老师在帮助同学测试下

祝学习愉快~

收起回答

提问者 Aurora_Meteor 2020-05-16 14:35:05

1、node_modules文件夹删除以后应该安装哪个依赖呢？我安装了一下这一节的mint-ui，然后run运行结果报错了，我以为是因为另一个项目在运行，但是关了那个再运行还是一样报错

2、另外我前面问题说错了，我想问的是怎么main.js引入了vue，还要在index.vue这个页面的script里引入vue

收起回答

好帮手慕慕子 2020-05-16 14:12:55

同学你好，对于你的问题解答如下：

老师在源码中测试同学的代码，没有出现截图中的报错。建议：同学可以手动将node_modules文件夹删除了，然后使用npm install或者cnpm install命令重新安装依赖，然后使用npm run dev启动项目在测试下。
main.js中引入的确实是全局引入，但是在router/index.js我们需要使用Vue注册Router,所以在这里需要单独引入
老师这边测试同学的同学的代码，确实是没有出现报错信息的，建议：同学可以下载源码对比排查下是否是哪里书写有误。如果还有问题，可以将你的router/index.js， packages.json文件代码粘贴过来，老师在帮助同学测试下。