黑马JavaWeb开发笔记08——(保姆级Vue项目全部安装配置步骤)Vue-cli脚手架安装、NodeJS环境搭建、Vue项目的创建、运行、端口修改、Vue开发流程

---

前言

本篇文章是2023年最新黑马JavaWeb企业级开发笔记08：Vue-cli脚手架安装、NodeJS环境搭建、Vue项目的创建、运行、端口修改、Vue开发流程的总结，帮助需要学习Web开发的朋友温故而知新。

本篇文章重点是安装步骤，细化了每一个步骤，对于可能遇到的问题均补充了解决办法。

1. Vue-cli脚手架介绍
2. Vue-cli脚手架安装(详细步骤）
3. Vue项目创建、介绍、运行
4. Vue项目开发流程

---

前端工程化

现在企业开发中更加讲究前端工程化方式的开发，主要包括如下4个特点：

1. 模块化：将js和css等，做成一个个可复用模块
2. 组件化：我们将UI组件，css样式，js行为封装成一个个的组件，便于管理
3. 规范化：我们提供一套标准的规范的目录接口和编码规范，所有开发人员遵循这套规范
4. 自动化：项目的构建，测试，部署全部都是自动完成

在企业级的前端项目开发中，把前端开发所需要的工具、技术、流程、经验进行规范化和标准化

需要学习vue的官方提供的脚手架帮我们完成前端的工程化

1. Vue-cli脚手架介绍

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

2. Vue-cli脚手架安装

1. 在nodejs官网里面下载nodejs安装到本地
   
   双击.msi文件安装，选择好安装路径，安装路径不能有中文和空格，它会自动配置
   

2. 验证nodejs环境变量
   NodeJS 安装完毕后，会自动配置好环境变量，我们验证一下是否安装成功 node -v
   

3. 配置npm的全局安装路径
   使用管理员身份运行命令行
   
   在命令行中，执行如下指令：npm config set prefix "你自己的nodejs安装路径"
   比如我安装在E盘的node.js文件夹中，那么我就应该输入如下命令：
   可以用npm config get prefix指令查看是否成功，成功会出现本机nodejs安装路径
   

4. 切换npm的淘宝镜像
   以管理员身份在命令行中执行指令：npm config set registry 最新淘宝镜像地址
   最新地址获取方式：直接在CSDN搜索栏搜索淘宝镜像最新地址，复制粘贴到指令即可。
   所以我这里执行指令：npm config set registry https://registry.npmmirror.com/
   

5. 安装Vue-cli
   使用管理员身份运行命令行，在命令行中，执行如下指令：npm install -g @vue/cli
   这个过程中，会联网下载，可能会耗时几分钟，耐心等待。
   
   安装完成后可以执行指令 vue --version来测试是否成功
   

至此，环境准备工作已经搭建完。

3. Vue项目创建、介绍、运行

3.1 Vue项目创建(图形化界面创建步骤）

Vue-cli提供了如下2种方式创建vue项目:

• 命令行：直接通过命令行方式创建vue项目vue create vue-project01

• 图形化界面：通过命令先进入到图形化界面，然后再进行vue工程的创建vue ui
  （这里作者用图形化界面的方式来创建）

1. 新建文件夹vue，打开文件夹，复制该目录地址
   

2. 以管理员身份打开终端，进入该目录下的命令行cd 复制的地址，执行指令vue ui
   这里一定一定要用管理员身份打开，不然会报错！！！
   

3. 执行指令后，自动打开Vue项目管理器，直接创建新项目
   
   预设我们这里选择手动
   
   功能这里我们在默认的配置下只需要再把Router打开就可以，其他的不用修改
   
   配置中Vue版本选择2.x，语法检测规范选择第一个即可
   
   然后直接点击创建（再提醒一次，一定要用管理员身份打开命令行，然后转跳ui界面，不然这里会创建失败！！）

4. 创建成功
   
   

5. 创建成功后这个ui界面可以直接关闭了，然后我们在vscode里面打开这个vue项目文件夹
   
   至此，创建完成

3.2 vue项目-目录结构

vue项目的标准目录结构以及目录对应的解释如下图所示:

3.3 Vue项目-运行

• 第一种方式：命令行方式
  直接基于cmd命令窗口，在vue目录下，执行输入命令 npm run serve 即可，如下图所示：
  
• 第二种方式：通过VS Code提供的图形化界面，如下图所示

（注意：NPM脚本窗口默认不显示，可这里放一个我自己亲自试验有效的方法）

1. 通过设置/用户设置/扩展/MPM更改NPM默认配置
   
2. 然后重启VS Code，并且双击打开package.json文件，然后点击资源管理器处的3个小点，勾选npm脚本选项
   
   运行vue项目：
   
   在终端界面中，我们发现项目是运行在本地服务的8080端口，直接通过浏览器打开地址：
   出现此页面表示成功运行
   

• 其实此时访问的是 src/App.vue这个根组件，此时我们打开这个组件，修改代码
  • 把Home 改成Vue Home，然后保存
  • 会发现浏览器的页面在没有重新启动和刷新的情况下自动变成了Vue Home
    
    这就是vue项目的热更新功能

3.4 Vue项目-配置端口

• 对于8080端口，经常被占用，所以需要修改默认的8080端口。
• 修改vue.config.js文件的内容，添加如下代码：
  

如下图所示，然后我们关闭服务器，并且重新启动，端口更改成功，可以通过浏览器访问7000端口来访问我们之前的项目

更改成功

4. Vue项目开发流程

• 我们访问的首页是index.html，但是打开public/index.html文件发现，index.html的代码很简洁，但是浏览器所呈现的内容却很丰富，代码和内容不匹配
• 这是因为vue项目的开发流程

4.1 入口函数main.js

对于vue项目，index.html文件默认是引入了入口函数main.js文件，我们找到src/main.js文件，其代码如下：

• import: 导入指定文件，并且重新起名
  • 例如上述代码 import App from ‘./App.vue’ 导入当前目录下得App.vue并且起名为App
• new Vue(): 创建vue对象
• $mount(‘#app’)：将vue对象创建的dom对象挂在到id=app的这个标签区域中，作用和之前学习的vue对象的le属性一致。
• router: 路由，详细在后面的小节讲解
• render: 主要使用视图的渲染的

main.js中通过代码挂在到index.html的id=app的标签区域的。

4.2 App.vue

首页内容如何呈现的问题，涉及到render中的App了，如下图所示：

打开App.vue，注意的是.vue结尾的都是vue组件。而vue的组件文件包含3个部分：

• template: 模板部分，主要是HTML代码，用来展示页面主体结构
• script: js:代码区域，主要是通过js代码来控制模板的数据来源和行为
• style: css样式部分，主要通过css样式控制模板的页面效果
  
  此时我们可以打开App.vue，观察App.vue的代码，其中可以发现，App.vue组件的template部分内容，和我们浏览器访问的首页内容是一致的，如下图所示：
  

---

总结

本篇文章是2023年最新黑马JavaWeb企业级开发（知识清单）01：前端介绍、html实现标题格式内容的总结，帮助需要学习Web开发的朋友温故而知新。