————仅以此文记录个人使用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的，如果需要兼容低版本浏览器如，需要引入polyfill。

Polyfill 推荐使用

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': ''            }          }        }        ...}

通过新窗口打开项目内页面

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