1.vue 2.1.7Դ??
2.vue-template-compiler？
3.有哪些值得学习的vue+springboot项目?
4.如何操作vue组件使用props传递数据
5.Vue安装和配置

vue 2.1.7Դ??

       Vue中pc端与移动端适配解决方案

       1.移动端适配方案

       1.1 基础概念

       viewport即视窗、视口，用于显示网页部分的区域，在PC端视口即是浏览器窗口区域，在移动端，为了让页面展示更多的b s源码内容，视窗的宽度默认不为设备的宽度，在移动端视窗有三个概念：布局视窗、视觉视窗、理想视窗。

       viewport详细设置：

       移动端默认会缩放大尺寸的页面的，当我们把上述代码去掉之后，就会随着移动端缩放的比例走，而且还可以自由放大。

       1.1.1 解决方案一viewport缩放 方案统计：

       代码原理：

       7 移动端开发自适应解决方案（阿里团队高清方案）

       1.1.2 解决方案二—两套页面 同时兼任pc和移动适配 通过配置两套不同路由和判断是否是移动端实现 核心代码：router.addRoute(isMobile() ? mobileRoutes[1] : pcRoutes[1])；（区分路由）

       1.1.3 解决方案三—postcss-pxtorem、amfe-flexible 搭配工程化，可以参考第二章PC端适配方案

       2.PC端适配方案

       vue项目使用element-ui框架Rem适配（postcss-pxtorem、amfe-flexible），自动转换px为rem，解决响应式问题

        * ： 普通液晶显示器

        * ： 高清液晶显示器

        * ： 2K高清显示器

        * ： 4K高清显示器

        * ： 笔记本（*分辨率下系统默认推荐%缩放比产生的尺寸） 大屏数据可视化项目通常用于放在电视或广告屏上展示用，而不允许出现滚动条

       2.1. 适配痛点难点

       设计稿按照*的分辨率，:9的比例设计， 实际开发中，document窗口不足:9（高度减掉顶部tab及导航栏，地址栏等） 不同分辨率：实际应用场景中，显示场景不同，不能固定写死px单位 不同比例：不同的显示器宽高比与设计稿不一致

       2.2. 什么是rem

       rem是CSS3新增的相对长度单位，是指相对于根元素html的font-size计算值的大小。简单可理解为屏幕宽度的百分比。

       但是，项目中常见尺寸绘制采用的均是px，要改用rem一时半会缓不过来，而且可能还要换算转换，所以使用rem还是比较麻烦的，但是，我们可以通过插件，能够将项目中的px转换为rem，还可以自定义基数。

       2.3. 安装依赖

       2.3. 引入amfe-flexible 由于 viewport 单位得到众多浏览器的兼容，lib-flexible 这个过渡方案已经可以放弃使用，不管是现在的版本还是以前的版本，都存有一定的问题。建议大家开始使用 viewport 来替代此方。（待考证？） amfe-flexible是lib-flexible的升级版 flexible就是根据不同的屏幕算出html的font-size，通过js来动态写meta标签 实上他做了这几样事情：

       在main.js中引入amfe-flexible

       amfe-flexible 等价代码

       2.4. 配置vue.config.js

       配置postcss-pxtorem ,可在vue.config.js、postcsssrc.js、postcss.config.js、其中之一配置，权重从左到右降低，没有则新建文件，只需要设置其中一个即可.

       2.5. 总结

       2.5.1 注意事项：

       1. 不能使用行内样式 对于行内样式，阿里手淘并不能将px转rem，所以对于需要自适应的unix源码分析样式，如font-size、width、height等请不要写在行内。同理，对于不需要转化的样式可以写在行内，或者使用PX（大写）作为单位。 暂未找到可以转行内rem的插件，可根据下面地址的方式自己实现（未验证是否可行）。 blog.csdn.net/weixin_…

       2. 字号不使用rem 我们都知道chrome的最小显示的字体是px，如果字体用rem，计算出来小于px，那么就也会以px显示，而且我们不希望出现px或者px这样的奇葩尺寸，所以字体最好是用PX（大写）来表示，至于适应，我们可以写媒体查询。

       2.5.2 测试反馈：

       已测试屏幕尺寸：* 、 *

       问题：屏幕缩小，网页缩放，效果与原*不一致

       2.5.3其他问题：

