手机折腾日记(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。所以,折腾还得继续!

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 转载 :OpenDiggawesome-github-vue 是由OpenDigg整理并维护的Vue相关开源项目库...
    果汁密码阅读 23,228评论 8 124
  • UI组件element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于...
    董董董董董董董董董大笨蛋阅读 8,607评论 6 123
  • 推荐理由 正如弗洛伊德自己所说,这本书包含了我有幸所能作出的全部发现中最有价值的部分。如果一个人偶有这样的洞察力,...
    韩沐柠阅读 342评论 0 1
  • 世界就像一个巨大的娃娃机,隔着玻璃我只想得到你。 得不到的永远在骚动,被偏爱的都有恃无恐。烂熟透红。。 我多么想和...
    桐语柠檬阅读 271评论 0 0
  • 我的爷爷叫杨德库,东北人。 从我记事开始,每当家里人吃饭的时候,爷爷从来不上饭桌,总是等我们全部吃完了再一个人吃。...
    琉璃舞鞋阅读 309评论 0 0