Vue CLI

v-for key v-for循环需要添加key属性，唯一标识，这样重新渲染的速度比较快；key的作用==》虚拟DOM的Diff算法 主要作用是快速更新虚拟dom树 lodash javascript使用工具库 中央bus实现平行组件之间的传值 $emit与$on进行组件之间的传值；注意$emit和$on的事件必须在一个公共的实例上，才能够触发 demo: 平行组件 A B C 中央bus；实现 A向C传递数据 B向C传递数据；$emit触发 $on接收 必须绑定在同一个实例上 新建一个Vue实例Event 在A B组件中传递数据 Event.$emit('sendMsg',msg) 触发事件, 在c组件的mounted中绑定事件： Event.$on('sendMsg',msg=>{ }) vue-router导航守卫 beforeEach afterEach beforeReslove beforeRouterEnter(to,from,next) 在next的回调函数中可以访问this实例 beforeRouterUpdate(to,from,next) 在路由切换时，路径改变，但是组件复用的情况下，生命周期钩子不会触发，就可以在这里获取路由参数 beforeRouterLeave(to,from,next) 清除定时器 在离开当前页面时，给用户提示信息，是否确认要离开

在vue-cli中引入图片、音乐等文件，如下： <template> <div id= " app " > <h1>{{msg}}</h1> <ul v- for = " (item,index) in items " > <li>{{item}}</li> </ul> <audio :src= " audioSrc " autoplay= "" controls= "" ></audio> </div> </template> <script> import audio1 from " ./assets/audio.mp3 " export default { name: ' App ' , data(){ return { msg: " 菜单 " , items: [ " 宫保鸡丁 " , " 回锅肉 " , " 糖醋排骨 " ], audioSrc: audio1 } } } </script> <style> </style> 结束！ 来源： oschina 链接： https://my.oschina.net/u/4318872/blog/4283450

前言 就在前段时间，vue官方发布了3.0.0-beta.1 版本，趁着五一假期有时间，就把之前的一个电商商城的项目，用最新的 Composition API 拿来改造一下！ 👉GitHub地址请访问🔗： github.com/GitHubGanKa… 项目介绍 vue-jd-h5 是一个电商H5页面前端项目，基于Vue 3.0.0-beta.1 + Vant 实现，主要包括首页、分类页面、我的页面、购物车等。 📖本地线下代码vue2.6在分支 demo 中，使用mockjs数据进行开发，效果图请点击🔗 这里 ❌️master分支是线上生产环境代码，因为部分后台接口已经挂了😫，不建议使用！ 📌 本项目还有很多不足之处，如果有想为此做贡献的伙伴，也欢迎给我们提出PR或者issue ； 🔑 本项目是免费开源的，如果有伙伴想要在次基础上进行二次开发，可以clone或者fork整个仓库，如果能帮助到您，我将感到非常高兴，如果您觉得这个项目不错还请给个start！ 🙏 除了本项目，我结合多年开发经验整理出2020最新企业级实战视频教程 包括 Vue3.0/Js/ES6/TS/React/node等，想学的可进扣扣裙 519293536 免费获取，小白勿进哦！ 搭建步骤 首先,选择一个文件，将代码clone到本地（需要先fork代码到你自己的仓库，别用我的这个链接）： git clone

