前言 常用的部署方式有两种：1.是把生成好的静态页面放到springboot的static目录下，与打包后的springboot项目一起发布，当springboot运行起来后，自然而然就能访问到静态页面文件了。这种方法比较简单，适用于非常小型的系统。优点是：不需要复杂的配置。而缺点也很明显：需要两者一同发布。我在这里就不做赘述了。2.是通过http服务器发布，本文以nginx为例，重点介绍这种方式。 一、生成静态页面 运行npmrunbuild 生成的页面文件在dist目录下：二、配置nginx  windows系统下载nginx：http://nginx.org/en/download.html  下载完解压后，找到conf/nginx.conf文件，并修改：worker_processes1;events{worker_connections1024;}http{includemime.types;server{listen80;server_namelocalhost;#静态文件夹路径ro...

 一.IDE开发工具 常用的开发工具有webstorm和sublime。我个人喜好用Atom+插件的形式打开Atom，在file-->settings-->packages中收入vue开发相关的插件beautify：代码格式atom-html-preview：html代码提示language-vue、language-vue-component：vue语言lint-sass-vue：vue的sass语言vue-autocomplete：vue语法提示 文件结构如下： 二、安装组件 进入package.json同级目录 运行cnpminstall--saveaxios　　安装axios，用于调用http请求  安装element-ui库cnpminstall--saveelement-ui　　安装font-awesome图标库cnpminstall--savefont-awesome　　安装sass库cnpminstall--save-devnode-sasscnpminstall--save-d...

