JavaWeb——前端工程化（2/3）：Vue项目简介（创建、目录结构、启动、配置端口）

目录

Vue项目 -创建

介绍

创建流程 

Vue项目-目录结构

Vue项目-启动

Vue项目-配置端口 

---

Vue项目 -创建

介绍

        有两种主要的创建方式可供选择。一是通过命令行输入“vue create vue-project01”，这种方式简洁直接。二是使用图形化界面，输入“vue ui ”，这种方式直观便捷，也是推荐的创建方式。

• 命令行：vue create vue-project01
• 图形化界面：vue ui   （推荐）

在VSCode终端执行命令：

如果运行时遇到报错：

按照上一篇的安装流程下来，则可能是还未重启VSCode，重启之后再次执行即可。

重启之后如果遇到该错误： 

则运行一遍这个指令：

set-ExecutionPolicy RemoteSigned

 参考：

【vue : 无法加载文件 G:\Program Files\nodejs\vue.ps1，因为在此系统上禁止运行脚本】问题解决-CSDN博客

执行vue ui会在浏览器打开该网页：

创建流程 

• 包管理器选择 npm

• 选择手动配置

• 勾选Router

• 安装的是Vue2我们就选择2.x的版本

• 最后点击创建项目 （联网进行，需要等待一会）

创建完成后，我们来了解一下基于 Vue 脚手架创建出来的工程标准目录结构。清晰合理的目录结构有助于项目的管理和维护。

Vue项目-目录结构

• 基于Vue脚手架创建出来的工程，有标准的目录结构，如下：

        接下来是项目的启动。启动方式有两种，一是通过图形化界面，操作简单直观；二是在命令行输入“npm run serve”。运行成功后，会给出相应的链接。

Vue项目-启动

• 方式一：图形化界面

• 方式二： 命令行
• npm run serve

运行成功后： 

打开链接：

Vue项目-配置端口 

若需要配置端口，则需要在vue.config.js进行配置，记得保存并重启项目，以确保配置生效。

重启项目

---

END 

---

学习自：黑马程序员——JavaWeb课程