初入Vue.js （Vue2）

logo.png

項目后臺用PHP接口形式寫，前臺學習著用Vue調(diào)自己接口，給公司寫一個運營支撐平臺。是個機會就學一學前端。

由于女票是前端，所以近水樓臺先得月。
但是這是個錯誤的模仿，咳咳，不能因為學一門語言就要換什么語言的女朋友。
// 作者我想學完Vue.js再學Python怎么辦老鐵們？...然后是Go語言 ...C語言等等等

老樣子，為了自己以后的老年癡呆著想，還是記錄寫一下配置安裝環(huán)境這一塊

# 使用淘寶 NPM 鏡像
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
# cnpm 命令來安裝模塊
$ cnpm install [name]
# 全局安裝 vue-cli
$ cnpm install --global vue-cli
# 創(chuàng)建一個基于 webpack 模板的新項目
$ vue init webpack my-project
# 這里需要進行一些配置，默認回車即可
This will install Vue 2.x version of the template.

For Vue 1.x use: vue init webpack#1.0 my-project

? Project name my-project
? Project description A Vue.js project
? Author runoob <test@runoob.com>
? Vue build standalone
? Use ESLint to lint your code? Yes  // 不需要ESLint的可以不用安裝
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes

   vue-cli · Generated "my-project".

   To get started:
   
     cd my-project
     npm install
     npm run dev
   
   Documentation can be found at https://vuejs-templates.github.io/webpack

運行Vue.js

$ cd my-project
$ cnpm install
$ cnpm run dev
 DONE  Compiled successfully in 4388ms

> Listening at http://localhost:8080

HelloWorld.png

配置好環(huán)境了，下面我要熟悉一下Vue的模塊化，其實感覺就像以前后臺的Smarty模板引擎一樣，只不過現(xiàn)在結(jié)合了js完成模板渲染，這只是我個人的見解。下面就試試水，真正的使用一下。

關(guān)閉ESLint

其實在安裝的選項中，就不需要裝ESLint的，這里裝了，但是強迫癥又不想看到它。就finish掉它！

warning-eslint.png

在vue項目中關(guān)閉ESLint方法：找到build文件夾--->webpack.base.conf.js
將這些代碼注釋掉，如圖：

eslint.png

引入jQuery

• 去 /build/webpack.base.config.js 下配置

// 引入jquery
const webpack = require('webpack')
···

module.exports = {
 ···
 ···
 /**
  * 引入Jquery
  */
 plugins:[
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
 ],
}

• 在 main.js 全局引入 jQuery

import $ from 'jquery'

使用組件 iView

采坑日記：之前寫JavaScript的時候彈框比較好用的Layer現(xiàn)在已經(jīng)沒有那么友好的支持Vue了，所以我這里被迫只能引入了組件了，element cube iView這些看了一圈，還是感覺iView的顏值高一些，推薦大家使用。

iView.png

安裝

npm install iview --save

引入和規(guī)范 iView - install 詳情看眼文檔

熟悉ES6關(guān)鍵性的語法

箭頭函數(shù)

==========以前Jquery==========
var _this = this;
$('.btn').click(function(event){
  _this.sendData();
})
==========現(xiàn)在的ES6==========
$('.btn').click((event) =>{
  this.sendData();
})

每日三省吾身，邊開發(fā)我的后臺邊總結(jié)... 開發(fā)中...>