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脚本窗口默认不显示，可这里放一个我自己亲自试验有效的方法）

通过设置/用户设置/扩展/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的标签区域的。