vue-template-compiler？

       vue怎么解决

       ä½ å¥½ï¼Œ

       æŠ¥é”™åŽŸå› ï¼šé€šå¸¸å‡ºçŽ°äºŽä¸€äº›ä¾èµ–库的更新或者安装新的依赖库之后(可以认为npmupdate已经成为一种习惯)，导致了vue和vue-template-compiler的版本不一致。

       è§£å†³æ–¹æ¡ˆï¼šç»Ÿä¸€vue和vue-template-compiler的版本

       1"vue":"2.3.4",

       2"vue-template-compiler":"2.3.4",

       ï¼ˆæ³¨ï¼šå¦‚上所示版本号均为样例，具体实现请小伙伴们根据自己的版本号对应）

       ç„¶åŽæ‰§è¡Œï¼šnpmupdate就可以了。

       é™„加：

       è‹¥ä¸Šè¿°æ–¹æ³•æœªè§£å†³é—®é¢˜ï¼Œåˆ™å¯èƒ½æ˜¯å› ä¸ºå„依赖库之间产生了冲突，这里我们也有更暴力的解决方法。

       é¦–先查看项目根目录下是否生成过package-lock.json的文件，若有，删之。

       ç„¶åŽåˆ é™¤æ•´ä¸ªnode_modules目录，重新配置package.json(当然，要记得统一vue和vue-template-compiler的版本)

       é…ç½®å¥½ä¹‹åŽé‡æ–°æ‰§è¡Œï¼šnpminstall；

       OK，问题解决。

element饿了么的vue框架，运行报错

       å·²è§£å†³ï¼ŒVue2.1.5将_h重命名为_c，而Element目前发的版本都是用以前的compiler编译的，导致新版runtime无法运行Element。目前的解决方案是锁定Vue的版本为2.1.4

       é”å®švue相关版本

       #重新安装一下版本

       "vue-template-compiler":"2.1.4"

       "vue-loader":".0.0"

       "vue":"2.1.4"

       å…·ä½“命令如下：

       npmremove#卸载某个版本

       npmremovevue

       npmremovevue-template-compiler

       npmremovevue-loader

       npminstallvue@2.1.4#安装指定版本

       npminstallvue-template-compiler@2.1.4

       npminstallvue-loader@.0.0

