1. 摘要Webpack是一种前端资源构建工具，一个静态模块打包器。在Webpack看来，前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理，当Webpack处理应用程序时，它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源。Webpack打包流程图如图1-1所示。图1-1 Webpack打包流程图2. Webpack五个核心概念2.1 Entry入口(Entry)指示Webpack以哪个文件作为入口起点分析构建内部依赖图并进行打包。2.2 Output输出(Output)指示Webpack打包后的资源bundles输出到哪里去，以及如何命名。2.3 LoaderLoader让Webpack能够去处理那些非JavaScript语言的文件，Webpack本身只能理解JavaScript。2.4 Plugins插件(Plugins)可以用于执行范围更广的任务，插件的范围包括从打包和压缩，一直到重新定义环境中的变量等。2.5 Mode模式(Mode)指示Webpack使用相应模式的配置。分为development和production两种模式，下面分别进行简述。development: 开发模式，能让代码本地运行的环境，会将process.env.NODE_ENV的值设为development，同时启用NamedChunksPlugin和NamedModulesPlugin插件；production: 生产模式，能让代码优化运行的环境，会将process.env.NODE_ENV的值设为production，同时启用FlagDependencyUsagePlugin、FlagIncludedChunksPlugin、ModuleConcatenationPlugin、NoEmitOnErrorsPlugin、OccurrenceOrderPlugin、SideEffectsFlagPlugin和UglifyJsPlugin插件。3. Wbepack配置3.1 webpack.config.js文件webpack.config.js是webpack的配置文件，用来指示webpack工作，运行webpack指令时，会加载里面的配置，所有构建工具都是基于nodejs平台运行的，默认采用commonjs模块化。webpack.config.js基础配置如图3-1所示。图3-1 webpack.config.js基础配置3.2 devServer配置开发服务器(devServer)用来实现自动化(自动编译、自动打开浏览器、自动刷新浏览器)，只会在内存中编译打包，不会有任何文件输出，本地安装webpack-dev-server后，通过npx webpack-dev-server命令启动devServer，核心代码如图3-2所示。图3-2 devServer配置核心代码3.3 打包html/样式/图片/其它资源打包不同的资源会使用不同的loader和插件，打包html/样式/图片/其它资源的流程如下所述。3.3.1 打包html资源1.下载html-webpack-plugin插件；2.引入html-webpack-plugin插件；3.使用html-webpack-plugin插件，并进行相应配置。3.3.2 打包样式资源不同的样式文件需要配置不同的loader1.下载loader；2.配置loader，css样式文件使用css-loader和style-loader，less文件使用less-loader、css-loader和style-loader。其中css-loader的作用是将css文件变成commonjs模块加载到js文件中，style-loader的作用是创建style标签，将js中的样式资源插入进去，添加到head中生效。3.3.3 打包图片资源1.下载url-loader，file-loader2.配置loader3.3.4 打包其它资源1.下载file-loader2. 配置loader，配置该loader作用于不为html/css/less/js的其他文件3.4 提取css成单独文件/css兼容性处理/压缩css3.4.1  提取css成单独文件样式文件打包后会默认和js文件一起输出，可以通过插件将打包后的css文件单独输出，流程如下所述。1.下载mini-css-extract-plugin插件2.引用该插件3.配置3.4.2 css兼容性处理1.下载postcss-loader和postcss-preset-env2.在package.json中browsetslist属性中分别对开发环境和生产环境进行兼容性配置，设置支持样式的浏览器版本3.通过postcss找到package.json中browserslist里面的配置，通过配置加载指定的css兼容性样式。3.4.3 压缩css1.下载optimize-css-assets-webpack-plugin插件2.引用该插件3.使用该插件3.5 js语法检查eslint/js兼容性处理/js压缩3.5.1 js语法检查eslint1.下载eslint-loader和eslint2.在package.json中的eslintConfig中进行配置3.配置eslint-loader，其中只需检测js文件并要排除第三方库，只检测自己写的源代码，同时可在options配置中设置fix:true，自动修复eslint的错误。3.5.2 js兼容性处理    1.下载babel-loader、@babel/core、@babel/preset-env，通过@babel/preset-env做基本的js兼容性处理，然后通过corejs做前面无法实现的兼容性处理，并实现按需加载    2. 配置loaderjs兼容性处理核心代码如图3-3所示图3-3 js兼容性处理核心代码3.5.3 js压缩mode设置为production生产环境时会自动压缩js代码。4. webpack性能优化可以从开发环境和生产环境分别对webpack进行性能优化。其中开发环境主要考虑从打包构建速度和代码调试两个方面进行优化，生产环境主要考虑从打包构建速度和代码运行性能这两个方面进行优化。下面简单介绍下开发环境上通过HMR提升构建速度。4.1 HMR    HMR(热模块替换)，作用是一个模块发生变化后，只会更新打包这一个模块而不是所有模块，通过在devServer中设置hot:true属性启动HMR功能。其中对于样式文件，可以使用HMR功能，因为style-loader内部实现了；对于js文件，默认不能使用HMR功能，解决方法：修改入口文件js代码，添加支持HMR功能的代码，另外HMR只能处理非入口js文件的其他文件，对入口文件并不能生效，因为一旦入口文件更新，入口文件引入的其他文件一定会被重新加载；对于html文件，默认不能使用HMR功能，同时会导致html文件不能热更新，解决方法：修改entry入口文件，将html文件引入，只能解决html文件不能热更新的问题。js文件支持HMR功能的核心代码如图4-1所示。图4-1 js文件支持HMR功能核心代码4.2  HMR效果在入口index.js文件中引入print.js文件，运行npx webpack-devserver后，页面如图4-2所示。4-2 初始页面修改print.js文件后，只会重新加载print.js文件，而不会重新加载index.js文件，HMR效果如图4-3所示。4-3 HMR效果图

