Vue3安装 运行教程

本文是综合了所有vue安装教程而成 更细化 更简略 希望对各位读者有所帮助！ 

Vue安装

1. Vue-cli脚手架安装

安装vue的方式有很多 我们这里选择npm方式安装vue

• npm方式
  npm方式安装vue，详细介绍见下文。

1.node.js安装和配置

安装npm 需要安装note.js（NPM是包含在Node.js里的包管理工具），它具有以下功能：允许用户从NPM服务器下载别人编写的第三方包到本地使用。允许用户把自己编写的包或插件上传到NPM服务器供别人下载使用。来自各地的开源软件开发者可以使用 npm 互相分享和借鉴。包的结构使软件开发者能够轻松跟踪项目依赖项和版本。

下载安装node.js

 官网下载最新版本：
https://nodejs.org/en/download/current/

我更新此文时，当前时间2024年12月3日，note最新版本: Node.js (v23.3.0 npm 10.9.0)  

以版本V23.3.0 windows版本下载为例

https://nodejs.org/zh-cn/download/prebuilt-installer  

 选择预建安装程序--》windows---->x64---->v23.3.0(Current)版本，点击下载Node.js v23.3.0

然后一直点击下一步即可

 

2.node.js环境配置

（1）、检查node 和npm版本信息

同时按window+R键,输入cmd,打开命令提示符窗口

(4.1.1)、检查node 版本

输入： node –v　（查看刚才所安装的node版本）

(4.1.2)、 检查npm 版本

输入： npm –v　（查看刚才所安装的npm版本）

3.切换npm的淘宝镜像

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

4.安装Vue-cli

使用管理员身份运行命令行，在命令行中，执行如下指令：npm install -g @vue/cli
这个过程中，会联网下载，可能会耗时几分钟，耐心等待。

安装完成后可以执行指令 vue --version来测试是否成功。

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

Vue项目创建、介绍、运行

1.Vue项目创建

(图形化界面创建步骤）
Vue-cli提供了如下2种方式创建vue项目:

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

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

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

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

 

 执行指令后，自动打开Vue项目管理器，直接创建新项目

预设我们这里选择手动 

功能这里我们在默认的配置下只需要再把Router打开就可以，其他的不用修改

 

配置中Vue版本选择3.0，语法检测规范选择第一个即可 

然后直接点击创建（再提醒一次，一定要用管理员身份打开命令行，然后转跳ui界面，不然这里会创建失败！！） 

创建成功

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

至此，创建完成 

2.vue项目-目录结构

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

3.Vue项目-运行

• 第一种方式：命令行方式
  直接基于cmd命令窗口，在vue目录下，执行输入命令 npm run serve 即可，如下图所示：

 

• 第二种方式：通过VS Code提供的图形化界面，如下图所示

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

1. 通过设置/用户设置/扩展/NPM更改/NPM默认配置

然后重启VS Code，并且双击打开package.json文件，然后点击资源管理器处的3个小点，勾选npm脚本选项

 

运行vue项目：

在终端界面中，我们发现项目是运行在本地服务的8080端口，直接通过浏览器打开地址：
出现此页面表示成功运行

其实此时访问的是 src/App.vue这个根组件，此时我们打开这个组件，修改代码

• 把Home 改成Vue Home，然后保存
• 会发现浏览器的页面在没有重新启动和刷新的情况下自动变成了Vue Home
• 

4.Vue项目-配置端口

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

 

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

5. Vue项目开发流程

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

• 5.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的标签区域的。

5.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企业级开发笔记08：Vue-cli脚手架安装、NodeJS环境搭建、Vue项目的创建、运行、端口修改、Vue开发流程的总结，帮助需要学习Web开发的朋友温故而知新。

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