从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
这里如果顺利 的话,会很快,如果花了很长时间没动静,请检查一下网络连接,然后再执行上面的命令。
如果看到最后输出的这些,说明vue-cli安装成功了,这里会将webpcak以及一些打包用的插件,具体可以自己去查看。
2,初始化项目
新建一个项目目录
mkdir nodeDemo
cd nodeDemo
然后执行 vue init webpack vueDemo
这个过程会让输入一些项目的基本信息,主要注意以下几个点:
Project name 最好全小写;
Install vue-router 安装yes
Use ESLint to lint your code? 不安装no 这里我一开始是yes,结果代码写起来特别费劲,空格号也检验,不能多一个,不能少一个,这对于我一个初级菜鸟来说,有点要求过高了,所说这是airbinb的代码要求。 后续熟练了可以加上。
后面两个是测试方面的东西,个人觉得有必要,要觉得麻烦后续加上也行。
这个时候,会有一个vueDemo的项目出现,
包含一些基本的文件及文件夹。
接下来执行 npm install
会将项目所依赖的文件下载到项目里面。
执行完之后,会打印出上述信息。
然后执行 npm run dev
执行完成之后,项目会启动,如果是在windows下,会自动启动默认浏览器。
linux下在浏览器里面输入http://xx.xx.xx.xx:8080
如果浏览器下面出现这个页面,就说明vue-cli+webpack的环境已经搭建好了。
今天就写了这么多了,明天继续。