ERROR in ./node_modules/cluster/lib/master.jsModule not found: Error: Can't resolve 'dns' in 'D:\web\base-pc-front\node_modules\cluster\lib' @ ./node_modules/cluster/lib/master.js 440:6-20 @ ./node_modules/cluster/lib/cluster.js @ ./node_modules/cluster/index.js @ ./node_modules/log4js/lib/clustering.js @ ./node_modules/log4js/lib/log4js.js @ ./node_modules/esdk-obs-nodejs/lib/log.js @ ./node_modules/esdk-obs-nodejs/lib/obs.js @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/components/upload-content/index.vue?vue&type=script&lang=js& @ ./src/views/components/upload-content/index.vue?vue&type=script&lang=js& @ ./src/views/components/upload-content/index.vue @ ./src/views/components/index.js @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/modules/demo/index.vue?vue&type=script&lang=js& @ ./src/views/modules/demo/index.vue?vue&type=script&lang=js& @ ./src/views/modules/demo/index.vue @ ./src/config/component-importer.js @ ./src/config/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:8001 (webpack)/hot/dev-server.js @babel/polyfill ./src/main.jsERROR in ./node_modules/assert/assert.jsModule not found: Error: Can't resolve 'util/' in 'D:\web\base-pc-front\node_modules\assert' @ ./node_modules/assert/assert.js 73:11-27 @ ./node_modules/browserify-zlib/lib/index.js @ ./node_modules/streamroller/lib/BaseRollingFileStream.js @ ./node_modules/streamroller/lib/RollingFileStream.js @ ./node_modules/streamroller/lib/index.js @ ./node_modules/log4js/lib/appenders/dateFile.js @ ./node_modules/log4js/lib/appenders/index.js @ ./node_modules/log4js/lib/log4js.js @ ./node_modules/esdk-obs-nodejs/lib/log.js @ ./node_modules/esdk-obs-nodejs/lib/obs.js @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/components/upload-content/index.vue?vue&type=script&lang=js& @ ./src/views/components/upload-content/index.vue?vue&type=script&lang=js& @ ./src/views/components/upload-content/index.vue @ ./src/views/components/index.js @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/modules/demo/index.vue?vue&type=script&lang=js& @ ./src/views/modules/demo/index.vue?vue&type=script&lang=js& @ ./src/views/modules/demo/index.vue @ ./src/config/component-importer.js @ ./src/config/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:8001 (webpack)/hot/dev-server.js @babel/polyfill ./src/main.js

WebJS场景问题及排除思路如下：

