Vue CLI

一：安装node环境 1.下载地址：https://nodejs.org/zh-cn/download/ 2.检查是否安装成功：node -v 二：全局安装vue cli3 提示(可以安装淘宝镜像)：npm install -g cnpm –registry=https://registry.npm.taobao.org 1.安装命令：npm install -g @vue/cli 2.卸载命令：npm uninstall vue-cli -g 3.查看是否安装成功：vue -V || vue --version 三：创建vue项目 1.vue create 项目名称 2. Default ([Vue 2] babel, eslint) vue2默认配置 Default (Vue 3 Preview) ([Vue 3] babel, eslint) vue3默认配置 Manually select features 手动配置 3. ( ) Choose Vue version->选择版本 (*) Babel->编译 ( ) TypeScript->是否支持TypeScript ( ) Progressive Web App (PWA) Support->是否支持pwa ( ) Router->vue路由 ( ) Vuex->vue状态管理 ( ) CSS Pre

随着多媒体技术和网络通信技术的迅速发展，视频监控技术在电力系统、电信行业、工业监控、工地、城市交通、水利系统、社区安防等领域得到越来越广泛的应用。摄像头直播视频监控通过网络直接连接，可达到的世界任何角落，并能够通过控制云台、存储视频监控音视频，对现场远程运维，实现随时随地想看就看的安防需求。 背景需求 摄像机云台控制在摄像机当中很常见，摄像机能将当前状态下云台的水平角度、倾斜角度和摄像机镜头焦距等位置参数存储到设备中，需要时可以迅速调用这些参数并将云台和摄像头调整至该位置。 摄像机只要支持Onvif协议进行和第三方软件或设备对接，大部分都能进行远程控制。EasyNVR支持Onvif协议的设备云台控制，能实现和设备的实时数据传输及控制。 今天主要介绍通过EasyNVR接口二次开发，将云台控制及实时直播功能集成在自己的原有的web业务系统上。 demo效果如下： demo是通过vue-cli脚手架搭建起来，简单说一下，目录结构 对easy-player不了解的这是播放器插件地址可以参看（ https://www.npmjs.com/package/easy-player ） 这里主要讲解一下App.vue内容文件 <template> <div id="app"> <!-- 测试鉴权 如果鉴权已关闭请忽略 --> <div class="div-btn"> <el-button

目录 1，NodeJS 2，Vue CLI 3，Vue UI 4，后台接口反向代理 5，vue-devtool s 1，NodeJS 访问 nodejs.org 下载。这是必不可缺的环境之一。 下载最新的 LTS 版本。LTS 代表长期维护，通常比较稳定。 2，Vue CLI vue-cli 是从头搭建 vue 工程的脚手架工具，通过该工具，可以简化工程环境的配置。vue-cli 的官网地址为： cli.vuejs.org/zh/ 。 使用命令安装： npm install -g @vue/cli # OR yarn global add @vue/cli 安装后检查版本： vue -V 最新版本在 3 以上： 3.3.0 安装 VUE CLI 之后，就可以使用create指令创建项目了： vue create hello-world 除了命令行创建，还可以使用 VUE UI 创建。 如上所示，在创建过程中，涉及到这些工程特性： Babel，必选，用于将编写的ES6代码编译成浏览器能识别的JavaScript代码，是核心组件包 Typescript，微软开发的JS的强类型版本，通过Babel能够编译成JavaScript，可选 PWA，Progressive web apps，渐进式Web 应用，一般不选 Router，路由组件，用于页面跳转，多页面程序必选，单页面不选 Vuex

