————仅以此文记录个人使用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('/').lengthconst fromDepth = from.path.split('/').lengththis.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, //adddrop_console: true   //add}},sourceMap: config.build.productionSourceMap,parallel: true}),

背景图片打包使用绝对路径

/utils.js

    ExtractTextPlugin.extract({use: loaders,publicPath:'../../', //addfallback: '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.BrowserWindowconst 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})