文章仅供初学入门,只讲学习套路,如何去学习,具体知识点不具体叙述。
h5开发即无线端的web开发
学习h5开发,整体了解一下各种技术与工具:
常用开发框架 | 排名前三框架:react.js 、vue.js、Angular |
常用ui框架 | mui、mint-ui等等 |
node.js | Javascript运行环境,意思就是你开发的h5项目需要的运行环境 |
npm | 通常称为node包管理器。顾名思义,它的主要功能就是管理node包,包括:安装、卸载、更新、查看、搜索、发布等。(外网) |
cnpm | npm安装插件是从国外服务器下载,受网络影响大,可能出现异常,cnpm淘宝干的,就是讲可以从国内下载。 |
常用开发工具 | vs code、HBuilder、webstorm 、sublime、、、、、 |
1.1 h5开发需要用到 html、css、javaScript三门语言。
前端页面:html+css
逻辑处理:javaScript
推荐几门语言学习的博客
HTML学习:
http://www.runoob.com/html/html5-intro.html
https://www.w3cschool.cn/html5/g5nfhflc.html
css学习:
http://www.runoob.com/css/css-tutorial.html
https://www.w3cschool.cn/css/
JavaScript学习:
http://www.runoob.com/js/js-tutorial.html
https://www.w3cschool.cn/javascript/
w3cschool、菜鸟教程这些都是很可以的。
这部分内容学个三五天就差不多了,有个概念,在项目中边学边用。
1.2 开发框架学习
本文基于vue开发,需要学习vue知识
主要学习vue.js 、路由router
Vue.js 教程:https://www.runoob.com/vue2/vue-install.html
Vue API:https://cn.vuejs.org/v2/api/#component
相关知识百度很多学习资料
基础学完之后,还是一脸懵逼。一个h5项目如何开启呢?直接上步骤。
2.1 环境搭建
2.1.1 Node.js 安装(自行百度学习Node.js)
安装配置:https://www.runoob.com/nodejs/nodejs-install-setup.html
npm: Nodejs下的包管理器。安装了Node.js后,在Node的安装目录下可找到。
2.1.2 cnpm安装
自行百度
2.1.3 vs code安装
自行下载安装,安装vs code 最好安装好所需要的大部分插件,方便开发。
3.1:新建项目如:mydemo
Vue.js教程新建项目如下操作:
注意:如果安装教程的走,会建在默认目录下:C:\Users\dell,如果想要建在自己想要的目录,cmd先进入到你的目录,如这里案例:E:\h5\project
cmd操作如下:
新建项目,按着步骤操作即可:
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 这里需要进行一些配置,默认回车即可
This will install Vue 2.x version of the template.
For Vue 1.x use: vue init webpack#1.0 my-project
? Project name my-project
? Project description A Vue.js project
? Author runoob
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "my-project".
To get started:
cd my-project
npm install
npm run dev
按步骤以及创建了一个vue项目,这就是一个简短的vue项目启动
在工程目录打开命令窗,
cnpm run build 命令进行打包
在目录下会生成dist文件夹,打好的部署包就在里边
部署包可以部署在tomcat或nginx下,具体步骤很简单,自行百度。