我的Vue.js之旅

初入Vue.js （Vue2）

logo.png

项目后台用PHP接口形式写，前台学习着用Vue调自己接口，给公司写一个运营支撑平台。是个机会就学一学前端。

由于女票是前端，所以近水楼台先得月。
但是这是个错误的模仿，咳咳，不能因为学一门语言就要换什么语言的女朋友。
// 作者我想学完Vue.js再学Python怎么办老铁们？...然后是Go语言 ...C语言等等等

老样子，为了自己以后的老年痴呆着想，还是记录写一下配置安装环境这一块

# 使用淘宝 NPM 镜像
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
# cnpm 命令来安装模块
$ cnpm install [name]
# 全局安装 vue-cli
$ cnpm install --global vue-cli
# 创建一个基于 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 
? 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

配置好环境了，下面我要熟悉一下Vue的模块化，其实感觉就像以前后台的Smarty模板引擎一样，只不过现在结合了js完成模板渲染，这只是我个人的见解。下面就试试水，真正的使用一下。

关闭ESLint

其实在安装的选项中，就不需要装ESLint的，这里装了，但是强迫症又不想看到它。就finish掉它！

warning-eslint.png

在vue项目中关闭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现在已经没有那么友好的支持Vue了，所以我这里被迫只能引入了组件了，element cube iView这些看了一圈，还是感觉iView的颜值高一些，推荐大家使用。

iView.png

安装

npm install iview --save

引入和规范 iView - install 详情看眼文档

熟悉ES6关键性的语法

箭头函数

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

每日三省吾身，边开发我的后台边总结... 开发中...>