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课程