初入Vue.js （Vue2）
logo.png
項(xiàng)目后臺(tái)用PHP接口形式寫秫舌，前臺(tái)學(xué)習(xí)著用Vue調(diào)自己接口梦重，給公司寫一個(gè)運(yùn)營(yíng)支撐平臺(tái)赏壹。是個(gè)機(jī)會(huì)就學(xué)一學(xué)前端炊甲。
由于女票是前端泥彤，所以近水樓臺(tái)先得月。
但是這是個(gè)錯(cuò)誤的模仿卿啡，咳咳吟吝，不能因?yàn)閷W(xué)一門語(yǔ)言就要換什么語(yǔ)言的女朋友。
// 作者我想學(xué)完Vue.js再學(xué)Python怎么辦老鐵們颈娜？...然后是Go語(yǔ)言 ...C語(yǔ)言等等等
老樣子剑逃，為了自己以后的老年癡呆著想，還是記錄寫一下配置安裝環(huán)境這一塊
# 使用淘寶 NPM 鏡像
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
# cnpm 命令來(lái)安裝模塊
$ cnpm install [name]
# 全局安裝 vue-cli
$ cnpm install --global vue-cli
# 創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目
$ vue init webpack my-project
# 這里需要進(jìn)行一些配置官辽，默認(rèn)回車即可
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
運(yùn)行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的模塊化，其實(shí)感覺(jué)就像以前后臺(tái)的
Smarty模板引擎一樣野崇，只不過(guò)現(xiàn)在結(jié)合了js完成模板渲染称开，這只是我個(gè)人的見(jiàn)解。下面就試試水，真正的使用一下鳖轰。
關(guān)閉ESLint
其實(shí)在安裝的選項(xiàng)中清酥，就不需要裝ESLint的，這里裝了蕴侣，但是強(qiáng)迫癥又不想看到它焰轻。就finish掉它！
warning-eslint.png
在vue項(xiàng)目中關(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的時(shí)候彈框比較好用的Layer現(xiàn)在已經(jīng)沒(méi)有那么友好的支持Vue了辱志，所以我這里被迫只能引入了組件了，element cube iView這些看了一圈狞膘，還是感覺(jué)iView的顏值高一些揩懒，推薦大家使用。
iView.png
安裝
npm install iview --save
引入和規(guī)范 iView - install 詳情看眼文檔
熟悉ES6關(guān)鍵性的語(yǔ)法
箭頭函數(shù)
==========以前Jquery==========
var _this = this;
$('.btn').click(function(event){
_this.sendData();
})
==========現(xiàn)在的ES6==========
$('.btn').click((event) =>{
this.sendData();
})
每日三省吾身挽封，邊開(kāi)發(fā)我的后臺(tái)邊總結(jié)... 開(kāi)發(fā)中...>
