關於vue使用的一些小經驗

這一年來說，vue的勢頭很猛，用戶量“噌”“噌”“噌”的漲

為了不掉隊不落伍、在后台大哥的脅迫下，不得不選擇用了它

剛開始很難接受vue的寫法，在編輯器里很容易報錯，基本上每行都會出現紅色的波浪線

這讓剛用vue的我很炸毛

然鵝，皇天不負有心人，成功的把vue拿下了

http://m.mingbiaoi.com

不要失望，雖然我的項目就是簡單的幾頁，但是對於剛接觸vue的初學者來說，已經很不容易了

先說說Vue常用命令語句

 

npm install --global vue-cli   全局安裝 vue-cli

 

vue init webpack my-project  創建一個基於 webpack 模板的新項目

 

cd my-project  找到創建的項目

 

npm install  安裝依賴，走你

 

npm run dev  將項目跑起來

 

以上步驟，在你執行到vue init webpack my-project 這一步的時候，你會遇到一些選項

 

除了剛開始我傻不拉幾選了yes導致項目基本進行不下去后，我現在基本都會選no

當然，要視情況而定

Project name demo  你的項目名稱是啥就是啥  沒啥好猶豫的  趕緊下手走下一步

Project description A Vue.js project  告訴你這個項目是個vuej.js的項目  如果不傻，就回車下一步，不然我干嘛用vue來了

Author JoneTong、Vue build standalone 這些和項目沒有太大影響

最主要的就是下面幾步

Install vue-router?這是問你要不要用路由，如果你的項目不是單單的一頁，有頁面間的跳轉跳轉，就用

Use ESLint to lint your code? 這是說你要不要ESlint的語法去監控你的代碼 ， 建議不用，因為ESlint的語法太嚴格，我受不了這么多報錯

Set up unit tests、Setup e2e tests with Nightwatch?都是問你要不要走測試的路，這個我覺得無所謂，，因為我每次都是把項目按照要發布的去做的，所以我選no

Should we run `npm install` for you after the project has been created? (recommended) 這句呢，是說項目被創建后，用npm install 來安裝依賴，還是選其他的。有一個前輩告訴我yarn比較快，但是我還是決定跟着文檔走，所以我選第一個  npm

然后，你的項目就創建了，找到你開始選擇的創建vue的地址，我選的e盤，到那你就會看到你創建的vue項目就在那

剩下的幾步就是找到項目去自己撒歡玩去吧

如果你是做移動端的項目呢，建議你用minit-ui，如果是pc端的，就用element.ui吧。不要問我響應式怎么辦，因為我比你更想知道

 

接下來說說vue可能用到的插件

vue的插件很多，在https://www.npmjs.com/search?q=vue里面都能找到

 

1. vue的alert

 

npm install @vuejs-pt/vue-alert    

 

import VueAlert from '@vuejs-pt/vue-alert'

 

用法：this.$alert.clearDefault()

 

2. vue移動端框架（minit-ui）

 

npm install mint-ui -S    

 

import Mint from 'mint-ui'

 

3. 圖片的懶加載

 

npm install vue-lazyload

 

import VueLazyload from 'vue-lazyload'

 

Vue.use(VueLazyload, {

  preLoad: 1.3,

  error: 'dist/error.png',

  loading: 'dist/loading.gif',

  attempt: 1

}）

這是我在我的項目里用到的，其他你有需要可以自己去這里https://www.npmjs.com/search?q=vue找找

 

不知道你們會不會在頁面里用到a標簽的href為mobile的屬性，反正我是用到了

在vue里要這樣處理才行

<a :href="'tel:' + mobile">{{ mobile }}</a>

其實就是變量拼接，不懂之前確實很讓人頭疼

 

最后就是說vue的axios了

首先說說axios的引入問題了，

剛開始在網上搜了一堆，但是沒有一個能解決我的問題的，誰叫我不是屬於你的小仙女呢

  import axios from 'axios'

 

  var $axios = axios.create({  });

    

  Vue.prototype.$axios = $axios;（// 掛載到vue的原型,也為了在其他頁面也可以fined到axios）

 

就是這樣，axios成功的被引入了

 

如果你想看例子，我可以給你截兩張圖，實在不想打字，太累了

 

 

 

 

 一個是get的、一個是post的

你可能會遇到跨域的問題，找你們后台大哥吧，我的就是后台在server端處理的，如果類型是post，你加一行我畫紅框框標出來的那一行就行了

到這里，即使沒有幫到你，也請不要怪我

有問題你可以來找我，雖然可能我的技術還不如你

哈哈哈

 

扣扣：1375752423