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

方法

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

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

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

修改配置

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

vite方式：修改vite.config.js

生成部署文件

npm run build