本文主要是介绍如何搭建一个vue项目，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一 安装nvm（node的版本管理工具：一个nvm可以管理很多node版本）

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

1 注意：

v0.39.1这是nvm的版本号，当前最新版本是v0.39.1。详见 

2 常用的nvm命令：

二 安装node（基于Chrome V8引擎的JS运行环境）

1 安装最新稳定版本

nvm install stable

2 安装指定版本

nvm install v16.16.0

Node.js如果安装成功，可以查看Node.js的版本,在终端输入如下命令：

node -v

三 包管理器

3.1 包管理器npm（安装node.js完成后，在node.js中会同时帮我们安装一个包管理器npm）

可以借助npm命令来安装node.js的包。这个工具相当于python的pip包管理器。

常用的npm命令：

3.2 包管理器yarn（第三方开发者提供了比npm更好用的yarn包管理器）

安装yarn包管理器

npm install -g yarn

yarn基本使用命令

四 安装项目构建工具

vue2.0官方推荐使用vue-cli，vue3.0官方推荐使用vite2.0。

4.1 使用Vue-CLI创建vue项目

1 安装vue-cli

npm install -g @vue/cli
# yarn global add @vue/cli  # 注意，安装不成功就换成npm

安装完成以后，可以通过以下命令查看vue/cli的版本

vue -V

2 生成vue项目

cd ~/Vue
# vue create 项目目录名   # 会自动创建一个目录用于保存项目的。
vue create myproject

3 跟着官方提示，输入命令。最后打开链接地址，访问项目，http://localhost:8080

4.2 使用Vite创建vue项目

1 安装vite

npm create [email protected]
# yarn create vite

2 跟着官方提示，设置项目目录名和各项配置。终端下通过以下命令直接运行项目。

# yarn dev --host=0.0.0.0 --port=5173
vite --host=0.0.0.0 --port=5173 # 默认--host=127.0.0.1 --port=5173

3 访问页面

五 项目执行流程

 项目执行流程图

5.1 项目执行流程图说明

整个vue项目最开始用户访问的是主文件index.html，index.html中会引入src文件夹中的main.js，main.js中实例化vm对象，并导入顶级的单文件根组件src/App.vue，App.vue中会通过组件嵌套或者路由来引用页面组件，views组件会根据开发的页面需要加载components文件夹中的其他单文件子组件。

5.2 项目的目录结构

项目根目录/
├── index.html          # vue项目唯一的html页面，整个项目所有的内容都是被index.html加载提供给用户访问的
├── node_modules/  # 前端项目运行的依赖库目录，如果缺少则在项目根目录下，使用yarn或者npm update来恢复
├── package.json      # 前端项目运行的依赖库的配置文件[通用]，类似于python的requirements.txt
├── yarn.lock            # 项目运行的依赖库的配置文件[yarn]
├── vite.config.js      # 项目构建工具vite独有的运行配置文件，一般用于设置跨域代理 
├── public/               # 访问入口目录，部分版本的vue的index.html入口文件会保存到这里，也可能不在这里
├── src/                    # 项目的源码目录，是项目的核心，所有的源代码都保存在这里
         ├── App.vue            # 项目的根组件，由App.vue进行加载所有的组件页面和子组件
         ├── assets/             # 资产目录，保存项目所需的静态资源[img/视频/音频等附件]
         ├── router/             # 路由文件存储目录，保存项目所有的路由文件
                   └── index.js   # 默认的主路由文件，负责导入vue组件与url地址进行一对一的映射
         ├── components/   # 子组件目录，保存一些零零碎碎的部分页面内容的组件
         └── main.js             # 全局初始化入口脚本，index.html被运行时会自动加载这个js文件。
└── dist/                         # 项目开发完成以后肯定要把项目部署上线，前端人员就需要编译整个项目，编译后的代码保存这里。 

这篇关于如何搭建一个vue项目的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！