vue

ngnix 部署 vue项目-基础篇 标签（空格分隔）： docker ngnix vue Dockerfile 目录 基础知识 主要知识点 ###1.基础知识 image container docker 命令 build run rm rmi exec Dockerfile npm 打包vue项目 ###2.主要知识点 Dockerfile image container 简单来讲，Dockerfile构建出Docker镜像，通过Docker镜像运行Docker容器。 Dockerfile 包含构建image的指令 #基于centos镜像 FROM centos #引用指定基础镜像 #维护人的信息 MAINTAINER The CentOS Project #安装httpd软件包 构建image操作 RUN yum -y update RUN yum -y install httpd #开启80端口 生命服务端口 EXPOSE 80 #复制网站首页文件至镜像中web站点下 ADD index.html /var/www/html/index.html #复制该脚本至镜像中，并修改其权限 ADD run.sh /run.sh RUN chmod 775 /run.sh #当启动容器时执行的脚本文件 CMD ["/run.sh"] >生产案例： #引用指定镜像 可通过 docker

ngnix 部署 vue项目-基础篇 标签（空格分隔）： docker ngnix vue Dockerfile 目录 基础知识 主要知识点 ###1.基础知识 image container docker 命令 build run rm rmi exec Dockerfile npm 打包vue项目 ###2.主要知识点 Dockerfile image container 简单来讲，Dockerfile构建出Docker镜像，通过Docker镜像运行Docker容器。 Dockerfile 包含构建image的指令 #基于centos镜像 FROM centos #引用指定基础镜像 #维护人的信息 MAINTAINER The CentOS Project #安装httpd软件包 构建image操作 RUN yum -y update RUN yum -y install httpd #开启80端口 生命服务端口 EXPOSE 80 #复制网站首页文件至镜像中web站点下 ADD index.html /var/www/html/index.html #复制该脚本至镜像中，并修改其权限 ADD run.sh /run.sh RUN chmod 775 /run.sh #当启动容器时执行的脚本文件 CMD ["/run.sh"] >生产案例： #引用指定镜像 可通过 docker

效果图 src/components/scroll/index.vue <template> <!-- 通过ref可以获取到dom对象 --> <swiper class="swiper" :options="swiperOption" ref="swiper"> <div class="mine-scroll-pull-down"> <me-loading :text="pullDownText" inline ref="pullDownLoading" /> </div> <swiper-slide> <!-- 所有内容放在插槽里 --> <slot></slot> </swiper-slide> <div class="mine-scroll-pull-up"> <me-loading :text="pullUpText" inline ref="pullUpLoading" /> </div> <div class="swiper-scrollbar" slot="scrollbar"></div> </swiper> </template> <script> import { Swiper, SwiperSlide } from 'vue-awesome-swiper'; import 'swiper/css/swiper.css'; import MeLoading

当页面滚动超过一屏时，显示回到顶部按钮，点击回到顶部 效果图 src/components/scroll/index.vue <template> <!-- 通过ref可以获取到dom对象 --> <swiper class="swiper" :options="swiperOption" ref="swiper"> <div class="mine-scroll-pull-down"> <me-loading :text="pullDownText" inline ref="pullDownLoading" /> </div> <swiper-slide> <!-- 所有内容放在插槽里 --> <slot></slot> </swiper-slide> <div class="mine-scroll-pull-up"> <me-loading :text="pullUpText" inline ref="pullUpLoading" /> </div> <div class="swiper-scrollbar" slot="scrollbar"></div> </swiper> </template> <script> import { Swiper, SwiperSlide } from 'vue-awesome-swiper'; import 'swiper/css

效果图 src/components/scroll/index.vue <template> <!-- 通过ref可以获取到dom对象 --> <swiper class="swiper" :options="swiperOption" ref="swiper"> <div class="mine-scroll-pull-down"> <me-loading :text="pullDownText" inline ref="pullDownLoading" /> </div> <swiper-slide> <!-- 所有内容放在插槽里 --> <slot></slot> </swiper-slide> <div class="mine-scroll-pull-up"> <me-loading :text="pullUpText" inline ref="pullUpLoading" /> </div> <div class="swiper-scrollbar" slot="scrollbar"></div> </swiper> </template> <script> import { Swiper, SwiperSlide } from 'vue-awesome-swiper'; import 'swiper/css/swiper.css'; import MeLoading

