WebStrom 构建 Vue 并与 bootstrap 集成
最近因为一个项目需要使用 vue.js ，所以特地上来学习一波。
因为看到官方 vue,js 已经更行到了 3.x 版本了。为了更好的学习新知识（其实是为了偷懒），打算直接从 vue.js 3.0 开始学习。
环境准备
相比直接使用 html 来进行 vuejs 的开发，使用 vue-cli 可以很方便的帮我们一键创建 vue 项目。看起来很高大上是不是？但这背后是需要准备 vue-cli 必备的运行环境的。
这里我是用的 IDE 是 Jetbrains 的 WebStorm。当然，使用 visual studio code 也是可以很方便进行 vue 的开发的。
安装 npm 和 webstorm
这里为大家贴出了最新版的下载地址。下载安装的话很简单，一路 next 基本不会遇到什么问题。这里就不再赘述了。
安装完 node.js 以后，我们试着在终端输入命令：
# 查看 node 版本
node --version
# 查看 npm 版本
npm --version在我们安装 node.js 的时候，其实系统也会一并为我们安装好 npm 包管理器。如果 node 安装完成后，在刚才的终端找不到命令的话，我们还需要手工添加环境变量。
修改 npm 源
由于各种你懂的原因，在没有使用特殊操作的情况下，国内访问 npm 的源会非常慢，为了方便下面的安装。我们可以使用淘宝为我们提供的 npm 源，也可以直接使用淘宝的 cnpm。
使用下面的命令就可以一键将源设为淘宝源：
# 设置 淘宝镜像源
npm config set registry https://registry.npm.taobao.org
# 查看 使用的 镜像源
npm config get registry还原办法：
# 还原办法
npm config set registryhttps://registry.npmjs.org
# 查看 使用的 镜像源
npm get registry 如果设置成功后应该可以看到和我一样的输出：
创建项目
之前我一直没有在 webstorm 找到创建 vue.js 3 的入口，一度以为是 IDE 不支持。于是乎傻傻的尝试了先在 webstrom 创建 vue2.x 的项目，再一路
npm install vue@next更新到 3.x 版本。
但事实上，这个入口是存在的，哈哈哈哈哈。而且我今天才发现，，（所以特地写文记录下
设置项目信息
打开 webstrom，选择新建项目。其中 node 和 vue-cli 的安装路径系统会自动检测
要注意哦，如果要创建 vue3.x 项目的话，这里千万不要勾上。不然系统会自动为我们创建 vue2.x 的项目。
手动选择 vue 版本
这时候，IDE 并不会像选择了自动选项那样，一股脑帮我们把整个项目创建好。而是会在下方的运行窗口里显示选择 vue 版本的选项。
这里使用键盘方向键就可以切换版本。选择后，回车确认即可。
然后我们要做的就是泡杯茶，等待慢吞吞的 npm 在那儿把项目构建完。
不出意外的话，当进度条跑完，就可以看到项目文件下 package.json 文件里的 vue 版本已经显示为 3.0.0
使用
项目构建完成后，系统自动生成的 src 文件夹就是存放代码的地方，并且系统已经为我们创建了一个 helloworld 的模板：
运行下看看：
bootStrap 集成
由于 BootStrap 框架高度依赖 jQuery，而 vue.js 已经可以取代 jQuery 的多数功能。同一个项目中使用两套 js 框架会显得比较冗余。因此，Bootstrap-Vue 就为我们解决了这个问题。
创建 vue2.x 项目
由于 bootstrap-vue 尚未很好的兼容 vue3，至少截止我写这篇文章的时候。所以想要在 vue 项目中使用 bootstrap 最稳妥的方案就是使用 vue2.x 版本进行构建。
这里设置了必要的组件和配置项。关于配置项会在文末有具体的解释。
完成配置后，等待系统的自动构建。此时系统会为我们创建一个普通的 vue-2.0 项目。我们还需要使用 vue-cli 安装 bootstrap-vue 插件。
这里可以看到使用 cli 方式为 vue 项目添加 bootstrap 支持非常发容易。只需要下面一行命令：
# 进入项目目录
vue add bootstrap-vue
安装成功！
这时，我们可以看到 package.json 里面已经有了相关的插件信息。
运行 bootStrap 实例
为了测试 bootStrap 能否正常在 vue 项目中工作。我们使用下面的 navbar 代码模板进行测试。
<template>
<div>
<b-navbar toggleable="lg" type="dark" variant="info">
<b-navbar-brand href="#">NavBar</b-navbar-brand>
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav>
<b-navbar-nav>
<b-nav-item href="#">Link</b-nav-item>
<b-nav-item href="#" disabled>Disabled</b-nav-item>
</b-navbar-nav>
<!-- Right aligned nav items -->
<b-navbar-nav class="ml-auto">
<b-nav-form>
<b-form-input size="sm" class="mr-sm-2" placeholder="Search"></b-form-input>
<b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
</b-nav-form>
<b-nav-item-dropdown text="Lang" right>
<b-dropdown-item href="#">EN</b-dropdown-item>
<b-dropdown-item href="#">ES</b-dropdown-item>
<b-dropdown-item href="#">RU</b-dropdown-item>
<b-dropdown-item href="#">FA</b-dropdown-item>
</b-nav-item-dropdown>
<b-nav-item-dropdown right>
<!-- Using 'button-content' slot -->
<template v-slot:button-content>
<em>User</em>
</template>
<b-dropdown-item href="#">Profile</b-dropdown-item>
<b-dropdown-item href="#">Sign Out</b-dropdown-item>
</b-nav-item-dropdown>
</b-navbar-nav>
</b-collapse>
</b-navbar>
</div>
</template>把这段代码简单的直接粘贴到 App.vue 中：
使用 npm-server 运行的效果：
可以看到 bootstarp 的导航栏已经正确显示在网页中！已经成功在 vue 项目中使用 bootstrap。
vue-cli 配置项说明
# 构建项目
vue create vue-admin
路由模式有两种：hash、histor：
hash - 即地址栏URL中的 # 符号；如：http://www.abc.com/#/hello
history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（怎么去除URL中的“#”号，此方法
需要后端 Apache 或 Nginx 进行简单的路由配置，否则会报404。）注：这两个配置就是解决URL有没有 “#” 号的问题，如果不在意 “#” 号这个东西，就用hash。在意就用 history。
代码规范一般选择 Prettier：
用于第二次快速创建项目：
VUE UI
新版的 VUE 工具为我们提供了一个方便操作的 UI，可以直接通过 VUE UI 快速的安装项目需要的插件，依赖，修改添加一些基本配置。
启动命令：（在项目目录运行）
vue ui
启动后效果如下：
This blog is under a CC BY-NC-ND 4.0 Unported License
本文链接：https://coding.emptinessboy.com/2020/11/%E4%BD%BF%E7%94%A8-WebStrom-%E6%9E%84%E5%BB%BA-Vue3-x-%E9%A1%B9%E7%9B%AE/