资讯专栏INFORMATION COLUMN

vuejs&electron-vue----朝花夕拾.

Awbeci / 954人阅读

摘要:推荐使用使用指定打包位。开发环境跨域代理设置如果是接口,需要配置这个参数如果接口跨域,需要进行这个参数配置通过新窗口打开项目内页面

————仅以此文记录个人使用vuejs开发项目对一些需求的处理方法,不定期更新...

加载favicon.ico图标

//index.html

// build/webpack.dev.conf.js

new HtmlWebpackPlugin({
    filename: "index.html",
    template: "index.html",
    inject: true,
    favicon: path.resolve("favicon.ico")
})
全局添加sass变量声明

npm install -D sass-resources-loader

//build/utils.js

  return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders("less"),
    sass: generateLoaders("sass", { indentedSyntax: true }),
    scss: generateLoaders("sass").concat(
      {
        loader: "sass-resources-loader",
        options: {
          resources: path.resolve(__dirname, "../src/styles/variables.scss")
        }
      }
    ),
    stylus: generateLoaders("stylus"),
    styl: generateLoaders("stylus")
  }
指定路径或文件类型去掉eslint校验

//.eslintignore

/build/
/config/
/dist/
/*.js
/test/unit/coverage/
/src/plugins
修改v-html内容样式

//template

 

//script

  updated () {
    this.$refs.html.childNodes.forEach(element => {
      element.style.fontSize = "0.3rem"
    })
  }
过滤input展示文字

//template


//script

    filters:{
         changeToMoney:function(value){
               return  "$"+value;
         }
     }
根据路由跳转切换页面过渡动画

//template


  
    
  


//script

  data () {
    return {
      transitionName: "slide-left"
    }
  },
  // 监听路由的路径,可以通过不同的路径去选择不同的切换效果
  watch: {
    "$route" (to, from) {
      console.log("现在路由:", to.path.split("/")[1], "来自路由:", from.path.split("/")[1], "现在的动画:", this.transitionName)
      const toDepth = to.path.split("/").length
      const fromDepth = from.path.split("/").length
      this.transitionName = toDepth < fromDepth ? "slide-right" : "slide-left"
    }
  }
vue-router导航守卫及路由重定向同时使用时,重定向需放在导航守卫后面

//script

   routes: [
        {
            path: "/",
            name: "Home",
            component: Home;
            },
            beforeEnter: (to, from, next) => {
                ...dosomething()
                next()
            },
            redirect: { path: "anotherPage" },
            children: []
            }
         ]
    
生产环境去除console及debugger

/build/webpack.config.prod.conf.js

    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false,
          drop_debugger: true, //add
          drop_console: true   //add
        }
      },
      sourceMap: config.build.productionSourceMap,
      parallel: true
    }),
背景图片打包使用绝对路径

/utils.js

    ExtractTextPlugin.extract({
          use: loaders,
          publicPath:"../../", //add
          fallback: "vue-style-loader"
     })
axios兼容低版本浏览器

axios是基于Promise的,如果需要兼容低版本浏览器如ie11及以下,需要引入polyfill。

Polyfill 推荐使用 es6-promise

To install:

npm install es6-promise-polyfill

To use:

var Promise = require("es6-promise-polyfill").Promise;
var promise = new Promise(...);
electron-vue使用electron-builder指定打包32位。

//package.json

    "win": {
      "icon": "build/icons/icon.ico",
      "target": [
        {
          "target": "nsis",
          "arch": [
            "ia32"
          ]
        }
      ]
    },
electron-vue开发环境跨域代理设置

//.electron-vue/dev-runner.js

function startRenderer(){
...
        proxy: {
          "/api": {
            target: "http://192.168.74.222:6019",
            // secure: false,  // 如果是https接口,需要配置这个参数
            changeOrigin: true, // 如果接口跨域,需要进行这个参数配置
            pathRewrite: {
              "^/api": ""
            }
          }
        }
        ...
}
通过BrowserWindow新窗口打开项目内页面
      const BrowserWindow = require("electron").remote.BrowserWindow
      const winURL = process.env.NODE_ENV === "development"
        ? `http://localhost:9080/#/new`
        : `file://${__dirname}/index.html#new`
      let newWindow = new BrowserWindow({
        height: 600,
        width: 800
      })
      newWindow.loadURL(winURL)
      newWindow.on("closed", () => {
        newWindow = null
      })

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/94800.html

相关文章

  • 【收藏】2019年最新Vue相关精品开源项目库汇总

    摘要:前言本文的前身是源自上的项目但由于该项目上次更新时间为年月日,很多内容早已过期或是很多近期优秀组件未被收录,所以小肆今天重新更新了内容并新建项目。提交的项目格式如下项目名称子标题相关介绍如果收录的项目有错误,可以通过反馈给小肆。 前言 本文的前身是源自github上的项目awesome-github-vue,但由于该项目上次更新时间为2017年6月12日,很多内容早已过期或是很多近期优...

    williamwen1986 评论0 收藏0
  • (朝花夕拾)Spring-Annotation注解驱动开发

    摘要:前言大学是专业,毕业后实习加工作一直都是前端方向,所以还停留在的年代,趁着年轻,就是要折腾。先把注解都弄明白。该文记录注解学习过程中遇到的问题。 前言 大学是Java专业,毕业后实习加工作一直都是前端方向,所以还停留在SSM的年代,趁着年轻,就是要折腾。先把注解都弄明白。该文记录注解学习过程中遇到的问题。 springAnnotation 问题 @Import 给容器中注册组件共有3种...

    YorkChen 评论0 收藏0
  • 朝花夕拾:CSS居中完全指南

    摘要:正文居中是常被开发者抱怨的问题之一。注意你不能将浮动元素居中。水平且垂直居中你可以将前面的方法任意组合起来,实现完美的居中效果。这样就可以使元素水平且垂直居中,并具有良好的浏览器兼容性。 参考 Centering in CSS: A Complete Guide BY CHRIS COYIER ON SEPTEMBER 2, 2014 附:文中涉及到了flex的一些用法,如果没有接...

    laznrbfe 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<