张宇老师交答卷啦！快来围观1、胡琦：宇神，怎么学好TS？答：TypeScript现在在前端领域越来越重要，目前最流行的三大框架vue、react、angular本身全部都是使用TS开发出来的，当然我们在使用这些框架时，也可以无缝使用TS继续进行业务功能的开发。可以毫不夸张的说，现在TS已经是前端开发人员必备技能。那么如何来学好TS呢，第一点：立刻马上开始好好学ES6，因为TS是JS的超集，学好JS尤其是ES6其实就是在学TS，两者不冲突，而且是统一的；第二点：多上TS官网学习TS特有的一些语法和特性，官网文档写的还是很详细的；第三点：一定要在项目中用上，学完不用很快就会忘，如果平时的项目由于历史原因很难用上TS，建议自己一定要写一些小项目用TS来完成。 2、归去：初学js时，该从那个方向着手练习巩固呀？答：当开始学JS时，重点放在JS基本语法上，可以多看JS教学视频。之后可以开始实现一些网页常用功能，在想提高可以进一步使用原生JS去实现一些工具库，例如underscore和lodash等，之后可以在进一步模仿现在主流框架实现一个简化版的单页面应用框架。一步一步，直到可以造轮子的时候，基本上就达到了专家水平。3、I：Js的主流框架有哪些？答：目前最主流的还是vue、react、angular三大框架，之后是jquery、zepto等轻量级的框架。各大厂内部还有自己封装的框架等。4、执着：前端应聘的话简历怎么写啊，要注意什么？答：对于大厂应聘，简历就是你的敲门砖，简历的书写有方法可寻，第一点：除了个人基本信息外，先写清楚学历，因为大厂HR首先会根据学历筛选一遍。第二点：写清个人技能，对于了解、熟悉、精通、擅长这几个词，要拿捏好，切不可过分夸大，否则面试时，面试官一问，就可能会暴露。第三点：公司履历要按时间倒叙来写，公司里面的项目背景尽量挑选一些大项目来写，描述时要突出项目规模很大，落脚点要突出自己在项目中的角色和使用到的技术。简历在最后部分一定要加上自己的亮点和特长，比如曾拿到过华为某某认证证书等等。 5、九月秋：知识点从哪几个方面去啃？答：js知识点首先从基本语法开始，这一部分各个语言大同小异，有计算机背景的可以很快搞定，之后在学习DOM和BOM和事件，这个阶段完成后就可以编写一些网页常用功能了。在继续学习ajax用来获取数据，之后在从HTML5方向上新增加的API入手学习，再继续从ES5、ES6一直到最新的js语法。  6、尹镇镇：如何学好js基础，并和主流框架结构结合灵活使用。答：学好js一定要有耐心，因为js语言的学习不可能速成，需要积累和实践。入门建议多看视频跟着老师学，之后可以多看看经典教材例如小红书这样的。在想提高就要多和技术大牛一起探讨和交流。但是最为重要的还是多实践多使用，尤其是要在真实的项目中慢慢磨练。因为一般真实项目大多使用框架开发，在实际项目中才能真正感受到如何书写js以及完成一个功能。 7、CRitS：filutter属于大前端的一部分吗？对于flutter的学习有什么指导课程？答：flutter近几年比较火，属于大前端的一部分，主要是用来开发移动端应用。如果平时做移动前端方向的小伙伴一定要关注并学习flutter。因为flutter有超越RN的趋势。 8、圆柱体：张老师，现在前端框架有很多，还有必要深入学习JavaScript吗？答：前端领域可以说是框架最多的，而且层出不穷，但是学习框架和学习js并不冲突，虽然我们在实际项目中都是使用框架开发，但是学习js就相当于我们修炼内功，内功不足，在花哨的武功使出来也没有什么威力，所以首先我们要修炼好内功，再去学习各种框架，只有内外兼修，才能游刃有余。9、刚刚：老师你好，我前端用的jsp，自学的js，使用的比较浅，怎么深入学习js，怎么提高自己的js水平？答：想要持续提高js水平，一定要多看小红书，学习相关语法，但是更为重要的还是多使用，光看不用，等于没学，建议多在项目中使用js。 10、 Jacky：第三版作为入门可以吗？答：《javascript高级程序设计》第三版作为入门没有问题，因为js基本语法这部分之前第三版讲的也很到位，但是学到后面，还是建议看最新的第四版，因为第四版增加的很多js新的语法，之前老版本就有些不够看了。 11、Bug：把js基础部分看完，但是还不知道怎么写，是去做项目吗，还是做一些练习题提高自己的编程能力？答：如果学完js基础，最好直接应用在实际项目中，学以致用，效果最好。如果感觉直接用在实际项目中比较吃力，可以先使用js编写一些网页常用效果和功能，之后在一点点融入到实际项目中，可以这么说，在实际项目中使用js，是提升js能力最为直接的方式。做练习可以辅助学习，但是只有使用才能提到能力。 12、北辰：如何能快速掌握js,并写出框架呀？答：对于小白来说，看视频跟着老师学是最快的入门方式，在入门之后，就可以多看看《javascript高级程序设计》这本书进行进一步的加强。之后多在实际项目中应用js，积累足够多的js编程经验之后，就可以开始考虑造轮子了。如何造轮子呢，多参考主流前端框架的功能，例如vue.js的双向数据绑定功能，就可以自己尝试写一个框架去实现相同功能。经过慢慢积累，你也能开发出一个主流框架了。13、云之山：Js和ts都学混了，前端需要同时掌握这2门语言么？答：JS和TS不冲突，都需要掌握，我们可以先从原生JS入手，等JS学的差不多了，在对TS下手。TS是JS的超集，TS包含JS，但是TS还有自己的一些语法，相当于对JS做了扩展和补充。 活动复盘——张宇老师讲了啥？老婆和老婆饼？！说起JavaScript那可真的是小孩没娘说来话长， 你看名字，它不就是左手一个Java右手一个script，碰出了个JavaScript。“你说这JavaScript是不是就是源自于Java的脚本语言？”直播中张老师摆了摆手说，“其实这两者的关系，就像是雷锋和雷峰塔，周杰和周杰伦，范伟和范玮琪……”“老婆和老婆饼。”读者们一点就透，亲切互动。诶对，就像老婆和老婆饼！昨天张宇老师的主讲的内容便是JavaScript编程语言。活动于20日晚20点整准时开始，第一部分由张老师为读者简要介绍JavaScript的缘起和发展——真·成功碰瓷Java并逐渐发展壮大的营销案例。第二部分，张老师介绍了以多年来的学习和教学经验，为大家如何走出自以为学会Js误区，真正深入掌握js给出了自己的宝贵建议，并向大家推荐了如何有效提升js编程能力的秘籍——《高级程序设计》（第四版），第三版那个坐着的小男孩站了起来，他看见的风景有什么不同呢？如何去解读？更多内容敬请期待！第三部分，直播分享结束之后，张宇老师再次回到微信群，与大家进行直接的交流，答疑解惑，对于来不及回答的问题，老师也于今日，即21日作出了细致的补充回答，交上了详细的答卷。最后一部分抽奖环节，恭喜我们的两位幸运儿获得了华为荣耀移动电源210000mAh（Max 18W）Type-C 快充版（白色）。活动之外的资源放送？更多课程意犹未尽的朋友们，可以点击链接进张老师的课堂继续学习《轻松入门HTML》《大话CSS》《揭秘Ajax》加入张宇老师课程操作指南1、点击链接️2、登录华为云账号3、加入课堂️4、填写ID5、选择课程加入学习️ 即刻解锁新征程资源扩展来了！你要的前端打怪升级指南WEB全栈学习笔记-JS 如果你还想继续……持续关注我们的活动，还有许多资源可以获取呦~ 扫码加群聊，仅限200名，先到先进先占位。开始时间 10月20日    20：00到20：15活动介绍云享MindTalks是由华为云DevCloud团队携手云享专家共同策划进行的系列技术交流活动。各业界大咖纷纷现身群聊，以即时对话形式，来进行最直接的技术交流和思想碰撞。为保证极简极高效，活动仅十五分钟，开始即高潮，结束即群散。 第一期云享MindTalks专家老师，可盐可甜的张宇老师说，他想聊聊快乐前端，真的吗？真的有人能做到快乐做前端吗？他还说，他最近琢磨出了一套秘诀来分享如何研读《高级程序设计》（第四版）。还在犹豫什么，快来试试吧！也就喝杯热水聊聊天的时间。 专家介绍华为高校教育解决方案专家、华为云专家；拥有十多年一线互联网公司研发经验，曾任阿里技术专家、IBM架构师， 骨灰级码农，擅长全栈开发；曾担任H5金牌讲师，拥有多年教学经验，授课风格深入浅出，风趣幽默， 活动规则1.扫码加入群聊参与交流，为保证高效的交流效果，仅限200人，先到者先进，人满为止。2.为使活动中大家都能有所收获，对于老师未能及时回复的问题，将由助手收集集中回答。3.抽奖活动的奖品则为荣耀移动电源210000mAh（Max 18W）Type-C 快充版（白色）。4.微信群聊将于所有活动内容结束后于原地解散。如要继续关注我们的活动，请留意公告。 