安装好的vue-cli，可以看到下面的目录： assets存放图片等文件。 components文件夹就类似templates文件夹，存放组件的。 main.js是创建一个vue。 App.vue是一个组件，以.vue结尾的文件都称为一个组件（html、js、css），组件第一个字幕必须是大写，组建的data必须是一个函数。 App.vue如下： <template> <div id= " app " > <!-- 必须是包裹的标签 --> <h1>{{msg}}</h1> <ul v- for = " (item,index) in items " > <li>{{item}}</li> </ul> </div> </template> <script> export default { // 抛出 name: ' App ' , // name可有可没有，指的就是App.vue这个文件 data(){ // data必须是一个函数 return { // 必须ruturn一个对象 msg: " 菜单 " , items: [ " 宫保鸡丁 " , " 回锅肉 " , " 糖醋排骨 " ] } } } </script> <style> </style> 结束！ 来源： oschina 链接： https://my.oschina.net/u/4332858/blog

今天在用yarn安装vue-cli时出现了错误 ../vue-hackernews-2.0> yarn yarn install v1.12.3 [1/5] Validating package.json... [2/5] Resolving packages... [3/5] Fetching packages... info fsevents@1.1.3: The platform "win32" is incompatible with this module. info "fsevents@1.1.3" is an optional dependency and failed compatibility check. Excluding it from installation. error upath@1.0.4: The engine "node" is incompatible with this module. Expected version ">=4 <=9". Got "10.14.2" error Found incompatible module info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command. 进行这个设置之后，会正常。

解决新版本webpack vue-cli生成文件没有dev.server.js问题 参考文章： （1）解决新版本webpack vue-cli生成文件没有dev.server.js问题 （2）https://www.cnblogs.com/luxiaoyao/p/8733832.html 备忘一下。 来源： oschina 链接： https://my.oschina.net/u/4368242/blog/4474268

electron-vue这个插件没用过，因为里面的electron版本和vue版本固定了感觉不灵活所以没去尝试，使用 Vuecli3.0 和electron5.0.8版本用到了串口，无语的是打包每次都成功了，一运行就报错。报错的意思大概就未引用seriaport模块，一顿无语。。。我不是在配置文件加了么。。。。 只好去他们的官网查看，终于让我找到了问题所在 蛋痛的是，这文件加在哪儿？？？？ 心里是崩溃的，最后没办法怀着试试的心态加到根目录 打包后成功了。。。。 嗯。。。研究这个已经三个星期了，各种坑，对于我这个英语菜的我都不好意思的人，还是很开心的。。。。看来是时候好好学习下英语了， 来源： oschina 链接： https://my.oschina.net/u/4335726/blog/4286134

因为项目要求调用高德地图，就按照官方文档按部就班的捣鼓，这一路上出了不少问题。 前言： vue-cli，node环境什么的自己安装设置推荐一个博客：https://blog.csdn.net/wulala_hei/article/details/80488674 1，找一个磁盘，在里面git bash here 然后vue init webpack XXX（文件夹名字） 你 第一步：在test里面安装install 指令：1.npm install 2.npm install vue-amap --save 注意：我在安装的时候总是出现了说找不到webpack的问题， 即：使用 npm run dev 时报错： Error: Cannot find module 'webpack-cli/bin/config-yargs' 可是我用webpack-v找到了版本号，我就删了又装了两三次，还是不行，最后我在安装的过程中没有让其修复，语句不记得了，就是安装过程中出现警告让你输入修复的，然后就成功了。 第二步：在main.js中加入 解释一下，key就是你申请的key，一串数字和字母 plugin是你在地图上用的组件 例： "AMap.Autocomplete", //输入提示插件 "AMap.PlaceSearch", //POI搜索插件 "AMap.Scale", //右下角缩略图插件

一、使用之前，我们先来掌握3个东西是用来干什么的。 npm: Nodejs下的包管理器。 webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。 vue-cli: 用户生成Vue工程模板。（帮你快速开始一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库，只需要 npm install就可以安装） 开始： 如图，下载8.9.3 LTS （推荐给绝大部分用户使用） 双击安装 可以使用默认路径，本例子中自行修改为d:\nodejs 一路点Next 点Finish完成 打开CMD，检查是否正常 再看看另外2个目录，npm的本地仓库跑在系统盘c盘的用户目录了(没见到npm-cache是因为没有用过，一使用缓存目录就生成了)，我们试图把这2个目录移动回到D:\nodejs 先如下图建立2个目录 然后运行以下2条命令 npm config set prefix "D:\nodejs\node_global" npm config set cache "D:\nodejs\node_cache" 如上图，我们再来关注一下npm的本地仓库，输入命令npm list -global 输入命令npm config set registry=http://registry.npm.taobao.org 配置镜像站

症状： 用手机第一次打开页面后，更新网页，再次用手机打开，确实第一次打开的页面 解决方案 1、设置html meta <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Expires" content="0" /> 2、打包hash 因为cli3打包可能会影响NEDO_ENV的值，在.env.production加入如下内容，将NODE_ENV固定为production，查看打包文件名称，都有hash值了 NODE_ENV='production' 来源： oschina 链接： https://my.oschina.net/u/4503861/blog/4294964