5 前端系统开发：Vue2、Vue3框架（中）：Vue前端工程化组件式开发

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

---

五、前端工程化（使用Vue创建一个完整的企业级前端项目）

• 当前最为主流的开发模式:前后端分离
  
  
• 前端工程化: 是指在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。
  • 模块化：JS、CSS
  • 组件化：UI结构、样式、行为
  • 规范化：目录结构、编码、接口
  • 自动化：构建、部署、测试

1 Vue脚手架（Vue-cli）环境准备

• 介绍: Vue-cli 是Vue官方提供的一个脚手架，用于快速生成一个 Vue的项目模板。
• Vue-cli提供了如下功能:
  • 统一的目录结构
  • 本地调试
  • 热部署
  • 单元测试
  • 集成打包上线
• 依赖环境: NodeJS

（1）安装NodeJS

Node.jsR是一个开源、跨平台的JavaScript运行时环境。其实就和java运行要安装jdk一样。

• step1:下载nodejs：https://nodejs.org/zh-cn
  我们下载一个长期稳定版本就可以了
  正常安装就是了，注意下面这个不用勾选
  
• step2:验证是否安装成功 node -v
  可以看到版本号就成功了
  
• step3:配置npm的全局安装路径
  用管理员权限运行cmd,执行下面命令：后面的路径就是你前面安装的nodejs选择的安装目录
  npm config set prefix “D:\frontDevelopment\nodeJs”
  使用 npm config get prefix验证有没有设置成功
  
• step4: 切换npm的镜像（加快资源的下载）
  同样使用管理员权限执行下面命令
  npm config set registry https://mirrors.huaweicloud.com/repository/npm/
  这里镜像源有可能过期了，就去网上找最新的
• step5: 安装Vue-cli
  使用管理员身份运行命令行，在命令行中，执行如下指令：
  npm install -g @vue/cli
  
• step6:验证Vue-cli是否安装成功
  vue --version
  出现版本号就成功了
  
• step7: 安装Vue的路由功能（先装上，后面会用上）
  npm install vue-router
  

2 Vue项目简介（创建）

（1）Vue项目创建

• 创建Vue项目
  选择你要将项目创建的所在目录打开cmd, 有两种创建方案
  • 命令行：vue create 项目名
    注意项目名不能有大写字母
  • 图形化界面：vue ui

通过命令行创建（这个创建的比较简洁，有些自定义功能还是采用ui比较好）

• step1: 在你想要创建vue项目的目录使用管理员权限打开命令行界面，执行命令
  vue create demo_vue_project
• step2: 根据需求自行选择vue2或vue3
  
  出现以下界面，项目创建成功：
  

创建成功后就可以在工作目录看到创建的项目文件夹了

• step3: 使用Vscode打开刚创建的项目
  
• step4: 启动vue项目，默认是8080端口
  • 命令行：在创建的项目的这级目录下cmd执行下面命令
    npm run serve
    

直接Vscode里面启动服务
NPM脚本侧边栏没有解决方案：NPM侧边栏没有解决方案
npm：解决 “无法加载文件，因为在此系统上禁止运行脚本“ 问题


服务启动成功，我们使用URL来访问

• step5: 端口切换
  直接修改 vue.config.j