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

菠蘿油王子發表於2018-05-08
VueJS

————僅以此文記錄個人使用vuejs開發專案對一些需求的處理方法,不定期更新…

載入favicon.ico圖示

//index.html

<link href="./favicon.ico" rel="icon" type="image/x-icon" />

// 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

 <div class="agreement"  ref="html" v-html="agreement.contractContent"></div>

//script

  updated () {
    this.$refs.html.childNodes.forEach(element => {
      element.style.fontSize = `0.3rem`
    })
  }

過濾input展示文字

//template

<input type = "text" v-bind:value="kilometers | changeToMoney">

//script

    filters:{
         changeToMoney:function(value){
               return  "$"+value;
         }
     }

根據路由跳轉切換頁面過渡動畫

//template

<transition :name="transitionName">
  <keep-alive>
    <router-view class="child-view"></router-view>
  </keep-alive>
</transition>

//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
      })

相關文章