编程是当下非常受人喜欢的行业，也是很多人都比较重视的行业，毕竟发展前景好、薪资待遇高。对于编程行业来说，前端开发和Python是非常热门的，那么这两者之间该如何选择呢?让很多人都产生疑问，今天为大家说说吧。　　首先，无论是Python还是前端开发这两者都有大量的人才需求，拥有较为广阔的发展空间，至于该如何选择?我认为需要根据自身的知识结构、发展规模以及兴趣多方面进行考虑，综合挑选适合自己的。　　对于Python语言，如果以后想要从事研发级别程序员发展路线，可以考虑从Python学习。现在IT行业中，大数据、物联网、人工智能领域是当下十分热门的，Python在这些领域具有非常重要的作用，比如数据分析、大数据领域，Python使用十分普遍。还有就是机器学习、计算机视觉以及自然语言处理方面，Python的应用也是比较广泛的。而且随着社会发展，人工智能的盛行，Python将成为更重要的编程原因。　　前端开发适合哪些人?对于计算机基础知识或者数学知识较弱的人，可以选择前端开发。随着人工智能慢慢盛行，前端开发也有着非常不错的前景，赋予更多含义，除了传统的前端开发之外，还出现了很多的新职位。　　综合情况来说，两者主要涉及的发展方向有所差异，具体选择哪方面，可以根据自身情况来决定，选择适合自己的领域。文章来源: blog.51cto.com，作者：老男孩IT，版权归原作者所有，如需转载，请联系作者。原文链接：https://blog.51cto.com/14596632/2507206

