[总结]vue开发常见知识点及问题资料整理（持续更新）
package.json中的dependencies與devDependencies之間的區別
–save-dev 和 –save 的區別
我們在使用npm install 安裝模塊或插件的時候，有兩種命令把他們寫入到 package.json 文件里面去，比如：
-
–save-dev 安裝的 插件，被寫入到 devDependencies 對象里面去
-
–save 安裝的 插件 ，被寫入到 dependencies 對象里面去
devDependencies 是只會在開發環境下依賴的模塊，生產環境不會被打入包內。
dependencies 是不僅在開發環境使用，在生成環境也需要。
注：可通過NODE_ENV=developement或NODE_ENV=production指定開發還是生產環境。
(webpack)vue-cli構建的項目如何設置每個頁面的title
在路由里每個都添加一個meta
[{path:'/login',meta: {title: '登錄頁面'},component:'login' }]鉤子函數：
在main.js中添加如下代碼
router.beforeEach((to, from, next) => {window.document.title = to.meta.title;next() })vue項目中使用axios上傳圖片等文件
首先安裝axios：
1.利用npm安裝npm install axios –save
2.利用bower安裝bower install axios –save
3.直接利用cdn引入
一般情況上傳照片有兩種方式：
- 1.本地圖片轉換成base64，然后通過普通的post請求發送到服務端。操作簡單，適合小圖，以及如果想兼容低版本的ie沒辦法用此方法
- 2.通過form表單提交。form表單提交圖片會刷新頁面，也可以時form綁定到一個隱藏的iframe上，可以實現無刷新提交數據。
這里只講解一下第二種方式：
html代碼：
js代碼：
import axios from 'axios' // 添加請求頭 update (e) { // 上傳照片var self = this let file = e.target.files[0] /* eslint-disable no-undef */ let param = new FormData() // 創建form對象 param.append('file', file) // 通過append向form對象添加數據 param.append('chunk', '0') // 添加form表單中其他數據 console.log(param.get('file')) // FormData私有類對象，訪問不到，可以通過get判斷值是否傳進去 let config = { headers: {'Content-Type': 'multipart/form-data'} } // 添加請求頭 axios.post('http://172.19.26.60:8081/rest/user/headurl', param, config) .then(response => { if (response.data.code === 0) { self.ImgUrl = response.data.data } console.log(response.data) }) }qs.stringify() 和JSON.stringify()的區別以及在vux中使用post提交表單數據需要qs庫序列化
qs庫的npm地址：https://www.npmjs.com/package/qs
功能雖然都是序列化。假設我要提交的數據如下
var a = {name:'hehe',age:10};qs.stringify序列化結果如下
name=hehe&age=10
而JSON.stringify序列化結果如下：
"{"a":"hehe","age":10}"
vux中使用post提交表單數據：
this.$http.post(this.$sign.config.url.loginUrl,this.$qs.stringify({"phone":this.phoneNumber, "vCode":this.loginCode, "smsCode":this.phoneCode }) ) .then(response=>{ console.log(response.data); if(response.data.httpCode == 200){ }else{ } })在firebug中可以看到傳遞的參數：
phone=15210275239&vCode=8vsd&smsCode=1534
在vue中使用axios：
this.$axios.post(loginUrl, {"email": this.email,"password": this.password }, { transformRequest: (data) => { return this.$qs.stringify(data) }, }).then(res => { if(res.data.resultCode == RESULT_CODE_SUCCESS){ console.log('登錄成功'); this.$router.push({name:"home"}) }else{ console.log('登錄失敗'); } }).catch(err => { console.log('登登錄出現錯誤'); })?vue中實現全局的setCookie，getCookie以及delCookie方法筆記
import Vue from 'vue' import Vuex from 'vuex' import VueRouter from 'vue-router' import App from '../component/App.vue' import Login from '../component/Login.vue' import UserInfo from '../component/UserInfo.vue' //狀態管理 Vue.use(Vuex)//路由 Vue.use(VueRouter)//路由配置 //如果需要加菜單，就在這里添加路由，并在UserMenu.vue添加入口router-link const router = new VueRouter({routes: [{path: '/login',component: Login}, {path: '/user_info',component: UserInfo}] })//Vuex配置 const store = new Vuex.Store({state: {domain:'http://test.example.com', //保存后臺請求的地址，修改時方便（比方說從測試服改成正式服域名）userInfo: { //保存用戶信息nick: null,ulevel: null,uid: null,portrait: null}},mutations: {//更新用戶信息updateUserInfo(state, newUserInfo) {state.userInfo = newUserInfo;}} })//設置cookie,增加到vue實例方便全局調用 Vue.prototype.setCookie = (c_name, value, expiredays) => {var exdate = new Date(); exdate.setDate(exdate.getDate() + expiredays); document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString()); }//獲取cookie Vue.prototype.getCookie = (name) => {var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");if (arr = document.cookie.match(reg))return (arr[2]);elsereturn null; }//刪除cookie Vue.prototype.delCookie =(name) => {var exp = new Date();exp.setTime(exp.getTime() - 1);var cval = this.getCookie(name);if (cval != null)document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();}//vue實例 var app = new Vue({data: {},el: '#app',render: h => h(App),router,store,watch:{"$route" : 'checkLogin'},created() {this.checkLogin();},methods:{checkLogin(){//檢查是否存在sessionif(!this.getCookie('session')){this.$router.push('/login');}else{this.$router.push('/user_info');}}} })webpack中alias配置中的“@”是什么意思？
如題所示，build文件夾下的webpack.base.conf.js
resolve: {extensions: ['.js', '.vue', '.json'],alias: {'vue$': 'vue/dist/vue.esm.js','@': resolve('src')}}其中的@的意思是：
只是一個別名而已。這里設置別名是為了讓后續引用的地方減少路徑的復雜度。
webpack proxyTable 代理跨域
webpack 開發環境可以使用proxyTable 來代理跨域，生產環境的話可以根據各自的服務器進行配置代理跨域就行了。在我們的項目config/index.js 文件下可以看到有一個proxyTable的屬性，我們對其簡單的改寫
proxyTable: {'/api': {target: 'http://api.douban.com/v2',changeOrigin: true,pathRewrite: {'^/api': '' } } }這樣當我們訪問localhost:8080/api/movie的時候 其實我們訪問的是http://api.douban.com/v2/movie這樣便達到了一種跨域請求的方案。
當然我們也可以根據具體的接口的后綴來匹配代理，如后綴為.shtml，代碼如下：
proxyTable: {'**/*.shtml': {target: 'http://192.168.198.111:8080/abc',changeOrigin: true} }可參考地址：
webpack 前后端分離開發接口調試解決方案，proxyTable解決方案
http-proxy-middleware
如何在 vue 項目里正確地引用 jquery 和 jquery-ui的插件
使用vue-cli構建的vue項目，webpack的配置文件是分散在很多地方的，而我們需要修改的是build/webpack.base.conf.js，修改兩處的代碼
// 在開頭引入webpack，后面的plugins那里需要 var webpack = require('webpack') // resolve module.exports = { // 其他代碼... resolve: { extensions: ['', '.js', '.vue'], fallback: [path.join(__dirname, '../node_modules')], alias: { 'src': path.resolve(__dirname, '../src'), 'assets': path.resolve(__dirname, '../src/assets'), 'components': path.resolve(__dirname, '../src/components'), // webpack 使用 jQuery，如果是自行下載的 // 'jquery': path.resolve(__dirname, '../src/assets/libs/jquery/jquery.min'), // 如果使用NPM安裝的jQuery 'jquery': 'jquery' } }, // 增加一個plugins plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" }) ], // 其他代碼... }這樣就可以正確的使用jQuery了，比如我要引入Bootstrap，我們在vue的入口js文件src/main.js開頭加入
// 使用Bootstrap import './assets/libs/bootstrap/css/bootstrap.min.css' import './assets/libs/bootstrap/js/bootstrap.min'這樣Bootstrap就正確的被引用并構建。
在比如使用toastr組件，只需要在需要的地方import進來，或者全局引入css在需要的地方引用js，然后直接使用
參考:
-
Managing Jquery plugin dependency in webpack
-
如何在vue項目里正確地引用jquery和jquery-ui的插件
vue-cli webpack全局引入jquery
1.首先在package.json里加入，
dependencies:{"jquery" : "^2.2.3" }然后 npm install
2.在webpack.base.conf.js里加入
var webpack = require("webpack")3.在module.exports的最后加入
plugins: [new webpack.optimize.CommonsChunkPlugin('common.js'),new webpack.ProvidePlugin({jQuery: "jquery", $: "jquery" }) ]4.然后一定要重新 run dev
5.在main.js 引入就ok了
import $ from 'jquery'參考: vue-cli怎么引入jquery
在.vue文件中引入第三方非NPM模塊
var Showbo = require("exports?Showbo!./path/to/showbo.js");參考: exports-loader
vue-cli引入外部文件
在 webpack.base.conf.js 中添加externals
externals 中 swiper 是鍵，對應的值一定的是插件 swiper.js 所定義的變量 Swiper :
之后再在根目錄下的index.html文件里引入文件：<script src="static/lib/swiper.js"></script>
這樣子就可以在需要用到swiper.js的文件里加入這行代碼：import Swiper from 'swiper'，這樣就能正常使用了。
參考: https://segmentfault.com/q/1010000005169531?_ea=806312
?vue和mintui-Loadmore結合實現下拉刷新，上拉加載 （待優化）
mintui是餓了么團隊針對vue開發的移動端組件庫，方便實現移動端的一些功能，這里只用了Loadmore功能實現移動端的上拉分頁刷新，下拉加載數據.
mintui官網：http://mint-ui.github.io/#!/zh-cn
PS：有個坑一定要注意就是注釋里說的iPhone里loadmore和-webkit-overflow-scrolling屬性沖突無法上拉問題
可參考另外一個插件，沒有使用過，《簡單靈活且強大的Vue下拉刷新組件：vue-pull-to》
vue非父子組件通信
如果2個組件不是父子組件那么如何通信呢？這時可以通過eventHub來實現通信.
所謂eventHub就是創建一個事件中心，相當于中轉站，可以用它來傳遞事件和接收事件.
組件1觸發：
<div @click="eve"></div> methods: {eve() {Hub.$emit('change','hehe'); //Hub觸發事件 } }組件2接收:
<div></div> created() {Hub.$on('change', () => { //Hub接收事件this.msg = 'hehe';}); }?可參考：vue非父子組件怎么進行通信
方式二：
把中轉站數據存放到根實例下面，如下：
// 根組件（this.$root) new Vue({el: '#app',router,render: h => h(App),data: {// 空的實例放到根組件下，所有的子組件都能調用Bus: new Vue()} })組件1觸發：
<div @click="eve"></div> methods: {eve() {this.$root.Bus.$emit('change','hehe'); } }組件2接收：
<div></div> created() {this.$root.Bus.$on('change', () => { //接收事件this.msg = 'hehe';}); }官方推薦的eventbus 解決方案的缺陷在于， 在數據傳遞過程中，兩個組件必須都已經被渲染過。
vue項目中在使用vue-router切換頁面的時候滾動條怎樣自動滾動到頂部？
有時候我們需要頁面滾動條滾動到某一固定的位置，一般使用Window scrollTo() 方法。
語法就是：scrollTo(xpos,ypos)
xpos：必需。要在窗口文檔顯示區左上角顯示的文檔的 x 坐標。
ypos：必需。要在窗口文檔顯示區左上角顯示的文檔的 y 坐標。
例如滾動內容的坐標位置100,500：
window.scrollTo(100,500);好了，這個scrollTop這兒只是簡單介紹一下，下面我們介紹下veu-router中的滾動行為。
使用前端路由，當切換到新路由時，想要頁面滾到頂部，或者是保持原先的滾動位置，就像重新加載頁面那樣。 vue-router 能做到，而且更好，它讓你可以自定義路由切換時頁面如何滾動。
注意: 這個功能只在 HTML5 history 模式下可用。
當創建一個 Router 實例，你可以提供一個 scrollBehavior 方法：
const router = new VueRouter({routes: [...],scrollBehavior (to, from, savedPosition) {// return 期望滾動到哪個的位置 } })scrollBehavior 方法接收 to 和 from 路由對象。第三個參數 savedPosition 當且僅當 popstate 導航 (通過瀏覽器的 前進/后退 按鈕觸發) 時才可用。
這個方法返回滾動位置的對象信息，長這樣：
- { x: number, y: number }
- { selector: string, offset? : { x: number, y: number }} (offset 只在 2.6.0+ 支持)
如果返回一個 falsy (譯者注：falsy 不是 false，參考這里)的值，或者是一個空對象，那么不會發生滾動。
舉例：
scrollBehavior (to, from, savedPosition) {return { x: 0, y: 0 } }對于所有路由導航，簡單地讓頁面滾動到頂部。
返回 savedPosition，在按下 后退/前進 按鈕時，就會像瀏覽器的原生表現那樣：
scrollBehavior (to, from, savedPosition) {if (savedPosition) {return savedPosition} else { return { x: 0, y: 0 } } }如果你要模擬『滾動到錨點』的行為：
scrollBehavior (to, from, savedPosition) {if (to.hash) {return {selector: to.hash}} }我們還可以利用路由元信息更細顆粒度地控制滾動。
routes: [{ path: '/', component: Home, meta: { scrollToTop: true }},{ path: '/foo', component: Foo },{ path: '/bar', component: Bar, meta: { scrollToTop: true }} ]完整的例子：
import Vue from 'vue' import VueRouter from 'vue-router'Vue.use(VueRouter)const Home = { template: '<div>home</div>' } const Foo = { template: '<div>foo</div>' } const Bar = {template: `<div> bar <div style="height:500px"></div> <p id="anchor">Anchor</p> </div> ` } // scrollBehavior: // - only available in html5 history mode // - defaults to no scroll behavior // - return false to prevent scroll const scrollBehavior = (to, from, savedPosition) => { if (savedPosition) { // savedPosition is only available for popstate navigations. return savedPosition } else { const position = {} // new navigation. // scroll to anchor by returning the selector if (to.hash) { position.selector = to.hash } // check if any matched route config has meta that requires scrolling to top if (to.matched.some(m => m.meta.scrollToTop)) { // cords will be used if no selector is provided, // or if the selector didn't match any element. position.x = 0 position.y = 0 } // if the returned position is falsy or an empty object, // will retain current scroll position. return position } } const router = new VueRouter({ mode: 'history', base: __dirname, scrollBehavior, routes: [ { path: '/', component: Home, meta: { scrollToTop: true }}, { path: '/foo', component: Foo }, { path: '/bar', component: Bar, meta: { scrollToTop: true }} ] }) new Vue({ router, template: ` <div id="app"> <h1>Scroll Behavior</h1> <ul> <li><router-link to="/">/</router-link></li> <li><router-link to="/foo">/foo</router-link></li> <li><router-link to="/bar">/bar</router-link></li> <li><router-link to="/bar#anchor">/bar#anchor</router-link></li> </ul> <router-view class="view"></router-view> </div> ` }).$mount('#app')在網上查了一下，網友說還可以試試在main.js入口文件配合vue-router寫這個
router.afterEach((to,from,next) => {window.scrollTo(0,0); });IE9報vuex requires a Promise polyfill in this browser問題解決
因為使用了 ES6 中用來傳遞異步消息的的Promise，而IE低版本的瀏覽器不支持。
如圖所示：
解決方法
第一步： 安裝 babel-polyfill 。 babel-polyfill可以模擬ES6使用的環境，可以使用ES6的所有新方法
npm install --save-dev babel-polyfill
第二步： 在 Webpack/Browserify/Node中使用
在webpack.config.js文件中
把
module.exports = {entry: {app: './src/main.js'} }替換為：
module.exports = {entry: {app: ["babel-polyfill", "./src/main.js"]} };注意：在配置文件中不要使用const，let。在IE9低版本瀏覽器不支持該語法（打包的時候有可能引入了配置文件的內容）。
當然還有其它兩種引入方式：
- require("babel-polyfill");
- import "babel-polyfill";
在main.js中監聽微信返回按鈕的操作，讓其返回不了
if(from.name == 'staffInfo' && to.name == 'Login'){next({path:'/staffInfo',query:{redirect:from.fullPath}}); }else if(from.name == 'acountFill' && to.name == 'Login'){next({path:'/acount/acountFill',query:{redirect:from.fullPath}}); }啟動Vue項目時提示: [BABEL] ... max of "500KB".
在項目的根目錄下找到 .babelrc 文件，增加 "compact": false ，如：
{"compact": false,"presets": ["env", "react", "stage-0"],"plugins": ["transform-runtime"] }如果不存在則手動創建該文件，并填寫內容如：
{"compact": false }pdf.js默認不顯示電子簽章(數字簽名）問題解決
1. pdfjs 舊版本
pdf.worker.js 找到
注解上面代碼.
2. pdfjs 新 版本v1.10.88
pdf.worker.js 找到
?后臺返回pdf的base64編碼到前端預覽，如果pdf中有中文，顯示有問題解決辦法
有可能是有pdf不支持的字體格式，引入pdf.js的字體試試
const CMAP_URL = 'https://unpkg.com/pdfjs-dist@2.0.489/cmaps/'; pdfjsLib.getDocument({data: pdfData,cMapUrl: CMAP_URL,cMapPacked: true,})?解決Vue引入百度地圖JSSDK：BMap is undefined 問題
export default {init: function (){//console.log("初始化百度地圖腳本...");const AK = "AK密鑰";const BMap_URL = "https://api.map.baidu.com/api?v=2.0&ak="+ AK +"&s=1&callback=onBMapCallback";return new Promise((resolve, reject) => {// 如果已加載直接返回if(typeof BMap !== "undefined") {resolve(BMap);return true;}// 百度地圖異步加載回調處理window.onBMapCallback = function () {console.log("百度地圖腳本初始化成功...");resolve(BMap);};// 插入script腳本let scriptNode = document.createElement("script");scriptNode.setAttribute("type", "text/javascript");scriptNode.setAttribute("src", BMap_URL);document.body.appendChild(scriptNode);});} }說明：
- 直接使用官網提供的引用地址：http://api.map.baidu.com/api?v=2.0&ak=您的密鑰
- 啟用 callback 參數，異步加載必須使用此參數才可以生效
- 啟用 https 配置，通過 s=1 參數實現
- API版本為2.0，經測試使用，發現3.0版本在HTTPS環境下是有問題的，腳本內部某些請求固定使用HTTP，無法正常使用。
參考地址：https://segmentfault.com/a/1190000012815739
轉載于:https://www.cnblogs.com/moqiutao/p/8017340.html
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的[总结]vue开发常见知识点及问题资料整理（持续更新）的全部內容，希望文章能夠幫你解決所遇到的問題。