目的 开发一个后台管理的前端，顶部是标题，左侧是菜单导航栏，中间是要显示的内容。而内容可以是各种图表，也可以是数据列表。 一、准备工作 1..修改App.vue文件代码如下：<template><divid="app"><transitionname="fade"mode="out-in"><router-view></router-view></transition></div></template><script>exportdefault{name:'app',components:{}}</script><stylelang="scss">body{margin:0;padding:0;font-family:HelveticaNeue,Helvetica,PingFangSC,HiraginoSansGB,MicrosoftYaHei,SimSun,sans-serif;font-size:14px;-webkit-...

 一、node.js开发环境 windows系统，去网站https://nodejs.org/en/download/，下载对应的安装程序，并安装WindowsInstaller(.msi)接下来，开始配置环境变量。1.配置“NODE_HOME”为：“D:ProgramFiles(x86)odejs” 我这里，node.js安装在“D:ProgramFiles(x86)odejs”目录下，这根据你的具体安装路径而设置。 2.配置“NODE_PATH”为：%NODE_HOME%ode_modules 这关系到使用npm的命令，如果配置错了，安装的node依赖的目录就不正确。 3.配置Path，追加;%NODE_HOME%;%NODE_PATH%;这两项 4.检测环境在CMD中输入node-v和npm-v如果出现版本号，则说明安装成功 我这里安装的node.js版本是6.11.4，npm的版本是5.6 &n...

查看了很多网上写的改来改去都在手机上运行不起来，运行起来又是白屏；最后放弃，自己结合文档搞吧！1.项目目录下的config文件夹里的index.js文件中,将build对象下的assetsPublicPath中的“/”，改为“./”后，打包生成的 dist 文件。注释：config文件夹里的index.js中有两个assetsPublicPath，记住是改 build对象下的 assetsPublicPath 完了之后，打包， 执行npmrunbuild之后生成dist文件夹  2.在新建一个独立文件夹的项目,选择H5+app     把新建H5+app里面不要的css,img，js,index文件先删除掉，然后把vue打包生成的dist文件夹里面的static文件复制到H5+app里面          &nb...

    第一步：安装node 前端开发框架和环境都是需要Node.js，先安装node.js开发环境，vue的运行是要依赖于node的npm的管理工具来实现，下载https://nodejs.org/en/，安装完成之后，打开cmd开始输入命令。（我用的是win10系统，所以需要管理员权限，右键点击以管理员身份运行cmd），不然会出现很多报错。 2：查看node的版本号打开cmd，输入node-v,回车，查看node版本号，出现版本号说明安装成功。 命令行：node -v 3.安装淘宝npm镜像由于npm是国外的，使用起来比较慢，我们这里使用淘宝的cnpm镜像来安装vue.淘宝的cnpm命令管理工具可以代替默认的npm管理工具。命令行：npminstall-gcnpm--registry=https://registry.npm.taobao.org 4.安装全局vue-cli脚手架 淘宝镜像安装成功后，我们就可以全局vue-cli脚手架了，输入命令：cnpminstall--...

Vue基础考察一、computed和watch　　（Vue中watch的简单应用）二、class和style　　（vue常用方法以及面试问题）三、v-if和v-show　　（vue常用方法以及面试问题）四、父子组件通信、非父子组件通信　　（vue2.0父子组件以及非父子组件如何通信）五、单个组件生命周期，父子组件，生命周期　　（Vue生命周期和考点） Vue高级特性一、自定义v-model　　（Vue自定义v-model实现Vue的双向数据绑定--Vue高级特性）二、$nextTickrefs　　（Vue自定义v-model实现Vue的双向数据绑定--Vue高级特性）三、slot　　（vue使用插槽分发内容slot的用法）四、动态、异步组件　　（Vue动态组件以及异步组件--Vue高级特性）五、keep-alive　　Vue动态组件以及异步组件--Vue高级特性）六、mixin混合　　Vue动态组件以及异步组件--Vue高级特性）Vue周边工具一、vuex　　（Vuex简单实例以及安装遇到的坑）二、vue-router　　（vue路由总结以及面试准备） Vue原理一...

一、Vue响应式原理 1、什么叫响应式：　　1、组件data的数据一旦变化，立刻出发视图的更新　　2、实现数据驱动视图的第一步2、实现响应式的核心API：Object.defineProperty vue3.0利用proxy实现响应式3、Object.defineProperty基础用法（通过getset用法来实现）--能讲到这里就OK了4、Object.defineProperty实现响应式　　1、监听对象、监听数组　　2、复杂对象，深度监听　  3、几个缺点二、虚拟DOM和DIFF算法虚拟DOM也称VDOM　　VDOM是Vuereact的基石；Vue和react是数据驱动视图，那么如何有效操控DOM操作，VDOM就出来了；VDOM原理：因为js的执行速度是非常快的，所以VDOM就是用JS模拟DOM结构，计算出最小的变更（这个对比算法就是DIFF），操作DOM；DOM结构可以用JSON模拟出来，类似XML；下图需要能写出来学习VDOM利用snabbdom　　1、DIFF算法例如v-for的key为什么必须要；就讲讲DIFF算法DIFF比较算法　...

Vue高级特性一、自定义v-model实现Vue的双向数据绑定父组件中<p>{{name}}</p><custormModelv-model="name"/>data(){return{//组件custormModel中的input输入改变，绑定到了这里，实现双向绑定name:'颜色'}},components:{custormModel}组件custormModel<inputtype="text":value="strName"@input="$emit('change',$event.target.value)">1、上边的input使用了:value而不是v-model2、上边的change要和model.event对应起来3、:value要和model.prop对应起来exportdefault{model:{prop:'strName',//对应propsstrNameevent:'change'},props:{strName:String,default(){return''}},data(){return{}}}二、$n...

在线体验：pages.cixi518.comnpmivo-pages--savevo-pages组件父元素必须设置固定高度并填写属性overflow:hidden;如：height:100vh;overflow:hidden;全局引入//mian.jsimportVoPagesfrom"vo-pages";import"vo-pages/lib/vo-pages.css";Vue.component('VoPages',VoPages)局部引入importVoPagesfrom'vo-pages';import"vo-pages/lib/vo-pages.css";components:{VoPages}常规使用<vo-pages:data="list"@pullingUp="pullingUp"@pullingDown="pullingDown":loadedAll="loadedAll"><ulclass="article-list"><liclass="article"v-for="articleinlist":key="article.id">...

1.去高德开发者平台申请key；2.安装vue-amap；3.使用组件调用地图npm安装npminstallvue-amap--save　CDN目前可通过 unpkg.com/vue-amap 获取最新版本的资源。<scriptsrc="https://unpkg.com/vue-amap/dist/index.js"></script>main.js引入vue-amap//引入vue-amapimportAMapfrom'vue-amap';Vue.use(AMap);//初始化vue-amapAMap.initAMapApiLoader({//高德的keykey:'YOUR_KEY',//插件集合（插件按需引入）plugin:['AMap.Autocomplete','AMap.PlaceSearch','AMap.Scale','AMap.OverView','AMap.ToolBar','AMap.MapType','AMap.PolyEditor','AMap.CircleEditor']});需要注意：<el-amap>...

用户注册时将加密后的密码发送给后端存储当登陆的时候,再将加密后的密码和数据库中加密的密码相匹配。此加密无须解密。安装: npminstallcrypto--save在需要用到的文件中通过import引入。importcryptofrom'crypto'login(){let{username,password}=this.from;if(username!==''&&password!==''){constmd5=crypto.createHash('md5')md5.update(password)letmd5password=md5.digest('hex')}}md5pwd就是加密后的内容了。直接传递给后端...

根据后台的数据生成多个select，由于数据的数量不定，所以v-model绑定的变量名也不定。所以通过数据的id或者下标进行变量拼接。页面能够成功渲染，但是当进行下拉框的选值时，组件不刷新，选中的结果并没有展示<divv-for="(item,index)intagAllDate":key="index"><el-form-item:label="item.name"><el-selectv-model="editData['line_'+index]"multipleplaceholder="请选择"color:#800000;">"width:100%;"><el-optionv-for="(itemO,o)initem.sub_list":key="o":label="itemO.name":value="itemO.tag_id"></el-option></el-select></el-form-item></div>editdata是声明的对象editData:{},由于我们需要...

一、vue-element-admin添加快捷导航　　这个组件是基于vue-i18n因此，首先在项目中安装i18nnpminstall--savevue-i18n然后main.js中引入importi18nfrom'./lang'//Internationalization然后注意src下边lang文件夹的引入。之后在layout文件夹中，添加组件：tags-view就可以了。二、去掉Mock使用真实数据。main.js中找到，mock的引入直接注释掉，就好了。所有的接口请求都在api下边...

Installthepkgwithnpm://v5之前的版本npmi--savevue-area-linkage//v5及之后的版本npmi--savevue-area-linkagearea-data　　目前基本都是5之后的了main.js中importVueAreaLinkagefrom'vue-area-linkage';Vue.use(VueAreaLinkage)　　组件中import{pca,pcaa}from'area-data';//城市数据import'vue-area-linkage/dist/index.css';//样式data(){return{pca:pca,pcaa:pcaa,selected2:'',}}d代码//v5之前的版本<area-selectv-model="selected"></area-select><area-cascaderv-model="selected2"></area-cascader>//v5及之后的版本<area-selectv-model="selected":dat...