如何导入一个Vue并成功运行

 注意1：要确保自己已经成功创建了一个Vue项目，创建项目教程在如何创建Vue项目

 注意2：以下操作均在VS Code，教程在VS Code安装教程

一、Vue项目导入VS Code

1.点击文件，然后点击将文件添加到工作区

2. 选择自己的vue项目文件夹，点击添加

3.添加成功 

当然，导入vue项目的方式肯定不止以上这种方式，肯定还有很多的 

二、运行Vue项目

运行之前先介绍项目结构：

在一个刚新建的 Vue 项目中，通常会看到以下目录结构（以 Vue CLI 创建的项目为例）：

vue-project/
├── node_modules/       # 项目依赖包
├── public/             # 静态文件目录
│   ├── favicon.ico     # 网站图标
│   └── index.html      # 主 HTML 文件
├── src/                # 源代码目录
│   ├── assets/         # 资源文件（图片、样式等）
│   ├── components/     # Vue 组件
│   ├── views/          # 页面视图
│   ├── App.vue         # 根组件
│   ├── main.js         # 入口文件
│   └── router/         # 路由相关（如果使用了 vue-router）
│       └── index.js    # 路由配置
├── tests/              # 测试文件
│   └── unit/           # 单元测试
├── .gitignore          # Git 忽略文件
├── babel.config.js     # Babel 配置文件
├── package.json        # 项目配置文件
└── vue.config.js       # Vue CLI 配置文件

各个目录和文件的作用：

• node_modules/: 存放项目依赖的包。
• public/: 静态资源，直接复制到最终构建目录，index.html 是入口文件。
• src/: 项目源码，包含主要的 Vue 组件、页面和资源。
  • assets/: 存放静态资源，如图片、样式文件等。
  • components/: 存放可重用的 Vue 组件。
  • views/: 存放不同页面的组件。
  • App.vue: 根组件，通常包含布局和路由视图。
  • main.js: 应用的入口文件，初始化 Vue 实例。
  • router/: 路由配置，如果使用 vue-router，会在此目录中配置路由。
• tests/: 存放测试相关的代码。
• .gitignore: 列出不需要被 Git 跟踪的文件和目录。
• babel.config.js: Babel 的配置文件，用于转译 JavaScript。
• package.json: 项目的基本信息和依赖管理。
• vue.config.js: Vue CLI 的配置文件，用于定制构建配置。

这种结构帮助开发者更好地组织和管理项目。

运行操作如下

1.NPM脚本方式运行，要确保NPM脚本存在，如下所示

2.若不存在NPM脚本，进行以下设置，找到设置->用户->扩展->Npm，配置5 6 操作，然后重启 VS Code

3.（此步骤可省略，若是项目运行失败，可按照此步骤进行设置）启动前先关闭VS Code，进行如下设置，在桌面找到VS Code快捷方式图标，右键单机，点击属性，点击高级，勾选用管理员身份运行，点击确定

4.开始运行Vue项目，找到NPM脚本，点击server的运行，即小三角形符号

5.点击之后，会弹出一个终端窗口，Ctrl 单机，点击该链接，即可访问项目

6.访问成功

7.我这里是7000端口，大家应该是8080端口，为了区分与Tomcat，所以我改成了7000，修改方式如下，不要忘了逗号哦：

devServer:{port: 7000
}

以上就是关于如何运行一个Vue项目的基本步骤，感谢各位看官的观看，下期见，谢谢~