利用vue-cli搭建webpackVIP免费

项目环境搭建：1•安装node（node-v查看node版本）2.全局安装vue-cliNpminstall-gvue-cliVue:查看是否安装成功Vuelist：查看可用的模板3•创建一个基于"webpack"模板的新项目Vueinitwebpackproject-name（默认安装2.0版本）Vueinitwebpack#1.0project-name（安装1.0版本）脚手架工具如下：▼vegetarian-node_modules为依赖的模块-src放置组件和入口文件-static放置静态资源文件-index.html文件入口webpack中的一些解释newHtmlWebpackPlugin这个插件的作用是把output输出的文件自动插入到html里1.cdproject-name2.Npminstall3.Npmrundev4.在浏览器输入localhost:8080效果如下：Welbgetabetterunderstardocumentation.Itisalsorecomloader.Ifyouhaveanyissues\\oumayalsowanttocheckout因为使用了语法，安装完后依然报错，是因为会报错，所以还需手动安装。问题一：安装stylus-loader遇到的问题：WARNEtylus—loader@2・3.1requiresapeerof1.13.3ChunkNamesappChunks0findmodule'stvlusJrunTopLevelLifecyclesnpmrunTopLevelLifecyclesC:\myProjectg'vegetarian>npiiirundev>vegetarian®1.0.0devC:\myProjecetarian>nodebuild/dev-server・isListellingathttp://localhost:8080webpack:waituntilbundlefinished:/_webpack_webpackbuilt7bfac035ce993a7f1063in7167ms；Hash:7bfac035ce993a7f1063Version:webpackTime:7167msAssetSize迅pp・js1.03MB■ERRORinCannot〕©,/^/vue-style-loader!■厂loader!*厂/vue-1:r.js?type=style&index=OL/src/App.vue4:14-2301Childhtm1-webpack~p1uginfor"index・html"：AssetSizeChunksChunkName；index,html20.5kB0webpack:bundleisnowVALID・解决方法：npmisytlus--save--devC:\myProjecetarian>npmistyIUE——save-devvegetarian®1.0.0C:\myProjectarian1rstylus@0.54.5|css-parse©1.7.0|glob@7・0.6|sax©0.5.81source-map©0.1.43runTopLevelLifecycles|T■■■■■■■■[npm脛闕SkippingfailedoptionaldeperrunTopLevelLifecycles■HI■■■■■■■■■npm脛闕NotcompatiblewithyouroperatirunTopLevelLifecycles|T■■■■■■■■■成功解决！问题二：vue-router应用于组件内时的矛盾后来终于解决了:[HMR]Vuecomponenthotreloadshimapplied・©►[Vuewarn]:Cannotfindelement:#appDownloadtheVueDevtoolsforabetterdevelohttps://github*com/vuejs/vue-devtools□解决方法：如果遇到此问题，将VueRouter的引用放在App的引用下面，需App.vue先编译完成importfrom'vue-router';importAppf:/App[Vl;nor/importAppfrom1./App'，:importMB吐切：//卉囱帀「。必鮎■；成功解决问题三：因为项目中使用了字体图标，路径也没有问题别人那里也不报错但是我这里编译后总是报错：ERRORin./^/css-loader!,/^/vue-loader/lib/style&index=0!*/src/App,vueModulenotfound:Error:CannotresolveJfileJo@./^/css-loaderL/^/vue-loader/lib/style-rewri=0!./src/App.vue6:1408-14456:1468-1505之前是想直接引用index.styl文件，但是编译报错，后来发现这样引用问题成功解决