-怎么让vue打包的时候禁用angular

       ç”±äºŽæ‰“包完成后，变量无法使用

       æˆ‘尝试这样写，以及vue-cli3的写法，都无法做到禁用严格模式

       image.png

       package.json

       "devDependencies":{

       "@vue/cli-plugin-babel":"~4.5.0",

       "@vue/cli-plugin-eslint":"~4.5.0",

       "@vue/cli-plugin-router":"~4.5.0",

       "@vue/cli-plugin-vuex":"~4.5.0",

       "@vue/cli-service":"~4.5.0",

       "babel-eslint":"^.1.0",

       "babel-plugin-transform-remove-console":"^6.9.4",

       "copy-webpack-plugin":"^4.0.1",

       "electron":"^9.0.0",

       "electron-devtools-installer":"^3.1.0",

       "eslint":"^6.7.2",

       "eslint-plugin-vue":"^6.2.2",

       "sass":"^1..5",

       "sass-loader":"^8.0.2",

       "svg-sprite-loader":"^6.0.",

       "vue-cli-plugin-electron-builder":"~2.0.0",

       "vue-template-compiler":"^2.6.",

       "webpack-bundle-analyzer":"^3.9.0"

       },

       "eslintConfig":{

       "globals":{

       "__static":true

       },

       "root":true,

       "env":{

       "node":true

       },

       "extends":[

       "plugin:vue/essential",

       "eslint:recommended",

       "plugin:vue/recommended"

       ],

       "parserOptions":{

       "parser":"babel-eslint"

       },

       "rules":{ }

       }

       å¯ä»¥ä½¿ç”¨replace-in-file全局替换掉"usestrict"字符串

       ä¸¥æ ¼æ¨¡å¼ä¸Žéžä¸¥æ ¼æ¨¡å¼

       æˆ‘在IE浏览器中,使用strict模式.发现,严格模式下,不允许一个属性多处定义的错误提示,这个怎么解决?

       JavaScript严格模式

       JavaScript的严格模式该怎么理解，今天看了es6，又讲到严格模式但我一直不理解，严格模式是干啥的(=_=)

       vue中如何禁用ES6严格模式。

       vue项目中引用外部的js文件之后，报错如下，请问怎么解决？

       nuxt打包将第三方包分离

       å¦‚题，在nuxt.config.js中配置了vendor后，打包后出现了app.chunkhash.js，common.chunkhash.js,manifest.chunkhash.js但是我想将项目用到的第三方库单独打包成一个文件，如使用了vue,axios,vuex,element-ui，我期望打包后是vue.js,axios.js,vuex.js,element-ui.js。尝试使用了CommonsChunkPlugin没有成功

       pyinstaller第三方包打包问题

       pyinstaller打包时报错:raiseJSONDecodeError("Expectingvalue",s,err.value)fromNonejson.decoder.JSONDecodeError:Expectingvalue:line1column1(char0)

       3k

       webpack如何打包第三方库的资源?

       æˆ‘在做一个普通的传统项目，由于使用了es并且一些页面中的小组件使用了react，打包项目为了省事儿就使用了webpack。后来发现jquery的一些插件中使用了静态资源(如jquery.jBox,ztree等等这些插件都有自己的图片和css)，这些资源该如何处理呢？

       javascript严格模式报错

       js严格模式使用费严格模式的代码报错'caller','callee',and'arguments'propertiesmaynotbeaccessedonstrictmodefunctionsortheargumentsobjectsforcallstothems

       3回答2.6k阅读?已解决

       Webpack如何打包第三方的ui框架？

       æœ€è¿‘在看webpack，了解了基本原理。实践中也在做点东西。想问下，如果npm库中没有的js库，里边有图片，有css，有自己的目录结构，该如何引用这类库到自己的项目中呢？

       2.8k

       è‡ªé¡¶å‘下学React源码

       ä»Žç†å¿µåˆ°æž¶æž„到实现到代码，透彻理解

       å‰ç«¯æ€§èƒ½ä¼˜åŒ–设计问

       å‰ç«¯æ€§èƒ½ä¼˜åŒ–,面试的必问题目

vue运行报错epf-fast@1.0.4dev

       ç‰ˆæœ¬ä¸ä¸€è‡´ã€‚vue版本和vue-template-compiler版本不一致就会出现运行报错epf-fast@1.0.4dev。解决方法：

       1、将node_modules文件夹先删除。

       2、将package.json文件的Vue版本号和vue-template-compiler版本号改为一致（2.6.7），选高的版本，重新进行npmrundev即可。

