还是出错了
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 'babel-polyfill'; import Vue from 'vue'; import App from './App'; import router from './router'; import fastclick from 'fastclick'; import './assets/scss/index.scss'; fastclick.attach(document.body); Vue.config.productionTip = false; /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' });
index.js
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> <title>Vue实现慕淘商城</title> <link href="//gw.alicdn.com/tps/i2/TB1nmqyFFXXXXcQbFXXE5jB3XXX-114-114.png" rel="Shortcut Icon" type="image/x-icon"> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>
App.vue
<template> <div id="app"> app </div> </template> <script> export default { name: 'App' }; </script>
index.js
import Vue from 'vue'; import Router from 'vue-router'; Vue.use(Router); export default new Router({ routes: [] });
webpack.base.conf.js
'use strict' const path = require('path') const utils = require('./utils') const config = require('../config') const vueLoaderConfig = require('./vue-loader.conf') function resolve (dir) { return path.join(__dirname, '..', dir) } const createLintingRule = () => ({ test: /\.(js|vue)$/, loader: 'eslint-loader', enforce: 'pre', include: [resolve('src'), resolve('test')], options: { formatter: require('eslint-friendly-formatter'), emitWarning: !config.dev.showEslintErrorsInOverlay } }) module.exports = { context: path.resolve(__dirname, '../'), entry: { app: './src/main.js' }, output: { path: config.build.assetsRoot, filename: '[name].js', publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath }, resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'api': resolve('src/api'), 'assets': resolve('src/assets'), 'base': resolve('src/base'), 'components': resolve('src/components'), 'pages': resolve('src/pages') } }, module: { rules: [ ...(config.dev.useEslint ? [createLintingRule()] : []), { test: /\.vue$/, loader: 'vue-loader', options: vueLoaderConfig }, { test: /\.js$/, loader: 'babel-loader', include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')] }, { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } }, { test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('media/[name].[hash:7].[ext]') } }, { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('fonts/[name].[hash:7].[ext]') } } ] }, node: { // prevent webpack from injecting useless setImmediate polyfill because Vue // source contains it (although only uses it if it's native). setImmediate: false, // prevent webpack from injecting mocks to Node native modules // that does not make sense for the client dgram: 'empty', fs: 'empty', net: 'empty', tls: 'empty', child_process: 'empty' } }
正在回答
同学你好,看你的截图,项目已经成功启动, 没有报错了。如下图所示,这些是是eslint检测之后的警告信息,不影响程序的运行效果,可以不用管哦
如果想要不显示这些警告,可以关闭配置中:
然后重新启动项目就可以啦。
如果帮助到了你, 欢迎采纳!
祝学习愉快~~~
[HMR] Waiting for update signal from WDS... vue.runtime.esm.js?12a6:8423 Download the Vue Devtools extension for a better development experience: https://github.com/vuejs/vue-devtools client?0edb:147 [WDS] Warnings while compiling. warnings @ client?0edb:147 onmessage @ socket.js?0d5e:41 EventTarget.dispatchEvent @ sockjs.js?0d3a:170 (anonymous) @ sockjs.js?0d3a:887 SockJS._transportMessage @ sockjs.js?0d3a:885 EventEmitter.emit @ sockjs.js?0d3a:86 WebSocketTransport.ws.onmessage @ sockjs.js?0d3a:2961 client?0edb:153 ./src/App.vue ✘ http://eslint.org/docs/rules/no-multiple-empty-lines More than 1 blank line not allowed src\App.vue:11:1 ^ ✘ https://google.com/#q=vue%2Fscript-indent Expected indentation of 2 spaces but found 3 spaces src\App.vue:15:1 import CTabbar from 'components/tabber'; ^ ✘ https://google.com/#q=vue%2Fscript-indent Expected indentation of 2 spaces but found 3 spaces src\App.vue:16:1 export default { ^ ✘ https://google.com/#q=vue%2Fscript-indent Expected indentation of 4 spaces but found 5 spaces src\App.vue:18:1 components: { ^ ✘ https://google.com/#q=vue%2Fscript-indent Expected indentation of 4 spaces but found 5 spaces src\App.vue:20:1 } ^ ✘ http://eslint.org/docs/rules/no-multiple-empty-lines Too many blank lines at the end of file. Max of 0 allowed src\App.vue:23:1 ^ ✘ 6 problems (6 errors, 0 warnings) Errors: 4 https://google.com/#q=vue%2Fscript-indent 2 http://eslint.org/docs/rules/no-multiple-empty-lines @ ./src/main.js 2:0-24 @ multi ./node_modules/_webpack-dev-server@2.11.5@webpack-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server ./src/main.js warnings @ client?0edb:153 onmessage @ socket.js?0d5e:41 EventTarget.dispatchEvent @ sockjs.js?0d3a:170 (anonymous) @ sockjs.js?0d3a:887 SockJS._transportMessage @ sockjs.js?0d3a:885 EventEmitter.emit @ sockjs.js?0d3a:86 WebSocketTransport.ws.onmessage @ sockjs.js?0d3a:2961 client?0edb:153 ./src/pages/home/index.vue ✘ http://eslint.org/docs/rules/quotes Strings must use singlequote src\pages\home\index.vue:13:26 import HomeHeader from "./header"; ^ ✘ http://eslint.org/docs/rules/semi Missing semicolon src\pages\home\index.vue:20:4 } ^ ✘ 2 problems (2 errors, 0 warnings) Errors: 1 http://eslint.org/docs/rules/semi 1 http://eslint.org/docs/rules/quotes @ ./src/router/index.js 16:11-31 35:11-31 @ ./src/main.js @ multi ./node_modules/_webpack-dev-server@2.11.5@webpack-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server ./src/main.js warnings @ client?0edb:153 onmessage @ socket.js?0d5e:41 EventTarget.dispatchEvent @ sockjs.js?0d3a:170 (anonymous) @ sockjs.js?0d3a:887 SockJS._transportMessage @ sockjs.js?0d3a:885 EventEmitter.emit @ sockjs.js?0d3a:86 WebSocketTransport.ws.onmessage @ sockjs.js?0d3a:2961 client?0edb:153 ./src/base/navbar/index.vue ✘ http://eslint.org/docs/rules/semi Missing semicolon src\base\navbar\index.vue:18:4 } ^ ✘ 1 problem (1 error, 0 warnings) Errors: 1 http://eslint.org/docs/rules/semi @ ./node_modules/_babel-loader@7.1.5@babel-loader/lib!./node_modules/_vue-loader@13.7.3@vue-loader/lib/selector.js?type=script&index=0!./src/pages/home/header.vue 8:0-35 @ ./src/pages/home/header.vue @ ./node_modules/_babel-loader@7.1.5@babel-loader/lib!./node_modules/_vue-loader@13.7.3@vue-loader/lib/selector.js?type=script&index=0!./src/pages/home/index.vue @ ./src/pages/home/index.vue @ ./src/router/index.js @ ./src/main.js @ multi ./node_modules/_webpack-dev-server@2.11.5@webpack-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server ./src/main.js warnings @ client?0edb:153 onmessage @ socket.js?0d5e:41 EventTarget.dispatchEvent @ sockjs.js?0d3a:170 (anonymous) @ sockjs.js?0d3a:887 SockJS._transportMessage @ sockjs.js?0d3a:885 EventEmitter.emit @ sockjs.js?0d3a:86 WebSocketTransport.ws.onmessage @ sockjs.js?0d3a:2961 client?0edb:153 ./src/components/tabber/index.vue ✘ http://eslint.org/docs/rules/semi Missing semicolon src\components\tabber\index.vue:25:4 } ^ ✘ 1 problem (1 error, 0 warnings) Errors: 1 http://eslint.org/docs/rules/semi @ ./node_modules/_babel-loader@7.1.5@babel-loader/lib!./node_modules/_vue-loader@13.7.3@vue-loader/lib/selector.js?type=script&index=0!./src/App.vue 15:0-40 @ ./src/App.vue @ ./src/main.js @ multi ./node_modules/_webpack-dev-server@2.11.5@webpack-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server ./src/main.js warnings @ client?0edb:153 onmessage @ socket.js?0d5e:41 EventTarget.dispatchEvent @ sockjs.js?0d3a:170 (anonymous) @ sockjs.js?0d3a:887 SockJS._transportMessage @ sockjs.js?0d3a:885 EventEmitter.emit @ sockjs.js?0d3a:86 WebSocketTransport.ws.onmessage @ sockjs.js?0d3a:2961 client?0edb:153 ./src/pages/cart/index.vue ✘ http://eslint.org/docs/rules/semi Missing semicolon src\pages\cart\index.vue:10:4 } ^ ✘ 1 problem (1 error, 0 warnings) Errors: 1 http://eslint.org/docs/rules/semi @ ./src/router/index.js 29:11-31 @ ./src/main.js @ multi ./node_modules/_webpack-dev-server@2.11.5@webpack-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server ./src/main.js warnings @ client?0edb:153 onmessage @ socket.js?0d5e:41 EventTarget.dispatchEvent @ sockjs.js?0d3a:170 (anonymous) @ sockjs.js?0d3a:887 SockJS._transportMessage @ sockjs.js?0d3a:885 EventEmitter.emit @ sockjs.js?0d3a:86 WebSocketTransport.ws.onmessage @ sockjs.js?0d3a:2961 client?0edb:153 ./src/pages/home/header.vue ✘ http://eslint.org/docs/rules/semi Missing semicolon src\pages\home\header.vue:17:4 } ^ ✘ 1 problem (1 error, 0 warnings) Errors: 1 http://eslint.org/docs/rules/semi @ ./node_modules/_babel-loader@7.1.5@babel-loader/lib!./node_modules/_vue-loader@13.7.3@vue-loader/lib/selector.js?type=script&index=0!./src/pages/home/index.vue 13:0-34 @ ./src/pages/home/index.vue @ ./src/router/index.js @ ./src/main.js @ multi ./node_modules/_webpack-dev-server@2.11.5@webpack-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server ./src/main.js warnings @ client?0edb:153 onmessage @ socket.js?0d5e:41 EventTarget.dispatchEvent @ sockjs.js?0d3a:170 (anonymous) @ sockjs.js?0d3a:887 SockJS._transportMessage @ sockjs.js?0d3a:885 EventEmitter.emit @ sockjs.js?0d3a:86 WebSocketTransport.ws.onmessage @ sockjs.js?0d3a:2961 client?0edb:153 ./src/pages/personal/index.vue ✘ http://eslint.org/docs/rules/semi Missing semicolon src\pages\personal\index.vue:10:4 } ^ ✘ 1 problem (1 error, 0 warnings) Errors: 1 http://eslint.org/docs/rules/semi @ ./src/router/index.js 41:11-35 @ ./src/main.js @ multi ./node_modules/_webpack-dev-server@2.11.5@webpack-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server ./src/main.js warnings @ client?0edb:153 onmessage @ socket.js?0d5e:41 EventTarget.dispatchEvent @ sockjs.js?0d3a:170 (anonymous) @ sockjs.js?0d3a:887 SockJS._transportMessage @ sockjs.js?0d3a:885 EventEmitter.emit @ sockjs.js?0d3a:86 WebSocketTransport.ws.onmessage @ sockjs.js?0d3a:2961 client?0edb:153 ./src/pages/product/index.vue ✘ http://eslint.org/docs/rules/semi Missing semicolon src\pages\product\index.vue:10:4 } ^ ✘ 1 problem (1 error, 0 warnings) Errors: 1 http://eslint.org/docs/rules/semi @ ./src/router/index.js 22:13-36 @ ./src/main.js @ multi ./node_modules/_webpack-dev-server@2.11.5@webpack-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server ./src/main.js warnings @ client?0edb:153 onmessage @ socket.js?0d5e:41 EventTarget.dispatchEvent @ sockjs.js?0d3a:170 (anonymous) @ sockjs.js?0d3a:887 SockJS._transportMessage @ sockjs.js?0d3a:885 EventEmitter.emit @ sockjs.js?0d3a:86 WebSocketTransport.ws.onmessage @ sockjs.js?0d3a:2961 client?0edb:153 ./src/pages/search/index.vue ✘ http://eslint.org/docs/rules/semi Missing semicolon src\pages\search\index.vue:10:4 } ^ ✘ 1 problem (1 error, 0 warnings) Errors: 1 http://eslint.org/docs/rules/semi @ ./src/router/index.js 47:11-33 @ ./src/main.js @ multi ./node_modules/_webpack-dev-server@2.11.5@webpack-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server ./src/main.js warnings @ client?0edb:153 onmessage @ socket.js?0d5e:41 EventTarget.dispatchEvent @ sockjs.js?0d3a:170 (anonymous) @ sockjs.js?0d3a:887 SockJS._transportMessage @ sockjs.js?0d3a:885 EventEmitter.emit @ sockjs.js?0d3a:86 WebSocketTransport.ws.onmessage @ sockjs.js?0d3a:2961
同学你好, 如下图所示, 报错信息有三个错误
fastclick插件的问题
babel-polyfill插件的问题
sass-loader插件的问题
看同学的package.json文件, 已经安装了fastclick和babel-polyfill插件, 但是同时安装了两个sass-loader,一个高版本,一个低版本, 建议: 可以尝试npm (或cnpm) install -D sass-loader@6.0.7命令。 将sass-loader都降为低版本的试试
遇到问题不要着急哦, 因为vue项目涉及到环境、版本等问题,老师这边无法准确的复现同学项目出现的问题, 所以需要同学和老师好好配合哦,如果还有问题, 可以在提问次,使用node -v 和vue -V命令 查看一下自己电脑环境中的vue版本和node版本,截图粘贴过来, 老师一定会想办法帮助您解决问题的
如果帮助到了你, 欢迎采纳!
祝学习愉快~~~
{ "name": "mall", "version": "1.0.0", "description": "在线商城Webapp", "author": "Mikonnnn <1551005987@qq.com>", "private": true, "scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "lint": "eslint --ext .js,.vue src", "build": "node build/build.js" }, "dependencies": { "babel-polyfill": "^6.26.0", "fastclick": "^1.0.6", "sass-loader": "^6.0.7", "vue": "^2.5.2", "vue-router": "^3.0.1" }, "devDependencies": { "autoprefixer": "^7.1.2", "babel-core": "^6.22.1", "babel-eslint": "^8.2.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", "eslint": "^4.15.0", "eslint-config-standard": "^10.2.1", "eslint-friendly-formatter": "^3.0.0", "eslint-loader": "^1.7.1", "eslint-plugin-import": "^2.7.0", "eslint-plugin-node": "^5.2.0", "eslint-plugin-promise": "^3.4.0", "eslint-plugin-standard": "^3.0.1", "eslint-plugin-vue": "^4.0.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", "node-sass": "^4.12.0", "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", "sass-loader": "^8.0.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" ] }
- 参与学习 人
- 提交作业 239 份
- 解答问题 10739 个
本阶段带你深入前端开发的肌理,通过ES6基础知识和前端主流高级框架的学习,助你快速构建企业级移动webAPP应用,进入职场的终极battle
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星