摘要:推薦使用使用指定打包位。開(kāi)發(fā)環(huán)境跨域代理設(shè)置如果是接口,需要配置這個(gè)參數(shù)如果接口跨域,需要進(jìn)行這個(gè)參數(shù)配置通過(guò)新窗口打開(kāi)項(xiàng)目?jī)?nèi)頁(yè)面
————僅以此文記錄個(gè)人使用vuejs開(kāi)發(fā)項(xiàng)目對(duì)一些需求的處理方法,不定期更新...
加載favicon.ico圖標(biāo)//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校驗(yàn)
//.eslintignore
/build/ /config/ /dist/ /*.js /test/unit/coverage/ /src/plugins修改v-html內(nèi)容樣式
//template
//script
updated () { this.$refs.html.childNodes.forEach(element => { element.style.fontSize = "0.3rem" }) }過(guò)濾input展示文字
//template
//script
filters:{ changeToMoney:function(value){ return "$"+value; } }根據(jù)路由跳轉(zhuǎn)切換頁(yè)面過(guò)渡動(dòng)畫(huà)
//template
//script
data () { return { transitionName: "slide-left" } }, // 監(jiān)聽(tīng)路由的路徑,可以通過(guò)不同的路徑去選擇不同的切換效果 watch: { "$route" (to, from) { console.log("現(xiàn)在路由:", to.path.split("/")[1], "來(lái)自路由:", from.path.split("/")[1], "現(xiàn)在的動(dòng)畫(huà):", this.transitionName) const toDepth = to.path.split("/").length const fromDepth = from.path.split("/").length this.transitionName = toDepth < fromDepth ? "slide-right" : "slide-left" } }vue-router導(dǎo)航守衛(wèi)及路由重定向同時(shí)使用時(shí),重定向需放在導(dǎo)航守衛(wèi)后面
//script
routes: [ { path: "/", name: "Home", component: Home; }, beforeEnter: (to, from, next) => { ...dosomething() next() }, redirect: { path: "anotherPage" }, children: [] } ]生產(chǎn)環(huán)境去除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 }),背景圖片打包使用絕對(duì)路徑
/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開(kāi)發(fā)環(huán)境跨域代理設(shè)置
//.electron-vue/dev-runner.js
function startRenderer(){ ... proxy: { "/api": { target: "http://192.168.74.222:6019", // secure: false, // 如果是https接口,需要配置這個(gè)參數(shù) changeOrigin: true, // 如果接口跨域,需要進(jìn)行這個(gè)參數(shù)配置 pathRewrite: { "^/api": "" } } } ... }通過(guò)BrowserWindow新窗口打開(kāi)項(xiàng)目?jī)?nèi)頁(yè)面
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 })
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/94800.html
摘要:前言本文的前身是源自上的項(xiàng)目但由于該項(xiàng)目上次更新時(shí)間為年月日,很多內(nèi)容早已過(guò)期或是很多近期優(yōu)秀組件未被收錄,所以小肆今天重新更新了內(nèi)容并新建項(xiàng)目。提交的項(xiàng)目格式如下項(xiàng)目名稱子標(biāo)題相關(guān)介紹如果收錄的項(xiàng)目有錯(cuò)誤,可以通過(guò)反饋給小肆。 前言 本文的前身是源自github上的項(xiàng)目awesome-github-vue,但由于該項(xiàng)目上次更新時(shí)間為2017年6月12日,很多內(nèi)容早已過(guò)期或是很多近期優(yōu)...
摘要:前言大學(xué)是專業(yè),畢業(yè)后實(shí)習(xí)加工作一直都是前端方向,所以還停留在的年代,趁著年輕,就是要折騰。先把注解都弄明白。該文記錄注解學(xué)習(xí)過(guò)程中遇到的問(wèn)題。 前言 大學(xué)是Java專業(yè),畢業(yè)后實(shí)習(xí)加工作一直都是前端方向,所以還停留在SSM的年代,趁著年輕,就是要折騰。先把注解都弄明白。該文記錄注解學(xué)習(xí)過(guò)程中遇到的問(wèn)題。 springAnnotation 問(wèn)題 @Import 給容器中注冊(cè)組件共有3種...
摘要:正文居中是常被開(kāi)發(fā)者抱怨的問(wèn)題之一。注意你不能將浮動(dòng)元素居中。水平且垂直居中你可以將前面的方法任意組合起來(lái),實(shí)現(xiàn)完美的居中效果。這樣就可以使元素水平且垂直居中,并具有良好的瀏覽器兼容性。 參考 Centering in CSS: A Complete Guide BY CHRIS COYIER ON SEPTEMBER 2, 2014 附:文中涉及到了flex的一些用法,如果沒(méi)有接...
閱讀 2158·2021-09-22 10:56
閱讀 1465·2021-09-07 10:11
閱讀 1801·2019-08-30 15:54
閱讀 2290·2019-08-30 15:44
閱讀 2307·2019-08-29 12:40
閱讀 3031·2019-08-28 18:25
閱讀 1735·2019-08-26 10:24
閱讀 3186·2019-08-23 18:39