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 
? 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下，具体步骤很简单，自行百度。