vuejs&electron-vue----朝花夕拾.
————仅以此文记录个人使用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 })
相关推荐
VLilyLUE 2020-06-11
StylusGalaxy 2020-04-29
前端工程师喻文强 2020-04-27
nicepainkiller 2020-02-23
xuelang 2020-01-16
Stylusnebula 2019-12-26
界之边缘的轮回 2019-12-11
VLilyLUE 2019-12-08
didianmanong 2019-11-17
CaiKanXP 2019-11-10
StylusGalaxy 2019-11-09
flyingbird 2019-11-08
星辰的笔记 2016-04-25
Stylusnebula 2019-08-31
碎冰stylus融 2019-07-01
zhouyl0 2019-07-01
Stylusnebula 2019-07-01
crazestylus 2019-07-01
碎冰stylus融 2019-07-01