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

旧城等待， 2022-12-27 11:05 190阅读 0赞

### 前端开发指南 ###

*  前言
 *  一、Node.js是什么？
 *   *  1.Node.js安装及详细步骤
 *  二、安装淘宝镜像
 *   *  2.1 什么是淘宝镜像
     *  2.2 如何下载淘宝镜像
     *  
 *  3.安装Webpack
 *   *  3.1 什么是Webpack？
     *  3.2 如何安装webpack？
 *  4.如何使用Vue-cli脚手架
 *   *  4.1 什么是Vue-cli 脚手架？
     *  4.2 安装Vue-cli脚手架
 *  总结

--------------------

# 前言 #

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

# 一、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/  
在官网上选择我们需要的版本  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1JpY2tfYW5kX21vZGU_size_16_color_FFFFFF_t_70_pic_center]  
**这里因为我是windows版本的电脑 这里演示的就是windos版本的安装**  
**在官网下载好 点击Next、显示Node.js的许可协议页面：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1JpY2tfYW5kX21vZGU_size_16_color_FFFFFF_t_70_pic_center 1]  
**勾选“I accept the terms in the License Agreement”同意许可协议，并单击Next下一步，出现如下界面：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1JpY2tfYW5kX21vZGU_size_16_color_FFFFFF_t_70_pic_center 2]  
**Node.js默认安装路径为“C:\\Program Files\\nodejs\\”，你可以修改，在这里我改到了D盘，单击Next，出现安装模式及模块选择界面：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1JpY2tfYW5kX21vZGU_size_16_color_FFFFFF_t_70_pic_center 3]  
**这里我直接（点击Add to PATH）Next下一步，准备就绪，准备安装：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1JpY2tfYW5kX21vZGU_size_16_color_FFFFFF_t_70_pic_center 4]

> **然后等待安装完成即可**  
> **安装完成后是不是担心没有安装上**  
> 我们win+r cmd调出命令框  
> 输入 node -v 出现版本号就是安装成功  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1JpY2tfYW5kX21vZGU_size_16_color_FFFFFF_t_70_pic_center 5]

# 二、安装淘宝镜像 #

## 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  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1JpY2tfYW5kX21vZGU_size_16_color_FFFFFF_t_70_pic_center 6]

##  ##

# 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**  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1JpY2tfYW5kX21vZGU_size_16_color_FFFFFF_t_70_pic_center 7]

**来检查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

**启动后在浏览器中输入我小箭头标记的网址就可以完美运行了**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1JpY2tfYW5kX21vZGU_size_16_color_FFFFFF_t_70_pic_center 8]

# 总结 #

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

![在这里插入图片描述][20201210165247318.png_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1JpY2tfYW5kX21vZGU_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/e5742c0f9e2841a7bf5bae4571600a76.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1JpY2tfYW5kX21vZGU_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20201210143500630.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1JpY2tfYW5kX21vZGU=,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1JpY2tfYW5kX21vZGU_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/20201210143727789.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1JpY2tfYW5kX21vZGU=,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1JpY2tfYW5kX21vZGU_size_16_color_FFFFFF_t_70_pic_center 3]: https://img-blog.csdnimg.cn/20201210144121139.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1JpY2tfYW5kX21vZGU=,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1JpY2tfYW5kX21vZGU_size_16_color_FFFFFF_t_70_pic_center 4]: https://img-blog.csdnimg.cn/20201210144329438.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1JpY2tfYW5kX21vZGU=,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1JpY2tfYW5kX21vZGU_size_16_color_FFFFFF_t_70_pic_center 5]: https://img-blog.csdnimg.cn/20201210160527132.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1JpY2tfYW5kX21vZGU=,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1JpY2tfYW5kX21vZGU_size_16_color_FFFFFF_t_70_pic_center 6]: https://img-blog.csdnimg.cn/20201210162619233.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1JpY2tfYW5kX21vZGU=,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1JpY2tfYW5kX21vZGU_size_16_color_FFFFFF_t_70_pic_center 7]: https://img-blog.csdnimg.cn/20201210165004526.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1JpY2tfYW5kX21vZGU=,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1JpY2tfYW5kX21vZGU_size_16_color_FFFFFF_t_70_pic_center 8]: https://img-blog.csdnimg.cn/20201210164141444.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1JpY2tfYW5kX21vZGU=,size_16,color_FFFFFF,t_70#pic_center
[20201210165247318.png_pic_center]: https://img-blog.csdnimg.cn/20201210165247318.png#pic_center