有哪些值得学习的vue+springboot项目?

       mall

       项目地址：gitee.com/macrozheng/mall

       mall项目是一套电商系统，包括前台商城系统及后台管理系统，基于SpringBoot+MyBatis实现。前台商城系统包含首页门户、商品推荐、商品搜索、商品展示、购物车、订单流程、会员中心、客户服务、帮助中心等模块。后台管理系统包含商品管理、订单管理、会员管理、促销管理、运营管理、内容管理、统计报表、财务管理、权限管理、设置等模块。

       Cloud-Platform（微服务的）

       项目地址：gitee.com/geek_qi/cloud-platform

       Cloud-Platform是国内首个基于Spring Cloud微服务化开发平台，具有统一授权、认证后台管理系统，其中包含具备用户管理、资源权限管理、网关API管理等多个模块，支持多业务系统并行开发，可以作为后端服务的开发脚手架。代码简洁，架构清晰，适合学习和直接项目中使用。jsp模板源码核心技术采用Spring Boot 2.1.2以及Spring Cloud (Greenwich.RELEASE) 相关核心组件，采用Nacos注册和配置中心，集成流量卫兵Sentinel，前端采用vue-element-admin组件。

       spring-boot-pay（各种支付案例）

       项目地址：gitee.com/itstyle/spring-boot-pay

       这是一个支付案例，提供了包括支付宝、微信、银联在内的详细支付代码案例，对于有支付需求的小伙伴来说，这个项目再合适不过了。

       spring-boot-seckill（秒杀案例)

       项目地址：gitee.com/itstyle/spring-boot-seckill

       从0到1构建分布式秒杀系统，脱离案例讲架构都是耍流氓，SpringBoot开发案例从0到1构建分布式秒杀系统，项目案例基本成型，逐步完善中。

       springboot-plus （中规中矩的后台管理系统）

       项目地址：gitee.com/xiandafu/springboot-plus

       一个基于SpringBoot 2 的管理后台系统,包含了用户管理，组织机构管理，角色管理，功能点管理，菜单管理，权限分配，数据权限分配，代码生成等功能 相比其他开源的后台系统，SpringBoot-Plus 具有一定的复杂度。系统基于Spring Boot2.1技术，前端采用了Layui2.4。 数据库以MySQL/Oracle/Postgres/SQLServer为实例，理论上是跨数据库平台。

       litemall（电商）

       项目地址：gitee.com/linlinjava/litemall

       一个商城项目，包括Spring Boot后端 + Vue管理员前端 + 微信小程序用户前端 + Vue用户移动端。

       小商城功能：首页、专题列表、专题详情、分类列表、分类详情、品牌列表、品牌详情、新品首发、人气推荐、优惠券列表、优惠券选择、团购（团购业务有待完善）、搜索、商品详情、商品评价、商品分享、购物车、下单、订单列表、订单详情、地址、收藏、vb socket源码足迹、意见反馈、客服； 管理平台功能：会员管理、商城管理、商品管理、推广管理、系统管理、配置管理、统计报表。

       jeeSpringCloud（微服务）

       项目地址：gitee.com/JeeHuangBin/jeeSpringCloud

       基于SpringBoot2.0的后台权限管理系统界面简洁美观敏捷开发系统架构。核心技术采用Spring、MyBatis、Shiro没有任何其它重度依赖。互联网云快速开发框架,微服务分布式代码生成的敏捷开发系统架构。项目代码简洁,注释丰富,上手容易,还同时集中分布式、微服务,同时包含许多基础模块和监控、服务模块。模块包括:定时任务调度、服务器监控、平台监控、平台设置、开发平台、单点登录、Redis分布式高速缓存、会员、营销、在线用户、日志、在线人数、访问次数、调用次数、直接集群、接口文档、生成模块、代码实例、安装视频、教程文档 代码生成(单表、主附表、树表、列表和表单、redis高速缓存对接代码、图表统计、地图统计、vue.js)、dubbo、springCloud、SpringBoot、mybatis、spring、springmvc。

       NiceFish（美人鱼）

       项目地址：gitee.com/mumu-osc/NiceFish

       NiceFish（美人鱼） 是一个系列项目，目标是企业 源码 打包示范前后端分离的开发模式:前端浏览器、移动端、Electron 环境中的各种开发模式；后端有两个版本：SpringBoot 版本和 SpringCloud 版本。

       zscat_sw （电商）

       项目地址：gitee.com/catshen/zscat_sw

       基于springboot dubbo构建的一个商城项目，包括前端，后端和h5应用，小程序，作为zscat应用实践的模板项目。包含sso登录、API网关、流量控制、自定义协议包装、自动crud、自动缓存、读写分离、分布式缓存、分布式定时任务、分布式锁、消息队列、事件机制、oauth2.0登录、全文搜索、集成qiniu文件服务、集成dubbo、集成springcboot等功能。

       Roses

       项目地址：gitee.com/stylefeng/roes

       Roses基于Spring Boot 2和Spring Cloud Finchley.SR2，更符合企业级的分布式和服务化解决方案，Roses拥有高效率的开发体验，提供可靠消息最终一致性分布式事务解决方案，提供基于调用链的服务治理，提供可靠的服务异常定位方案（Log + Trace）等等，一个分布式框架不仅需要构建高效稳定的底层开发框架，更需要解决分布式带来的种种挑战！

       华夏ERP（ERP）

       项目地址：gitee.com/jishenghua/JSERP

       华夏ERP基于SpringBoot框架，立志为中小企业提供开源好用的ERP软件，目前专注进销存+财务功能。主要模块有零售管理、采购管理、销售管理、仓库管理、财务管理、报表查询、基础数据、系统管理等。支持预付款、收入支出、仓库调拨、组装拆卸、订单等特色功能。拥有库存状况、出入库统计等报表。同时对角色和权限进行了细致全面控制，精确到每个按钮和菜单。

       微人事

       项目地址：github.com/lenve/vhr

       微人事是一个前后端分离的人力资源管理系统，项目采用 SpringBoot + Vue 开发。项目打通了前后端，并且提供了非常详尽的文档，从 Spring Boot 接口设计到前端 Vue 的开发思路，作者全部都记录在项目的 wiki 中，是不可多得的 Java 全栈学习资料。

       V 部落

       项目地址：github.com/lenve/VBlog

       V部落是一个多用户博客管理平台，采用 Vue + SpringBoot + ElementUI 开发。这个项目最大的优势是简单，属于功能完整但是又非常简单的那种，非常非常适合初学者。

       springboot-plus

       项目地址：gitee.com/xiandafu/springboot-plus

       一个基于 SpringBoot 2 的管理后台系统,包含了用户管理，组织机构管理，角色管理，功能点管理，菜单管理，权限分配，数据权限分配，代码生成等功能 相比其他开源的后台系统，SpringBoot-Plus 具有一定的复杂度。系统基于 Spring Boot2.1 技术，前端采用了Layui2.4。数据库以 MySQL/Oracle/Postgres/SQLServer 为实例，理论上是跨数据库平台。

       spring-boot-seckill

       项目地址：gitee.com/itstyle/spring-boot-seckill

       从 0 到 1 构建分布式秒杀系统，脱离案例讲架构都是耍流氓，SpringBoot 开发案例从 0 到 1 构建分布式秒杀系统，项目案例基本成型，逐步完善中。

       litemall

       项目地址：github.com/linlinjava/litemall

       一个商城项目，包括 Spring Boot 后端 + Vue 管理员前端 + 微信小程序用户前端 + Vue用户移动端，功能包括、分类列表、分类详情、品牌列表、品牌详情、新品首发、人气推荐、优惠券列表、优惠券选择、团购（团购业务有待完善）、搜索、商品详情、商品评价、商品分享、购物车、下单、订单列表、订单详情、地址、收藏、足迹、意见反馈以及客服；管理平台功能包括会员管理、商城管理、商品管理、推广管理、系统管理、配置管理、统计报表等。

       jeeSpringCloud

       项目地址：gitee.com/JeeHuangBingG/jeeSpringCloud

       基于 SpringBoot2.0 的后台权限管理系统界面简洁美观敏捷开发系统架构。核心技术采用Spring、MyBatis、Shiro 没有任何其它重度依赖。 互联网云快速开发框架,微服务分布式代码生成的敏捷开发系统架构。项目代码简洁,注释丰富,上手容易,还同时集中分布式、微服务,同时包含许多基础模块和监控、服务模块。模块包括:定时任务调度、服务器监控、平台监控、平台设置、开发平台、单点登录、Redis 分布式高速缓存、会员、营销、在线用户、日志、在线人数、访问次数、调用次数、直接集群、接口文档、生成模块、代码实例、安装视频、教程文档 代码生成(单表、主附表、树表、列表和表单、redis 高速缓存对接代码、图表统计、地图统计、vue.js)、dubbo、springCloud、SpringBoot、mybatis、spring、springmvc。

       美人鱼

       项目地址：gitee.com/mumu-osc/NiceFish

       听名字就知道这是个不错的项目，事实上确实不赖。NiceFish（美人鱼） 是一个系列项目，目标是示范前后端分离的开发模式:前端浏览器、移动端、Electron 环境中的各种开发模式；后端有两个版本：SpringBoot 版本和 SpringCloud 版本，前端有 Angular 、React 以及 Electron 等版本。

       bootshiro

       项目地址：gitee.com/tomsun/bootshiro

       bootshiro 是基于 Spring Boot + Shiro + JWT 的真正 RESTful URL 资源无状态认证权限管理系统的后端,前端 usthe 。区别于一般项目，该项目提供页面可配置式的、动态的 RESTful api 安全管理支持，并且实现数据传输动态秘钥加密，jwt 过期刷新，用户操作监控等，加固应用安全。

       open-capacity-platform

       项目地址：gitee.com/owenwangwen/open-capacity-platform

       open-capacity-platform 微服务能力开放平台，简称 ocp ，是基于 layui + springcloud 的企业级微服务框架(用户权限管理，配置中心管理，应用管理，....)，其核心的设计目标是分离前后端，快速开发部署，学习简单，功能强大，提供快速接入核心接口能力，其目标是帮助企业搭建一套类似百度能力开放平台的框架。

       悟空 CRM

       项目地址：gitee.com/wukongcrm/7

       悟空 CRM 是基于 jfinal + vue + ElementUI 的前后端分离 CRM 系统。老实说，jfinal 了解下就行了，没必要认真研究，Vue + ElementUI 的组合可以认真学习下、前后端交互的方式可以认真学习下。

       paascloud-master

       项目地址：github.com/paascloud/paascloud-master

       paascloud-master 核心技术为 SpringCloud + Vue 两个全家桶实现，采取了取自开源用于开源的目标，所以能用开源绝不用收费框架，整体技术栈只有阿里云短信服务是收费的，都是目前 java 前瞻性的框架，可以为中小企业解决微服务架构难题，可以帮助企业快速建站。由于服务器成本较高，尽量降低开发成本的原则，本项目由 个后端项目和 3 个前端项目共同组成。真正实现了基于 RBAC、jwt 和 oauth2 的无状态统一权限认证的解决方案，实现了异常和日志的统一管理，实现了 MQ 落地保证 % 到达的解决方案。