前言编码规范指的是针对特定编程语言约定的一系列规则，通常包括文件内容组织、缩进、注释、声明、语句、空格、命名约定、编程实践、编程原则和最佳实践等。 比如各类方法的命名约定：查询的方法以get或query做前缀；插入的方法以add或insert做前缀；删除的方法以delete或remove做前缀；……如果你对编码规范已经有了一定了解，那么我们继续往下。规范制定编码规范制定一般会参考业界公认的标准，在通用的编码规范基础上，再结合公司、项目的要求而形成的。编码规范制定的目标是为了实现团队成员代码一致性和最佳实践，通过代码风格的一致性，降低维护代码的成本以及改善多人协作的效率。同时遵守最佳实践，确保页面性能得到最佳优化和高效的代码。校验工具目前前端领域主要的代码静态检查工具有JSLint 、JSHint、 JSCS和ESLint等。它们各有的优缺点，本文不再详述，如有兴趣可自行了解。如何选择校验工具依据项目实际情况而定，本人比较推荐ESLint，因为它对ES6支持的最广泛，下面内容将会以ESLint如何在项目开发中实际应用展开。ESLint简介ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误。 安装npm install eslint --save-devESLint规则可以通过以下两种主要的方式来配置:Configuration Comments - 使用 JavaScript 注释把配置信息直接嵌入到一个代码源文件中。Configuration Files - 使用 JavaScript、JSON 或者 YAML 文件为整个目录（处理你的主目录）和它的子目录指定配置信息。可以配置一个独立的 .eslintrc.* 文件。配置说明ESLint 附带有大量的规则。你可以使用注释或配置文件修改你项目中要使用的规则。要改变一个规则设置，你必须将规则 ID 设置为下列值之一："off" 或 0 - 关闭规则"warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)"error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)比如通过设置.eslintrc.js强制使用一致风格的反勾号、双引号或单引号。{    "rules": {        "quotes": ["error", "double"] // 要求尽可能使用双引号    }}编码规范应用实践Visual Studio Code+ESLint环境准备：Node.js、git、Visual Studio Code在VSCode扩展页搜索ESLint，下载并安装完成后应用到工作区，就可以实现IDE的智能提示。Git Hooks+ESLintGit hooks能够在发生某特定行为的时机，触发执行自定义的脚本。 我们可以通过pre-commit来触发执行git commit命名时的一些自定义脚本，比如代码静态检查。依赖huskyInclinthuskyhusky是用node实现的一个快速安装git hooks的工具。安装npm install husky --save-devpackage.json配置"husky": {    "hooks": {      "pre-commit": "npm run inclint"    } },Inclintinclint 是用来对每次改动的文件执行 eslint，提高 eslint 执行的速度。安装npm install inclint --save-dev命令及参数inclint -c path/to/eslintrc --targetDir dir[,dir2,...,dirn]options:   -c path 必须，指定 eslint 配置文件的路径--targetDir 必须，提供一个或多个需要检查的目录，注意多个目录用,分割package.json配置{  "lint": "inclint -c ./.eslintrc --targetDir ./src",}husky+Inclint一起使用时的配置如下：{  "dependencies": {    "eslint-config-angular": "^0.5.0",    "eslint-config-xo-space": "^0.21.0",    "eslint-plugin-angular": "^4.0.0",  },  "devDependencies": {    "eslint": "^5.7.0",    "eslint-config-prettier": "^3.1.0",    "eslint-loader": "^2.1.1",    "husky": "^3.0.1",    "inclint": "^1.0.6",  },  "scripts": {    "lint": "inclint -c ./.eslintrc --targetDir ./src",    "fix": "eslint --fix src",  },  "husky": {    "hooks": {      "pre-commit": "npm run lint"    }  }}提交代码git add * // 将修改的文件提交到暂存区git commit -m 'xxx' // 将暂存区里的改动给提交到本地的版本库，触发执行pre-commit中的自定义脚本npm run fix // 通过eslint自带命令修复代码门禁代码门禁指在某些特定的场景下（比如开发者提交MR到主干库、出包构建等）触发的一系列测试，使得主干代码能维持在某一个程度的质量标准，例如：编译必须通过，代码重复率、圈复杂度不能高于某个水平、静态代码扫描必须通过、开源无风险、安全检查通过等等，一般使用Jenkins完成环境搭建和门禁配置。因每个项目的要求不一，此处不再详细的讲述。如有需求可以使用云服务提供商的代码构建服务，比如华为云的代码检查 CodeCheck ：https://support.huaweicloud.com/productdesc-codecheck/devcloud_pdtd_30001.html

1.由于vue项目依赖 node.js npm 需要先安装. npm安装nodejs下载地址http://nodejs.cn/  选择与你电脑匹配的安装包进行安装下载完成之后双击打开安装包，进行默认安装，当点击下一步下一步到完成的时候即安装完成win+r   输入cmd回车，打开命令窗口  输入node -v  回车 检查node,js的版本  然后输入npm -v 回车检查npm版本或者可以通过淘宝镜像进行安装node$  npm  install  -g  cnpm  --registry=https://registry.npm.taobao.org这样就可以使用cnpm 命令来安装模块了：2.安装vue-clinpm install -g @vue/cli安装之后，你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。你还可以用这个命令来检查其版本是否正确：vue --version   vue -V选定路径，新建vue项目，这里我是在桌面上新建了demo文件夹，cd目录路径下面我以项目名为my-vue新建vue项目安装vue/cli-init依赖npm install -g @vue/cli-initvue init webpack  "my-vue"注意 如果这里不选择no 会选择严格格式 接下来编写项目的时候会出现很多警告错误现在已经创建好了 我们先进项目目录 cd my-vue  然后npm install 安装一下依赖你可以在你选择的文件加下看到这些文件 （其中node-modules是依赖安装后出现的，没安装依赖以前是没有node_modules文件夹的）这个Vue项目的package.json 这个文件里记录了一下 这个项目的基本信息 像是作者、工具等 npm run dev 执行命令运行http://localhost:8080 项目预览地址成功3.安装Element UInpm i element-ui -S这里就可以看到已经安装完成4.利用Element UI+vue创建一个简单的后台模板这里要用到路由跳转页面，先安装一下路由依赖体验一下 注意elementui和router 必须先引入后才能使用 不然会报错创建一个views文件夹 用来放置所用页面路由配置左侧导航配置index页面

【功能模块】【操作步骤&问题现象】1、第一次安装失败后，删除了opt下面的目录，2、再次执行，报错【截图信息】如何解决【日志信息】（可选，上传日志内容或者附件）

ManageOne对接第三方云服务，后端service开发过程涉及多处与ManageOne的流程交互此贴列出以往项目开发FAQ，希望能够帮助新手开发者解决问题。如何实现与ManageOne单点登录集成--使用console框架无需做单点登录集成，因为可理解为第三方开发的前端代码放在ManageOne的同一个web容器中运行，共用一个会话，所有请求都是发送到ManageOne后台，ManageOne通过cosnole路由机制后台再转发给第三方云服务service。ManageOne后台调用第三方云服务service如何实现鉴权--浏览器发起的请求都调用到ManageOne后台，ManageOne将会话转换成token，然后转发调用第三方云服务service时在header中添加X-Auth-Token参数，第三方可以调ManageOne的token校验接口确认请求是否合法。--第三方云服务service需要保存ManageOne的机器账号，非租户的操作使用机器账号token调用ManageOne的接口，租户操作则直接使用ManageOne传递的X-Auth-Token作为token。创建订单接口时product_id、service_id如何获取，count表示什么意思，display参数哪里能够展示，tenancy到期后会怎样？--前端页面通过console框架公共能力查询到产品ID，跳转到产品申请页面时产品ID已经写入到$rootScope中，可以直接获取，service_id为第三方云服务定义的id，比如demo中为hw_xxs。--count表示订单中要申请实例的个数。--display参数填写订单需要展示的内容，方便用户在订单查询页面可以直观展示订单关键参数。--tenancy过期后ManageOne首页会有资源过期提示信息。订单删除时params中的ids参数需要填写吗--ids参数需要填写，申请订单时订单更新接口上报了资源ID并保存到ManageOne中，删除时订单会根据ids的值校验资源是否存在。订单结果更新接口中resourceTags表示什么意思，可以不填吗--resourceTags表示将上报资源时直接绑定标签，可以不填上报标签和资源关系时operation_type中delete和delete_resource有什么区别--使用delete即可，delete_resource不仅删掉标签关系还会删除资源

不管是下载之后的js引入还是npm安装之后都报这个错

发帖内容：发文的版块名：博客发文的标题名：web前端开发之Vue.js：vue过渡那些事帖子内容链接：https://bbs.huaweicloud.com/blogs/197510麻烦恢复下

先检查硬终端或者显示器是否闭音，可以尝试点击终端遥控器上的麦克风静音按键。登录终端的Web界面，选择“设备控制 > 设备控制”，点击“音频控制”页签。查看音频输出的参数是否正常。在Web界面选择“系统配置 > 输入输出”，点击“视频输出”页签。展开全部，查看MAIN OUT和HDMI OUT两个参数的输出模式，保证输出模式为HDMI模式。

【WEB前端全栈成长计划】第三阶段•最终考核打卡帖又是收获知识的一个月时间，WEB前端全栈成长计划第三阶段课程内容已经全部更新完毕。大家积极的学习态度，遇到问题及时在学习群内提出，让web前端全栈三个阶段的课程可以顺利完成再次感谢大家：◎积极完成每章的随堂测验打卡，做到了课后的知识强化与巩固；◎认真完成每周读书笔记打卡，将自己的学习心得总结下来；◎高效完成阶段任务技术文章打卡，分享自己学习前端的经验。现在，大家迎来了第三阶段考核，让我们来看一下考核的具体内容▶考核打卡时间：2020.09.14-2020.09.27 23:59 ▶考核途径：点击下方链接，选择【第三阶段考核作业】https://classroom.devcloud.huaweicloud.com/classdetail/8dce3d88caa54c3792b3531ebd38fd8f/job▶考核要求：进入考核页面后，点击“查看习题描述”，详细阅读考核要求和评判标准后按要求进行考核，提交机会有2次，请大家认真作答。▶打卡要求：由于第三阶段涵盖知识点比较多，所以上传形式为按考核要求在本地编辑器运行后，将压缩包上传至classroom后台，并提交。并且按以下要求进行截图打卡！只有在按照要求进行打卡才会得到第三阶段考核证书！只有在按照要求进行打卡才会得到第三阶段考核证书！只有在按照要求进行打卡才会得到第三阶段考核证书！▶打卡方式：方式：***正确的回复格式：华为云ID+姓名（显示在考核证书上面名字）+提交完考核页面截图1张华为云ID：grandmaster  姓名：云上花木兰重要提示：请严格按照回复示例进行回复，本次为阶段末考核项目，如果没有按照要求的格式进行回复，版主将不予提示，同时不计入考核结果，会影响考核证书及奖品的发放哦~▶考核评分：提交考核内容后由专家老师根据评分标准评分，满分100分，分数将于开始审核后15个工作日内公布，分数会公布在博客里面，具体请大家留意小助手信息。▶评分标准：1、项目整体运行流畅无报错2、页面与真实页面越接近得分越高3、页面功能与真实页面越接近得分越高4、代码书写越规范，得分越高5、代码越简洁得分越高6、页面中有些细节可以简化处理，重点在整个项目的搭建，细节简化处理的地方不影响最终得分7、页面中的图片资源不作要求，可以使用任意图片代替，不影响最终得分▶考核奖励：◎参与最后考核并回复本帖，就可得到电子版证书（证书上会根据大家的回复的真实姓名填写信息，请大家在留信息时注意）参与考核，人人有份，证书由1号小助手微信点对点发放，没添加小助手微信的朋友添加一下hwcloud01，证书将在第一阶段结束后15个工作日内发放，请大家耐心等待小助手的通知哦~◎考核分数≥60分并回复本帖，另外奖励华为云定制数据线一条（数量有限，先到先得，按回帖时间发放，占楼无效！）◎本阶段会有专家老师评审出1位“最佳代码”（提交代码分数最高，同分看打卡回帖提交时间）获奖者，还会额外得到华为云无线鼠标哦~◎特别提示：参加了web前端全栈三阶段所有考核的同学们，最后可凭每阶段证书兑换整阶段实体证书一份，请大家关注后续规则！        ◎参与考核即可获得20积分累计到总积分中，赢取最后积分大奖；大家别忘了随堂测验，读书笔记和技术文章回复打卡截止日期为9月27日23:59，抓紧时间打卡呀~最佳博文还可能得到HUAWEI GT智能手表哦~积分排行细则积分排行榜奖品▶积分奖品彩蛋：【WEB前端全栈成长计划】追加福利，快来围观~本次积分前100名的用户，可享受申请云享专家直通车的权益。本次云享专家直通车，是让各位优秀的开发者进行申请后直接通过初审，进行终审。本次申请成为云享专家，可以获得礼品+100代金券。专家资料介绍链接：https://bbs.huaweicloud.com/blogs/112362?from=singlemessage&isappinstalled=0云享专家申请链接：https://bbs.huaweicloud.com/community/certifiedinfo活动注意事项1.由于本帖回复内容为阶段考核测试内容，并涉及到个人隐私，已设置回帖仅版主可见，请大家放心回复2.请大家务必在考核规定时间9月27日 23:59内完成考核回帖打卡，否侧将影响证书和奖品的发放3.积分和考核奖品信息我们会在考核阶段结束后15个工作日内整理完毕，发放奖品

摄像头的抓拍图片在前端无法直接展示，直接访问图片会有不安全链接警告，强行访问后刷新界面图片才能展示摄像头的抓拍图片在前端无法直接展示，直接访问图片会有不安全链接警告，强行访问后刷新界面图片才能展示后端拿到这串图片链接也无法转存表中转路由图片给前端图片：https://10.168.5.46:1186/mp_mcss/caseFile/downloadImg.do?fileUuid=3033127620137460226&mpIp=10.168.5.46:1186&mode=1&type=7&filedownUrl=1%25234997%25232%2523%252Fsre_storage%252Fdata3%252Fs2%252Fomm_spc%252Fomm_face%252F20200907%252F17%252F1599471698740-0-4725-467227%25231599471698742&fileName=000003033127620137460226.jpg

[内容拦截申诉] 博客拦截申诉发文的版块名：博客发文的标题及链接《web前端全栈成长计划》Vue第一章学习笔记（上）  https://bbs.huaweicloud.com/blogs/196720《web前端全栈成长计划》Vue第一章学习笔记（下）  https://bbs.huaweicloud.com/blogs/196719《web前端全栈成长计划》Vue第二章学习笔记（上）  https://bbs.huaweicloud.com/blogs/196721《web前端全栈成长计划》Vue第二章学习笔记（下）  https://bbs.huaweicloud.com/blogs/196722帖子内容：https://bbs.huaweicloud.com/forum/forum.php?mod=viewthread&tid=71831&authorid=70062&page=1附注：论坛都发出去了。博客被拒绝了。。。论坛地址：