我的Vue.js之旅我的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? Yesvue-cli · Generated "my-project".To get started:cd my-project npm install npm run devDocumentation can be found at https://vuejs-templates.github.io/webpack

运行Vue.js

$ cd my-project $ cnpm install $ cnpm run dev DONECompiled 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(); })