如何操作vue组件使用props传递数据

        这次给大家带来如何操作vue组件使用props传递数据，操作vue组件使用props传递数据的注意事项有哪些，下面就是实战案例，一起来看一下。

       在 Vue 中，父子组件的关系可以总结为 props向下传递，事件向上传递。父组件通过 props 给子组件下发数据，子组件通过事件给父组件发送消息。看看它们是怎么工作的。

        一、基本用法

       组件不仅仅是要把模板的内容进行复用，更重要的是组件间要进行通信。

       在组件中，使用选项props 来声明需要从父级接收的数据， props 的值可以是两种， 一种是字符串数组，一种是对象。

       1.1字符串数组：

        <p id="app4">

        <my-component4 message="数据来自父组件"></my-component4>

        </p>

       Vue.component('my-component4',{

        props: ['message'],

        template: '<p>{ { message}}</p>'

       });

       var app4 = new Vue({

        el: '#app4'

       });渲染后的结果为：

       <p id= ” app4”>

       <p ＞来自父组件的数据＜／ p>

       </p>props 中声明的数据与组件data 函数return 的数据主要区别就是props 的来自父级，而data 中的是组件自己的数据，作用域是组件本身，这两种数据都可以在模板template 及计算属性computed和方法methods 中使用。

       上例的数据message 就是通过props 从父级传递过来的，在组件的自定义标签上直接写该props 的名称，如果要传递多个数据，在props 数组中添加项即可。

       有时候，传递的数据并不是直接写死的，而是来自父级的动态数据，这时可以使用指令v -bind来动态绑定props 的值，当父组件的数据变化时，也会传递给子组件。

        <p id="app5">

        <input type="text" v-model="text">

        <my-component5 :my-text="text"></my-component5>

        </p>

       Vue.component('my-component5',{

        props: ['myText'],

        template: '<p>{ { myText}}</p>'

       });

       var app5 = new Vue({

        el: '#app5',

        data: {

        text: '动态传递父组件数据'

        }

       });注意的几个点：

       1.如果你要直接传递数字、布尔值、数组、对象，而且不使用v-bind ，传递的仅仅是字符串。

       2.如果你想把一个对象的所有属性作为 prop 进行传递，可以使用不带任何参数的 v-bind (即用 v-bind 而不是 v-bind:prop-name)。例如，已知一个 todo 对象：

       1.2对象：

       当prop 需要验证时，就需要对象写法。

       一般当你的组件需要提供给别人使用时，推荐都进行数据验证，比如某个数据必须是数字类型，如果传入字符串，就会在控制台弹出警告。

        <p id="app6">

        <input type="text" v-model="number">

        <my-component6 :my-text="number"></my-component6>

        </p>

       Vue.component('my-component6',{

        props: {

        'myText':{

        type: Number, //必须是数字类型的

        required: true, //必须传值

        default: 1 //如果未定义，默认值就是1

        }

        },

        template: '<p>{ { myText}}</p>'

       });

       var app6 = new Vue({

        el: '#app6',

        data: {

        number: 1

        }

       });验证的type 类型可以是：

