Vue3+Bootstrap5项目初始化（vue初始化项目命令）
项目创建前需要安装好NODEJS，可以通过npm -v查看，如果命令执行后看到版本号说明NODEJS已经安装好，否则按照Installing Node.js via package manager | Node.js的说明进行安装。
下面示例是在Windows操作系统和WSL环境下演示的。
- 先创建VITE项目
npm create vite@latest
# 交互步骤1：录入项目名
# 交互步骤2：选择框架vue
# 交互步骤3：选择语言Typescript- 运行默认项目
2.1 使用VSC（Visual Studio Code）打开项目
方式一：UI操作
方式二：shell命令
在VSC界面按使用快捷键【Shift+Ctrl+`】打开终端，以下涉及命令都在终端执行，然后使用命令code path/to/project 打开项目
2.2 使用命令安装项目依赖模块
在终端中执行命令: npm install
2.3 运行项目
在终端中执行命令: npm run dev
点击截图中的“Open in Browser”在浏览器查看项目
2.4 清除示例源代码
2.4.1 清除样式文件【src/style.css】中的所有内容
2.4.2 修改文件【src/App.vue】中的代码
2.4.3 修改文件【
src/components/HelloWorld.vue】中的代码
2.4.4 在浏览器中查看项目
- 安装Bootstrap 5
安装命令参考Bootstrap and Vite · Bootstrap
v5.3BootstrapGitHubTwitterOpen CollectiveBootstrap。
3.1 安装Boostrap
npm i --save bootstrap @popperjs/core3.2 安装sass
npm i --save-dev sass3.3 导入Bootstrap
3.3.1 打开文件【src/main.ts】导入Bootstrap样式文件以及模块
- 再次运行项目并查看
- 看到按钮变为Bootstrap样式即说明项目初始化成功
