新手福音!用vue-cli3从0到1做一个完整功能手机站(一)

吕旷
• 阅读 4837

开篇

从今天起,小肆将和大家从头开始做一个完整的实战项目。其中遇到的每个知识点都是我们工作中常见的,这些知识点大多在网上都能找到但却没有哪个教程能都讲得到,那就由小肆来做吧。

关注”技术放肆聊“,跟小肆一起行动起来!

在这个项目中,小肆力争做到以下几点:

  • 应用目前最新的技术,并随时间更新。
  • 尽量多的增加知识点。
  • 尽量详细的讲解每个知识点,以便小伙伴们可以灵活应用到别处。
  • 尽量做最规范的代码提交记录,以便随时可以在github上查询变更。
  • 完全使用实际工作中模式。
  • 本项目后端接口采用成熟在线APP的测试服务器接口。
  • 对哪个知识点没有清楚理解,随时可以来撩我。

涉及功能

  • 初始化:脚手架构建、git仓库配置、git提交规范配置、手机自适应配置。。。
  • 用户:登录、注册、找回密码、第三方登录、个人中心。。。
  • 新闻:滚动导航、幻灯片、文章列表、文章详情、图片懒加载。。。
  • 课程:音频播放、视频播放、自定义播放器、播放列表。。。
  • 社区:发帖、评论、点赞、收藏。。。
  • 支付:虚拟货币、微信支付、支付宝支付。。
  • 直播:视频流、礼物、弹幕。。。

功能包括以上功能又不仅限于以上功能,这个系列每篇文章都会把涉及到的功能点详细介绍清楚,并会同步到本篇。

小肆的代码并不一定是最优的解决方案,如果你有更好的方法,非常期望能与小肆联系,我会在文章中发出并标明出处

多说无益,行动起来吧!

项目初始化

本项目使用最新版本的vue-cli 3.3搭建。

安装vue-cli3

sudo npm -g install @vue/cli

小肆用的mac,所以需要添加sudo获取root权限来全局安装,win用户可以不加sudo。

安装成功后输入vue -V你会看到你安装的版本号。

创建项目

vue creat mweb
输入命令后选择手动选择功能(Manually select features)或会看到如下界面:
新手福音!用vue-cli3从0到1做一个完整功能手机站(一)

在这里小肆全部选择了,选择TS是因为TS是JS的超集,所以初始化的时候小肆选了TS,不过前期还是会用JS讲解,以便未学习TS的伙伴们学习,后期会全部使用TS重构。

这里的每个知识点之后项目实际使用我都会慢慢讲解。
新手福音!用vue-cli3从0到1做一个完整功能手机站(一)
上图是安装过程我对每一项的选择。

最后保存了配置项目就开始安装依赖了。初始化成功后会显示如下界面。

新手福音!用vue-cli3从0到1做一个完整功能手机站(一)

项目预览

命令行输入cd mweb进入项目目录。

之后输入启动本地服务器npm run serve

成功后能看到如下界面。
新手福音!用vue-cli3从0到1做一个完整功能手机站(一)

另外vue-cli3提供了图形化配置界面。
命令行输入vue ui即可启动。
新手福音!用vue-cli3从0到1做一个完整功能手机站(一)

github配置

项目初始化后已经有git的初始化配置了,这时候我们只需要把项目和github的远程仓库做连接就可以了。

我们首先在github上新建项目,得到项目地址后命令行输入以下命令:
git remote add origin git@github.com:Feleti/mweb.git
因为我配置了ssh key所以地址以git开头,如果未配置的使用https开到的地址。

git的使用之后我会单独出一篇文章讲解,这里就不详述了。

上传代码到远程分支:
git push --set-upstream origin master
首次上传新分支输入以上命令,不是的话只要输入git push就可以了。

上传成功后可以在github上看到了。
新手福音!用vue-cli3从0到1做一个完整功能手机站(一)

小结

今天的内容有点少,本来计划把项目前期配置的内容都放在这篇,可无奈啊,小肆今天回家晚啦,又有点别的事耽误了,现在快12点了,小肆再不发文今天就发不了了,那就之后再讲吧,记得关注小肆公众号”技术放肆聊“,跟进本课程,会让你学到你想学的。

本系列文章目录:

  1. 用vue-cli3从0到1做一个完整功能手机站(一)
  2. 从0到1开发实战手机站(二):Git提交规范配置
  3. 从0到1使用VUE-CLI3开发实战(三): ES6知识储备
点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Jacquelyn38 Jacquelyn38
4年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Stella981 Stella981
3年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
Java日期时间API系列36
  十二时辰,古代劳动人民把一昼夜划分成十二个时段,每一个时段叫一个时辰。二十四小时和十二时辰对照表:时辰时间24时制子时深夜11:00凌晨01:0023:0001:00丑时上午01:00上午03:0001:0003:00寅时上午03:00上午0
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
1年前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
美凌格栋栋酱 美凌格栋栋酱
4个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(