• 使用vue-cli3(vue脚手架)搭建项目

    发表于 2020-10-26 19:32浏览512• 评论0条 • 0人点赞 • 0人收藏

    10月

    26

    技术分享

    1、下载安装node.js http://nodejs.cn/download/(已经安装跳过此步骤)

    2、打开命令工具执行下面代码

         
    npm install -g @vue/cli-service-global
        
    

    3、脚手架下载好之后输入vue create '您的项目名' 回车创建

        
    vue create demo-vue
        
    

    4、请选择一个预设(preset)(我是选择自定义配置的)

         
    ? Please pick a preset: (Use arrow keys)
    > default (babel, eslint) // 默认设置
      Manually select features // 自定义配置
        
    
  • 使用CSS创建滚动视差效果

    发表于 2020-12-01 16:01浏览15• 评论0条 • 0人点赞 • 0人收藏

    12月

    01

    技术分享

    1、演示图如下

    升哥个人博客-使用CSS创建滚动视差效果
  • vue2 调用facebook登录和分享

    发表于 2020-12-12 14:46浏览12• 评论0条 • 0人点赞 • 0人收藏

    12月

    12

    技术分享

    1、facebook->进入开发者 https://developers.facebook.com/b

    2、public/index.html 增加以下代码

     
    <-- 引入sdk, appid换成 你的应用编号 -->
    <script async defer crossorigin="anonymous" src="https://connect.facebook.net/zh_CN/sdk.js#xfbml=1&version=v3.3&appId=xxxxxxxxxxx&autoLogAppEvents=1"></script>
     
    
  • linux系统安装nginx

    发表于 2020-10-16 20:42浏览771• 评论0条 • 1人点赞 • 0人收藏

    10月

    16

    技术分享

    1、安装依赖

        
    yum install -y gcc-c++
    yum install -y zlib-devel
    yum install -y openssl openssl-devel
    yum install -y pcre pcre-devel
        
    

    2、下载nginx(官网:http://nginx.org/en/download.html)

        
     wget http://nginx.org/download/nginx-1.text.18.0.tar.gz
        
    
  • CSS3详解:transform

    发表于 2020-10-26 16:39浏览1024• 评论0条 • 0人点赞 • 0人收藏

    10月

    26

    技术分享

    transform的属性包括:rotate() / skew() / scale() / translate()

    1、rotate() 旋转180度

         
    <style>
        .transform-rotate{
            transform:rotate(180deg)
            -webkit-transform:rotate(180deg);
        }
    </style>
        
    

    2、skew() 倾斜80度

         
    <style>
        .transform-skew{
            transform:skew(80deg)
            -webkit-transform:skew(80deg);
        }
    </style>
        
    
  • vue,nuxt.js 增加js分享功能(QQ空间,百度贴吧,新浪微博,人人网,QQ,开心网)

    发表于 2020-10-26 20:33浏览619• 评论0条 • 0人点赞 • 0人收藏

    10月

    26

    技术分享

    js分享功能代码如下:

         
    <template>
        <button>
            <a href="javascript:void(0)" @click="shareQQSpace">
                <i class="iconfont icon-ux14006382562102623"></i>qq空间
            </a>
        </button>
        <button>
            <a href="javascript:void(0)" @click="shareQQ">
                <i class="iconfont icon-icon363601"></i>QQ
            </a>
        </button>
        <button>
            <a href="javascript:void(0)" @click="shareRrw">
                <i class="iconfont icon-renrenwang"></i>人人网
            </a>
        </button>
        <button>
            <a href="javascript:void(0)" @click="shareHappy">
                <i class="iconfont icon-kaixin"></i>开心网
            </a>
        </button>
        <button>
            <a href="javascript:void(0)" @click="shareWbo">
                <i class="iconfont icon-weibo"></i>新浪微博</a>
        </button>
        <button>
            <a href="javascript:void(0)" @click="sharePostBar">
                <i class="iconfont icon-tieba"></i>百度贴吧
            </a>
        </button>
    </template>
        
    
  • Nuxt配置element-ui按需引入方法

    发表于 2020-10-15 21:00浏览847• 评论0条 • 1人点赞 • 0人收藏

    10月

    15

    技术分享

    我们使用 create-nuxt-app 创建项目时,选择使用 element-ui 为默认组件库,发现 Nuxt 没有开启 element-ui 的按需引入配置,导致打包文件体积过大的问题

    1、在 create-nuxt-app 中没有选择 element-ui 的先安装 element-ui。

      
    npm install element-ui --S
      
    

    2、element-ui 开启按需引入,必须安装 babel-plugin-component 插件。

    
    npm install  babel-plugin-component --S
      
    
  • js 阻止用户F12 和鼠标右击

    发表于 2020-10-28 16:44浏览846• 评论0条 • 0人点赞 • 0人收藏

    10月

    28

    技术分享

    代码如下:

         
    /* 阻止浏览器F12 ,右击 */
    export function preventExamine () {
      document.onkeypress = function (event) {
        event = (event || window.event);
        if (event.keyCode == 123) {
          return false;
        }
      }
      document.onmousedown = function (event) {
        event = (event || window.event);
        if (event.keyCode == 123) {
          return false;
        }
      }
      document.onkeydown = function (event) {
        event = (event || window.event);
        if (event.keyCode == 123) {
          return false;
        }
      }
      let message="对不起,右键已被禁用";
      function clickIE() {if (document.all) {(message);return false;}}
           function clickNS(e) {if
           (document.layers||(document.getElementById&&!document.all)) {
           if (e.which==2||e.which==3) {(message);return false;}}}
      if (document.layers)
           {document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
           else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}
           document.oncontextmenu=new Function("return false")
    }
        
    
  • cpsblog
  • Do you like me?

  • 热门文章
  • 推荐文章
  • 最新文章