String

Number

Boolean

Object

Array

Function

       type 也可以是一个自定义构造器，使用instanceof 检测。

       当prop 验证失败时，在开发版本下会在控制台抛出一条警告。

       二、单向数据流

       Vue 2.x 与Vue l.x 比较大的一个改变就是， Vue2.x 通过props 传递数据是单向的了， 也就是父组件数据变化时会传递给子组件，但是反过来不行。

       业务中会经常遇到两种需要改变prop 的情况，

       2.1一种是父组件传递初始值进来，子组件将它作为初始值保存起来，在自己的作用域下可以随意使用和修改。（Prop 作为初始值传入后，子组件想把它当作局部数据来用；）

       这种情况可以在组件data 内再声明一个数据，引用父组件的prop ，示例代码如下：

        <p id="app7">

        <my-component7 :init-count="1"></my-component7>

        </p>

       Vue.component('my-component7',{

        props: ['initCount'],

        template: '<p>{ { count}}</p>',

        data: function(){

        return {

        count: this.initCount

        }

        }

       });

       var app7 = new Vue({

        el: '#app7'

       });组件中声明了数据count ， 它在组件初始化时会获取来自父组件的initCount ， 之后就与之无关了，只用维护c ount ， 这样就可以避免直接操作initCount 。

       2.2prop 作为需要被转变的原始值传入。（Prop 作为原始数据传入，由子组件处理成其它数据输出。）

       这种情况用计算属性就可以了， 示例代码如下：

        <p id="app8">

        <my-component8 :width=""></my-component8>

        </p>

       Vue.component('my-component8',{

        props: ['width'],

        template: '<p :style="style">组件内容</p>',

        computed: {

        style: function(){

        return {

        width: this.width+'px'

        }

        }

        }

       });

       var app8 = new Vue({

        el: '#app8'

       });注意在 JavaScript 中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态。

       相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

       推荐阅读：

       怎么实现微信小程序登录鉴权

       使用webpack插件html-webpack-plugin实例详解

