菜单开关

周梦康 发表于 2018-04-29 2831 次浏览 标签 : vue

免费领取阿里云优惠券 我的直播 - 《PHP 进阶之路》

之前的 bootstrap + jquery 的后台也很好,但是现在 vue + element-ui 来做也是更爽!
作为了个前端落伍者,今天五一也算是略有收获,知道了大概的玩法。

安装 node

mac 上还是直接brew

brew install node

安装完毕之后

bogon:~ zhoumengkang$ node -v
v10.0.0
bogon:~ zhoumengkang$ npm -v
5.6.0

安装 vue

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖,走你
$ cd my-project
$ npm run dev

使用 element-ui

然后在该目录里安装 element-ui

npm i element-ui -S

然后就可以使用 element-ui 的各种组件了。

参考教程

对于一个 vue 小白来说,官网的的教程和 eleme 的教程都有“门槛”,可以先看下:http://www.runoob.com/vue2/vue-tutorial.html 我觉得更适合我这种菜鸟。

发现一个不错的开源的使用 element-ui 的后台 https://github.com/PanJiaChen/vue-element-admin 后面我做的话,就都用这个框架啦。

vue 知识体系

使用了两天 vue,感觉到的它的强大了,再也不用为 dom 选择器发愁了,因为已经没有 dom 了。

https://www.imooc.com/video/16976
这个视频教程讲得非常好了

其他笔记

import 和 export

https://www.jianshu.com/p/edaf43e9384f

dev 环境下使用 webpack 的 devserver-proxy 来请求 api

https://doc.webpack-china.org/configuration/dev-server/#devserver-proxy

类似于

proxyTable: {
  '/api': {
    target: "http://localhost:9013",
    changeOrigin: true,
    pathRewrite: {
      "^/api": ""
    }
  }
},

发送 ajax 请求

安装axios

$ npm install axios -S
+ axios@0.18.0
added 1 package in 11.534s
$ npm install vue-axios -S
+ vue-axios@2.1.1
added 1 package in 11.926s

嗨,老铁,欢迎来到我的博客!

如果觉得我的内容还不错的话,可以关注下我在 segmentfault.com 上的直播。我主要从事 PHP 和 Java 方面的开发,《深入 PHP 内核》作者之一。

[视频直播] PHP 进阶之路 - 亿级 pv 网站架构的技术细节与套路 直播中我将毫无保留的分享我这六年的全部工作经验和踩坑的故事,以及会穿插着一些面试中的 考点难点加分点

评论列表