vue-cli+webpack+elementui 学习笔记（一）

从17年元旦离开上海项目，到现在已经4个月了。这期间主要心思都在家里面，从老婆怀孕到上个月生小孩。技术上基本没啥进展，除了接手一个ionic+angular 的前端项目，啥新东西也没学，Vue 2.X都出了，自己还没啥也没用到过，实属不该。
这阵子在考虑以后的路，可能会换工作，还是得学习点新东西才行了。
之前看过一篇阮一峰老师的全栈工作师培训教程(http://www.ruanyifeng.com/blog/2016/11/javascript.html) ，就想着用Javascript 自己来实现一个全栈的项目，慢慢开始动手，这里做一个记录，方便自己以后查看。
技术的话前端肯定是Vue(https://github.com/vuejs/vue) 了，然后配上饿了么出品的Ui框架 Element-ui(http://element.eleme.io/#/zh-CN) ，还有移动版本 (http://mint-ui.github.io/#!/zh-cn)， 后端的话用Node，现在比较常用基于Node技术的Web框架应该是Express，之前打包工具用得也不多，趁此机会学习一个webpcak。
经过几天的摸索，今天终于动手开始了，一天下来也算有点进展。
准备工作
1，安装Node(npm)
确保系统已经安装好NodeJs环境(https://nodejs.org/en/) ，最好安装最新版本的node。
2，切换npm源
如果你在天朝，最好换一个npm的淘宝镜像。
执行命令 npm config set registry=http://registry.npm.taobao.org
执行完之后 再用 npm info underscore (或者找一个你熟悉的开源项目)
会打印出关于underscoreJs的基本信息，后面会有一个下载地址，如果变成了上面设置的淘宝镜像，说明镜像切换成功了。如果不是，则需要重新执行上面的命令了。
进入正题
1，Vue-cli安装
执行命令 npm install -g vue-cli
这里如果顺利 的话，会很快，如果花了很长时间没动静，请检查一下网络连接，然后再执行上面的命令。

1.png

如果看到最后输出的这些，说明vue-cli安装成功了，这里会将webpcak以及一些打包用的插件，具体可以自己去查看。
2，初始化项目
新建一个项目目录
mkdir nodeDemo
cd nodeDemo
然后执行 vue init webpack vueDemo

image.png

这个过程会让输入一些项目的基本信息，主要注意以下几个点：
Project name 最好全小写;
Install vue-router 安装yes
Use ESLint to lint your code? 不安装no 这里我一开始是yes，结果代码写起来特别费劲，空格号也检验，不能多一个，不能少一个，这对于我一个初级菜鸟来说，有点要求过高了，所说这是airbinb的代码要求。 后续熟练了可以加上。
后面两个是测试方面的东西，个人觉得有必要，要觉得麻烦后续加上也行。
这个时候，会有一个vueDemo的项目出现，

image.png

包含一些基本的文件及文件夹。
接下来执行 npm install

image.png

会将项目所依赖的文件下载到项目里面。

image.png

执行完之后，会打印出上述信息。
然后执行 npm run dev

image.png

执行完成之后，项目会启动，如果是在windows下，会自动启动默认浏览器。
linux下在浏览器里面输入 http://xx.xx.xx.xx:8080

image.png

如果浏览器下面出现这个页面，就说明vue-cli+webpack的环境已经搭建好了。

今天就写了这么多了，明天继续。