Vue安装和配置

       Vue安装和配置指南

       1. Vue安装

       Vue.js的官方提供了多种安装方式，这里主要介绍npm安装法。

       1.1 Node.js安装

       Windows : 访问nodejs.org/en/download/下载并安装对应系统版本。

       Ubuntu .: 使用命令行安装或在Ubuntu Software中搜索安装。

       1.2 Vue和Vue CLI安装

       安装最新稳定版Vue和Vue CLI，确保Vue已成功安装。

       2. 创建Vue项目

       2.1 Vue CLI创建

       使用Vue CLI创建项目，选取preset时，选择默认的Vue 3选项。

       2.2 Vite创建

       Vite提供了快速冷启动功能，通过命令行创建Vue项目。

       3. 端口配置

       默认端口可修改，通过命令行、package.json或vue.config.js文件自定义。

       4. VSCode配置

       在VSCode中设置Vue文件template注释的配置步骤。

       5. Element Plus安装与配置

       推荐UI库Element Plus的安装与基本导入或按需导入方式。

       6. Vue与后端交互

       使用axios进行跨域请求，配置devServer以解决跨域问题。

       7. ESLint和Prettier冲突处理

       安装相关插件解决ESLint与Prettier的规则冲突，通过npm run lint --fix自动修复。

       8. TypeScript问题解决

       在jsconfig.json中添加配置，解决Vue项目中template的TypeScript intellisense问题。

       9. webpack相关报错

       移除nodejs核心模块polyfill的自动引入，需安装node-polyfill-webpack-plugin并修改vue.config.js。

       更多详细信息，请参考Vue官网、Vue CLI官网以及相关组件库文档。