H5前端开发入门学习(基于vs+vue开发)
文章仅供初学入门,只讲学习套路,如何去学习,具体知识点不具体叙述。
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
相关知识百度很多学习资料
二、开发工具及环境搭建(vs+vue.js)
基础学完之后,还是一脸懵逼。一个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 最好安装好所需要的大部分插件,方便开发。
三、使用vue.js来个小demo
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 <test@runoob.com>
? 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? Yesvue-cli · Generated "my-project".To get started:cd my-projectnpm installnpm run dev
按步骤以及创建了一个vue项目,这就是一个简短的vue项目启动
四、打包
在工程目录打开命令窗,
cnpm run build 命令进行打包
在目录下会生成dist文件夹,打好的部署包就在里边
五、项目部署
部署包可以部署在tomcat或nginx下,具体步骤很简单,自行百度。
H5前端开发入门学习(基于vs+vue开发)相关推荐
- Web前端开发入门学习分享
Web前端开发入门学习分享 1:如何开始学习Web前端 首先你需要学习html的各个标签,掌握其用法和规范,明白其作用. 开始学习css的使用,你先学习在html页面中为标签增加css样式,其次是将c ...
- web前端开发入门学习线路图详解-2019升级版
现如今,Web前端工程师已经成为各大互联网公司不可或缺的热门职位,从业者队伍日渐庞大,这其中不乏零基础学习者和转行人士.为了方便大家系统而全面的掌握前端基础知识,千锋小编特意整理了web前端开发入门学 ...
- 一个基于.Net+Vue开发的开源权限工作流系统
今天给大家推荐一个开源权限工作流系统,一个快速开发框架. 项目简介 这是一个基于.Net 5开发的权限管理.工作流系统框架.借鉴了Martin Fowler企业级应用开发思想,框架选项都是使用最新的技 ...
- web前端开发需要学习什么?需要哪些开发工具?
web前端开发需要学习什么?需要哪些开发工具? web前端工程师其实在不同的公司,有不同的职能,但是称呼都是类似的 1.做网站设计.网页界面开发 2.做网页界面开发 3.做网页界面开发.前台数据绑定和 ...
- 区块链开发入门:基于以太坊智能合约构建 ICO DApp
写给前端开发者的第一本区块链开发入门指南,通过从 0 到 1 实战开发一个 ICO DApp 项目(基于 V 神的 DAICO 设计思想),深入掌握区块链及以太坊技术. 为什么要选择区块链开发? 未来 ...
- 【转载】salesforce 零基础开发入门学习(四)多表关联下的SOQL以及表字段Data type详解...
salesforce 零基础开发入门学习(四)多表关联下的SOQL以及表字段Data type详解 建立好的数据表在数据库中查看有很多方式,本人目前采用以下两种方式查看数据表. 1.采用schema ...
- 游戏开发入门(一)游戏开发概述
视频链接:游戏开发入门(一)游戏开发概述(3节课 时常:约1小时03分钟) 该视频围绕电子游戏的发展与开发简单介绍了一些基本常识,同时提出并解决了几个问题 笔记与总结(请先学习视频内容): 1.游戏机 ...
- 前端项目:基于Nodejs+vue开发实现高校学院网站系统
作者主页:编程指南针 作者简介:Java领域优质创作者.CSDN博客专家 .掘金特邀作者.多年架构师设计经验.腾讯课堂常驻讲师 主要内容:Java项目.毕业设计.简历模板.学习资料.面试题库.技术互助 ...
- Web前端html5+css3前端开发入门学习笔记
文章目录 前言 HTML 认识HTML 1. 网页组成和本质 2.了解浏览器 3.web标准 4.HTML感知 5.HTML骨架 6.编译软件vscode的简介和使用 7.注释 8.标签组成和关系 9 ...
最新文章
- 面试鹅厂,我三面被虐的体无完肤。。。
- SAP PM预防性维护
- 编程之美-求二叉树中节点的最大距离方法整理
- 神经网络模型遇到瓶颈?这些Tricks让你相见恨晚!
- HBase:分布式列式NoSQL数据库
- 前端中什么是中台开发环境_Web前端开发中需要学习什么?会使用到哪些开发工具?...
- Intel® Nehalem/Westmere架构/微架构/流水线 (3) - 流水线前端
- 大数据之-Hadoop优势_(4高)---大数据之hadoop工作笔记0011
- 以太坊2.0合约质押新增1.81万ETH
- 苹果智能拨号软件_iPhone智能性升级 多功能通话辅助软件
- 视频教程-备战2020毕业季—毕业设计论文实战课程讲解-.NET
- 该模型是内置式的MTPA控制,速度环的输出为给定转矩,然后方式1通过求解MTPA方程得到dq给定电流
- 图片验证码识别 python_Python识别字符型图片验证码
- 我对软件测试的理解以及我的职业规划,希望对你们有所帮助
- [我叫以赏]Python获取B站UP主粉丝数
- 粤省事:随时、随地、随处的便民解决方案
- 计算机二级考试高级应用软件版本,计算机二级高级办公软件考哪个版本
- 用Python 实现简单的汇率计算
- 软电话对接鼎信DWG无线网关
- C++中volatile变量测试