VUE3初学入门-02-VUE创建项目

方法

上一篇是在VSCODE中建立工作区，然后创建，属于命令加鼠标方式。个人感觉，在VSCODE基本上都是这样的操作，不是说没有完全的鼠标操作，但在实际应用中，还是感觉命令方便一些。

提示：现在官方推荐使用 create-vue 来创建基于 Vite 的新项目

在VSCODE中个人习惯是默认不打开上次工作文件夹，默认欢迎界面上会显示历史的几个项目，所以有兴趣的可以改一下配置

这种情况下，VSCODE打开后，会显示一个欢迎的界面。此时，点击打开文件夹，然后在对话框里创建新的文件夹即可，当然，Ctrl+Shift+`打开终端也是可以的，只不过默认是user目录，假如工作分区是在E盘，需要切换一下，操作方法自己可以感觉一下，找到自己习惯的方式。我使用的是终端，然后通过命令操作，这样在创建VUE项目时会自动创建文件夹，然后再点击打开即可。

PS C:\Users\yuandll> cd E:\_work\vsCodeWork\TestVue3\
PS E:\_work\vsCodeWork\TestVue3>     

通过vue-cli进行创建

vue-cli创建vue项目首先我们需要全局安装一下，如果安装了，就直接使用vue create创建项目

PS E:\_work\vsCodeWork\TestVue3>npm install -g @vue/cli
PS E:\_work\vsCodeWork\TestVue3>vue create 项目名

提示三个选项，前两个是默认的，第三个是选择指定的方式。（上下键盘选择，回车确认）

本例使用第三个：

• Bibel：
• Router：单页面应用（使用路由方式）
• linter：代码检查工具，对代码进行静态分析，发现代码中的潜在错误。常见的检查工具：ESLint（用于检查 js 代码）、stylelint（用于检查 css 代码）、commitlint（用于检查 git 提交信息）
• formatter: 格式化工具，用于统一编码风格。常用的是Prettier（用于格式化文件，支持多种格式的文本文件）

更多配置说明可以参考

选择VUE版本
确认使用路由模式

确认检查工具

此时还不能看到代码，选择打开文件夹

我使用的是工作区，可以添加到工作区

通过npm进行创建

同前一篇一样，这边再简述一下，方便对比

PS E:\_work\vsCodeWork\TestVue3>npm create vue@latest

比较

npm生成的项目是vite。生成的文件略有差别，会对配置有些影响，其他影响不大。

部署到nginx

如果放在nginx根目录下，一个项目时不需要配置vue项目，但是如果放了多个vue项目的话，vue需要进行配置

修改配置

vue-cli方式：修改vue.config.js，增加路径

vite方式：修改vite.config.js

生成部署文件

使用build生成部署文件，将dist目录下的文件复制到nginx的html目录下。可以使用http://localhost/my010来进行访问

npm run build