零基础使用Vue2搭建前端项目

1、简介

        Vue作为前端框架，近些年在国内深受欢迎，Vue2作为一个里程碑式的版本，目前虽然已经停止维护了，当时目前还有很多公司使用Vue2进行前端开发，而且Vue3是基于Vue2进行改进的，因此学习Vue2对我们打牢基础至关重要，本文将详细介绍如何使用Vue2从零搭建前端项目。官网地址为：Vue.js - 渐进式 JavaScript 框架 | Vue.js

2、安装nodejs环境

        node下载地址：Node.js — Run JavaScript Everywhere

        node安装包格式是 .msi，按照提示可以一步一步进行安装，在这个过程中，需要将node添加到环境变量中。npm作为包管理工具，在node中已经集成，如果出现如下信息说明安装成功：

# 查看node版本
node -v
# 查看npm版本
npm -v
# 注：node和npm命令详细使用可以使用--help命令查看

 3、配置包管理工具（npm）镜像

# 1、查看配置的镜像地址
npm config get registry
# 2、配置镜像地址
npm config set registry https://registry.npmmirror.com # 配置镜像（用于下载依赖）
# 3、清除缓存
npm cache clean --force
# 4、查看npm配置列表
npm config list

注：在 2021 年，淘宝就发文称，npm淘宝镜像已经从 registry.npm.taobao.org 切换到了registry.npmmirror.com。旧域名也将于 2022 年 5 月 31 日停止服务（ HTTPS 证书到期才真正不能用了），目前有很多资料中依然配置淘宝镜像请大家注意改动。

4、使用vue-cli脚手架构建前端项目

4.1、安装脚手架并通过脚手架创建项目

# 1、安装脚手架（在电脑上进需要进行一次安装）
npm install -g @vue/cli@5.0.8 # 仅第一次安装，安装完成后电脑上就可以使用vue命令
# 注：@后面指定版本号，如果不加默认最新版本
# 2、查看vue-cli版本
vue --version
# 3、创建项目
vue create 项目名  # vue create web

创建项目时，指定使用vue版本，如下：

 4.2、编译项目

        使用如下命令进行编译：

# 1、编译运行（需要进入项目目录后才能进行编：cd 项目名）
npm run serve
# 2、打包前端
npm run build

注：在编译运行之后可以直接通过浏览器访问，打包后会生成前端包：dist，通过nginx等web中间件进行访问。 

5、总结 

        本文详细介绍了如何配置vue运行环境，如何使用vue-cli脚手架进行vue项目的搭建，帮助初学者快速入门，关于vue框架的更多细节内容，将在后续更新。 

        本人是一个从小白自学计算机技术，对前端、运维、后端、各种中间件技术、大数据等有一定的学习心得，想获取自学总结资料（pdf版本）或者希望共同学习，关注微信公众号：it自学社团。后台回复相应技术名称/技术点即可获得。（本人学习宗旨：学会了就要免费分享）