手机折腾日记(1)---用手机搞一个前端小项目

请相信我下面这个小项目，完全是在手机上开发的，甚至这一篇也是在手机上写的。

机缘：最近在学习nodejs,那天在阅读nodejs官方文档的时候,我看到包管理器安装，这一项里面居然有安卓操作系统。当时觉得无比的惊讶与窃喜ԅ(¯㉨¯ԅ),甚至认识了大名鼎鼎的termux  ٩(㉨ )۶ 。虽然实际上这些工具都很小众的，但实际上后来我觉得我的手机已经不是手机了。

termux

termux，就是上面这个红圈里标识出来的app。现在我们打开这个app会看到下面的界面:

termux界面

如果使用过linux, 相信对这个界面应该不会感到陌生吧。但要知道termux和普通的安卓终端仿真程序可不同，它包括一个简化版的linux系统,还自带有包管理器，包括pkg和apt。在这篇文章中，我使用pkg管理器。

开始之前: 首先简要描述一下我们的项目，我们计划使用nodejs和vuejs开发一个简单的SPA，这其实已经属于前端开发中比较中高级的部分了（*/㉨＼*）捂脸。先放下最终的效果图：

最终效果图

开始动手：

1. 第一步安装nodejs，在termux中输入如下指令

安装nodejs

接下来就只需等待安装完成了。

2. 安装vue

因为我们是要通过nodejs来开发我们的前端项目，所以我们接下来通过nodejs的包管理器安装vue和一个vuejs官方为方便开发提供的一个工具vue-cli。

npm install vue

npm install vue-cli

安装完这些以后，我们的准备工作快完成一半了。接下来创建我们的项目。

3. 创建项目

你可以通过mkdir指令为自己的文档专门新建一个文件夹，也可以直接在根目录进行操作。查看当前路径的指令是pwd，显示当前路径内容的指令是ls。

在termux中输入

vue init webpack zixu1

接下来系统会自动下载模板，安装相应的依赖，然后会问你一些需要的选项

设置vue项目的相关信息

等待项目初始化完成，以后就可以看到这样的界面：

初始化完成

在初始化完成以后，又提示通过两个指令用品项目。首先cd到项目目录下，然后运行npm run dev，项目开始自动编译运行，完成以后可以看到这样的提示

图片发自App

最后在浏览器中输入localhost:8080，就可以看到我们一个超级简单的vue项目已经跑起来了。

正常运行

但是我们肯定不能只满足于运行官方自带的这样一个小项目，我们要在这基础上进一步开发一个简单的SPA。所以，折腾还得继续！