前端框架开发指南（Vue入门篇）

---

前言

刚刚接触前端，我们肯定从最基本的框架安装来进行的。
我们需要配置什么， 我们需要安装什么。
我们如何开发这种问题来围绕进行的。
我们先来最基本的开发安装。

一、Node.js是什么？

前端的底层开发语言的是Node.js
为什么是Node.js作为底层开发语言

前端开发的主要面对的对象是浏览器等，各种各样的开发环境
就好像我们写入html的js语言，需要一个解析器。
而html的解析器就是浏览器，所以我们能在浏览器上运行。
而我们的Node.js就是我们JavaScript脚本语言的解析器

如果不是很理解的话在介绍一下

Node.js介绍
Node.js解析器是一个运行环境，不但允许js定义各种数据结构，进行各种计算，还允许js使用允许环境提供的内置对象和方法做一些事情。如运行在浏览器中的js的用途是操作DOM，浏览器就提供了document之类的内置对象。而运行在nodejs中的js的用途是操作磁盘文件或搭建http服务器，nodejs就相应提供了fs,http等内置对象。

1.Node.js安装及详细步骤

Node.js官方安装包及源码下载地址：https://nodejs.org/en/
在官网上选择我们需要的版本

这里因为我是windows版本的电脑 这里演示的就是windos版本的安装
在官网下载好 点击Next、显示Node.js的许可协议页面：

勾选“I accept the terms in the License Agreement”同意许可协议，并单击Next下一步，出现如下界面：

Node.js默认安装路径为“C:\Program Files\nodejs\”，你可以修改，在这里我改到了D盘，单击Next，出现安装模式及模块选择界面：

这里我直接（点击Add to PATH）Next下一步，准备就绪，准备安装：

然后等待安装完成即可
安装完成后是不是担心没有安装上
我们win+r cmd调出命令框
输入 node -v 出现版本号就是安装成功

二、安装淘宝镜像

2.1 什么是淘宝镜像

淘宝镜像又称国内镜像（cnpm）
主要是为了快速的下载安装依赖
现在不能去翻墙下载国外的依赖
而下载项目依赖的时候如果网速比较慢的话（npm下载的话，有的时候就下载不了）
npm的作用

npm和cnpm作用是一样的
唯一不同的时候就是一个是从国外下载依赖 一个是从国内下载依赖

1. 允许用户从 npm 服务器下载别人编写的第三方包到本地使用。
2. 允许用户从 npm 服务器下载并安装别人编写的命令行程序到本地使用。
3. 允许用户将自己编写的包或命令行程序上传到 npm 服务器供别人使用。

2.2 如何下载淘宝镜像

淘宝镜像分为两种下载方法
一个是永久下载 一个是临时下载
永久下载

npm config set registry https://registry.npm.taobao.org

临时下载

npm --registry https://registry.npm.taobao.org install express

如何查看cnpm如何下载成功
也是在命令框中输入cnpm -v

3.安装Webpack

3.1 什么是Webpack？

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

3.2 如何安装webpack？

在命令框里面运行
指定版本

npm install webpack@4.44.2 -g 这边采用的是npm 安装的方式
如果不行的话可以
cnpm install webpack@4.44.2 -g
-g 是全局安装的意思

安装后在命令框输入

webpack -v

来检查webpack是否安装成功

4.如何使用Vue-cli脚手架

4.1 什么是Vue-cli 脚手架？

vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目。

4.2 安装Vue-cli脚手架

全局安装

cnpm install -g @vue/cli

创建文件夹

vue create 项目名

如何启动

npm run serve

启动后在浏览器中输入我小箭头标记的网址就可以完美运行了

总结

前端开发是一个不断学习开发的过程
希望大家学的愉快~
最后祝大家