Vue3+Bootstrap5项目初始化

项目创建前需要安装好NODEJS，可以通过npm -v查看，如果命令执行后看到版本号说明NODEJS已经安装好，否则按照Installing Node.js via package manager | Node.js的说明进行安装。

下面示例是在Windows操作系统和WSL环境下演示的。

1. 先创建VITE项目

npm create vite@latest

# 交互步骤1：录入项目名
# 交互步骤2：选择框架vue
# 交互步骤3：选择语言Typescript

交互步骤1

交互步骤2

交互步骤3

2. 运行默认项目

2.1 使用VSC（Visual Studio Code）打开项目

方式一：UI操作

通过UI打开项目

通过UI打开项目

方式二：shell命令

在VSC界面按使用快捷键【Shift+Ctrl+`】打开终端，以下涉及命令都在终端执行，然后使用命令code path/to/project 打开项目

2.2 使用命令安装项目依赖模块

在终端中执行命令: npm install

NPM安装依赖模块

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 在浏览器中查看项目

清除示例代码后的效果

3. 安装Bootstrap 5

安装命令参考Bootstrap and Vite · Bootstrap
v5.3BootstrapGitHubTwitterOpen CollectiveBootstrap。

3.1 安装Boostrap

npm i --save bootstrap @popperjs/core

NPM安装Bootstrap

3.2 安装sass

npm i --save-dev sass

NPM安装SCSS

3.3 导入Bootstrap

3.3.1 打开文件【src/main.ts】导入Bootstrap样式文件以及模块

导入Bootstrap代码

4. 再次运行项目并查看

运行项目

查看运行效果

5. 看到按钮变为Bootstrap样式即说明项目初始化成功