本文大约 3000 字。 目录 1，选择构建工具 1.1 Gulp 1.2 Webpack 1.3 选择 Gulp 还是 Webpack？ 2，在 vue.config.js 中配置文件压缩选项 3，使用环境变量 4，使用别名 5，使用全局 less 变量 源码 参考链接 1，选择构建工具 在现在的前端开发中，前后分离、模块化、版本控制、文件合并与压缩、mock数据等，是在大前端开发避不开的概念 。在开发的时候，以组件的方式分别开发，在部署的时候又将这些代码、图片、样式等资源优雅地合并成模块并以增量、热更新的方式加载到浏览器中，这样的模块化方案一直是前端架构师在解决和优化的焦点之一。 1.1 Gulp 美 [ɡʌlp] Gulp就像是一个产品的流水线，整个产品从无到有，都要受流水线的控制，在流水线上我们可以对产品进行管理。 Gulp是对整个过程进行控制，在其配置文件gulpfile.js中配置的每一个task。例如：对sass文件进行预编译： gulp.task('sass',function(){ gulp.src('src/styles/*.scss') .pipe(sass().on('error',sass.logError)) .pipe(gulp.dest('./build/prd/styles/'));//编译后的输出路径 }); 上面这个task可以对 'src

在这个世界上取得成就的人，都努力去寻找他们想要的机会，如果找不到机会，他们便自己创造机会。 你好，我是梦阳辰！期待与你相遇！ 01.什么是路由？ 说起路由你想起了什么? 路由是一个网络工程里面的术语。 路由( routing )就是通过互联的网络把信息从源地址传输到目的地址的活动.—维基百科 在生活中,我们有没有听说过路由的概念呢? 当然了,路由器嘛.路由器是做什么的?你有想过吗? 路由器提供了两种机制: 路由和转送. √路由是决定数据包从来源到目的地的路径. √转送将输入端的数据转移到合适的输出端. 路由中有一个非常重要的概念叫路由表. √路由表本质上就是一个映射表,决定了数据包的指向. 前端渲染和后端渲染 后端渲染：再后端写前端代码渲染（jsp)。 前端渲染:前端渲染后台返回的数据。 后端路由 后端处理url和页面之间的映射关系。 早期的网站开发整个HTML页面是由服务器来渲染的. 服务器直接生产渲染好对应的HTML页面,返回给客户端进行展示. 但是,一个网站,这么多页面服务器如何处理呢? 一个页面有自己对应的网址,也就是URL. URL会发送到服务器,服务器会通过正则对该URL进行匹配,并且最后交给一个Controller进行处理. Controller进行各种处理,最终生成HTML或者数据,返回给前端. 这就完成了一个IO操作. 上面的这种操作,就是后端路由.

本文转载于: 猿2048 网站 https://www.mk2048.com/blog/blog.php?id=0ak2j&title=Vue+CLI3+%E5%BC%80%E5%90%AFgzip%E5%8E%8B%E7%BC%A9 gizp压缩是一种http请求优化方式，通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩，可以减小60%以上的体积。 webpack在打包时可以借助 compression webpack plugin 实现gzip压缩，首先需要安装该插件： npm i -D compression-webpack-plugin 在vue cli3.0 生成的项目里，可在 vue.config.js 中按照如下方式进行配置： 压缩前后大小大致如下： 生成的压缩文件以.gz为后缀： 一般浏览器都已支持.gz的资源文件，在http请求的Request Headers 中能看到 Accept-Encoding:gzip 要使服务器返回.gz文件，还需要对服务器进行配置，根据Request Headers的Accept-Encoding标签进行鉴别，如果支持gzip就返回.gz文件。over 本文转载于: https://www.mk2048.com/blog/blog.php?id=0ak2j&title=Vue+CLI3+%E5

一、全局安装 npm install -g eslint 二、生成配置文件 　　在项目根目录执行init，生成.eslintrc文件。在init时，要求根目录存在package.json。当然也可以直接复制个现成的.eslintrc.js文件。 eslint --init 三、自定义配置项 　　根据 规则文档 ，编辑.eslintrc.js文件内容。 module.exports = { "env": { "node": true }, "rules": { // 强制使用一致的缩进 "indent": ["warn", "tab"], // 禁止空格和 tab 的混合缩进 "no-mixed-spaces-and-tabs":1, // 禁用 debugger "no-debugger": 1, // 禁止不必要的布尔转换 "no-extra-boolean-cast": 1, // 强制所有控制语句使用一致的括号风格 "curly": 1, // 禁止使用多个空格 "no-multi-spaces": 1, // 要求在函数标识符和其调用之间有空格 "func-call-spacing": 1, // 强制在函数括号内使用一致的换行 "function-paren-newline": ["warn", "never"], // 强制隐式返回的箭头函数体的位置 "implicit

一、测试项目是否可以正确运行 指令:npm run dev 首先我们先建立一个vue的项目，本人用的是vue-cli随便建立的，然后运行项目 不必非得是像我这样的，这一步的目的只是测试一下咱们的vue项目是否可以运行 二、修改路径( assetsPublicPath: './' ) 打开我们config中的js文件，修改assetsPublicPath的路径为"./"（下图的右下角位置） 三、打包文件 指令:npm run build 打包后会生成dist文件 四、把dist文件变成app模式 在HBuilder中点击文件，打开目录，找到我们项目中的dist文件，确定。 然后我们会看到这样的带着 W 的文件 五、转换APP 右键dist，点击转换成App(T) 六、 在 manifest.json里面 配置APP名字及APP图标 我们在上一步会生成一个 manifest.json文件，打开它，我们在这里操作 app名字：就是应用名称（这里我写的是思源000） app图标：现在下面点击图标配置，然后选择图片放上去（图片只能为PNG格式,通过手动改后缀是不可以的），在这里我选择的是圣诞小人的图标 七、生成apk 1.点击发行，发行为原生安装包 2.点击使用DCloud公用证书，点击打包 好了打包成apk文件了，把这个安装到手机上咱们就可以用了，嘿嘿！！！ 如果以上方法打包后还白屏

Ant Design of Vue 这里是 Ant Design 的 Vue 实现，开发和服务于企业级后台产品。 特性 # 提炼自企业级中后台产品的交互语言和视觉风格。 开箱即用的高质量 Vue 组件。 共享 Ant Design of React 设计工具体系。 支持环境 # 现代浏览器和 IE9 及以上（需要 polyfills ）。 支持服务端渲染。 版本 # 稳定版： 你可以订阅：https://github.com/vueComponent/ant-design-vue/releases.atom 来获得稳定版发布的通知。 安装 # 使用 npm 或 yarn 安装 # 我们推荐使用 npm 或 yarn 的方式进行开发 ，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。 $ npm install ant-design-vue --save 来源： https://vue.ant.design/docs/vue/introduce-cn/ 生态 # 来源： https://github.com/vueComponent/ant-design-vue/blob/master/README-zh_CN.md Project Description vue-ref 您可以使用回调来获取组件的引用，类似react ant

2020年的年终岁尾，我们一起解读一下整个2020年的前端技术的8个技术， 并深度分析 2021年大前端领域又有哪些顶级技术趋势，你不容错过。 2020年注定是不平凡的一年，相信因为疫情很多程序员的工作和生活都受到了一定影响，其实现在前端的技术已经到了深水区，工程师主要分为前面架构师和前端图形学工程师，那么2021年整个前端技术又有哪些新的趋势？ 01 第一个就是 TypeScript，TypeScript 整个呈现出爆发性的增长，在NPM它的下载量达到了四； 02 第二个就是 React 下载量达到了第一，但是Vue的star增长最多。很多人经常问我到底是深入React 还是深入Vue ，我建议你深入React，别问我为什么，你懂的～ 03 第三个就是 WebAssembly 已经逐渐崭露头角，其实我们浏览器这样的桌面应用化的趋势会越来越明显，在前端去增强web应用，WebAssembly 在整个下一年会有更加强劲的趋势 04 第四个就是no-code、low-code、pro-code在今年随着产业互联网的提出，整个行业进入了to b的转型期，未来的低代码会越来越受到大厂的重视，那么这个时候大家一定要去努力奔大厂。 05 第五个就是我们的Devops到NoOps的转换路径之一。变成目前大家都在尝试Serverless，所以在你的简历里如果没有Serverless，一定要尽量尝试