在阅读[ vue-element-admin ]代码时候,发现有以下写法: <el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row style="width: 100%"> 其中key这个属性怎么都没查到. 最后,带issue里面查到了说明 https://github.com/PanJiaChen/vue-element-admin/issues/656 . 原来这个key属性是vue自带特殊属性,主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不更新这个key的话,显示隐藏列的时候,部分DOM不会重新渲染,导致table变化时候没有动画过度,显得很生硬. 参考vue说明: https://cn.vuejs.org/v2/api/#key 心得:于细微之处见真章. 来源： oschina 链接： https://my.oschina.net/u/133911/blog/1824406

最近做的电商项目两个页面都用到了级联的一个查询;所以我们为了简化代码,就将级联的查询抽取成了一个公共组件(components目录下的HearderSearch.vue); 但是我们的级联查询需要支持Seo,这样我们就要用到nuxt.js中的SSR来渲染我们的单页面,使其能满足Seo; 忘记Nuxt.js,SSR,Seo了点击下方链接: https://my.oschina.net/ilovejava/blog/3221644 说白了就是需要用的Asyncdata方法;但是该方法只能在pages目录下的页面书写;所以只能在首页执行完该方法后 讲方法的返回值通过父子组件传值的方式传递到功能组件中; Prop总结: 官网链接: https://cn.vuejs.org/v2/guide/components-props.html#ad 关于父子组件传值: Vue中父子组件之间的传值是怎么实现的？ 1）父组件向子组件传递，子组件使用props接收父组件传递的数据。（自定义属性）在这里 首页看也看作为父组件,抽取的页面就是子组件 2）子组件向父组件传值，子组件通过$emit()触发父组件的事件，父组件通过v-on绑定的函数接收值。（自定义事件） 3）非父子组件之间传值，使用公共文件。 来源： oschina 链接： https://my.oschina.net/ilovejava/blog

1、修改loading组件，增加设置文字的方法 src/components/loading/index.vue <template> <div class="mine-loading" :class="{'me-loading-inline':inline}"> <span class="mine-loading-indicator"> <img src="./loading.gif"> </span> <span class="mine-loading-text" v-if="loadingText">{{loadingText}}</span> </div> </template> <script> export default { name:"MeLoading", props:{//过滤器 inline:{ type:Boolean, default:false } }, data(){ return{ loadingText:"加载中..." } }, methods:{ setText(text){ this.loadingText=text; } }, watch:{ text(text){ this.loadingText=text; } } } </script> <style lang="scss" scoped> .mine-loading{ width

1.外部引入 styleHeight：样式的高度，Number: 数字大小 <compute-number :styleHeight="44" :number="Number(1905)" > </compute-number> 2.组件代码 <template> <div id="demo"> <div class="nwwest-roll" :style="{'height': styleHeight + 'px'}" id="nwwest-roll"> <ul id="roll-ul" class="roll-ul"> <li v-for="(item, index) in list" :style="{'height': styleHeight + 'px'}" ref="rollul" class="rollLi" :class="{anim:animate==true}"> <span class="name">{{item}}</span> </li> </ul> </div> </div> </template> <script> export default { // 此处是模拟数字变化，所以数字都不会改变， props: { number: { type: Number, default: 0 }, styleHeight: { type: Number,

效果图 src/components/scroll/index.vue <template> <swiper class="swiper" :options="swiperOption"> <swiper-slide> <!-- 所有内容放在插槽里 --> <slot></slot> </swiper-slide> <div class="swiper-scrollbar" slot="scrollbar"></div> </swiper> </template> <script> import { Swiper, SwiperSlide } from 'vue-awesome-swiper'; import 'swiper/css/swiper.css'; export default { name: 'Scrollbar', title: 'Scrollbar', components: { Swiper, SwiperSlide }, data() { return { swiperOption: { scrollbar: { el: '.swiper-scrollbar', hide: true }, direction:'vertical', slidesPerView:'auto', freeMode:true, setWrapperSize:true } } } }