WebStrom 构建 Vue 并与 bootstrap 集成

Author Avatar
EmptinessBoy 11月 04, 2020
  • 在其它设备中阅读本文章

最近因为一个项目需要使用 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.png

webstorm.png

安装完 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 

如果设置成功后应该可以看到和我一样的输出:

vuejslearn_5.png

创建项目

之前我一直没有在 webstorm 找到创建 vue.js 3 的入口,一度以为是 IDE 不支持。于是乎傻傻的尝试了先在 webstrom 创建 vue2.x 的项目,再一路 npm install [email protected] 更新到 3.x 版本。

但事实上,这个入口是存在的,哈哈哈哈哈。而且我今天才发现,,(所以特地写文记录下

设置项目信息

打开 webstrom,选择新建项目。其中 node 和 vue-cli 的安装路径系统会自动检测

vuejslearn_1.jpg

要注意哦,如果要创建 vue3.x 项目的话,这里千万不要勾上。不然系统会自动为我们创建 vue2.x 的项目。

手动选择 vue 版本

这时候,IDE 并不会像选择了自动选项那样,一股脑帮我们把整个项目创建好。而是会在下方的运行窗口里显示选择 vue 版本的选项。

vuejslearn_2.jpg

这里使用键盘方向键就可以切换版本。选择后,回车确认即可。

然后我们要做的就是泡杯茶,等待慢吞吞的 npm 在那儿把项目构建完。

vuejslearn_6.png

不出意外的话,当进度条跑完,就可以看到项目文件下 package.json 文件里的 vue 版本已经显示为 3.0.0

vuejslearn_3.jpg

使用

项目构建完成后,系统自动生成的 src 文件夹就是存放代码的地方,并且系统已经为我们创建了一个 helloworld 的模板:

vuejslearn_7.png

运行下看看:

vuejslearn_8.png

bootStrap 集成

由于 BootStrap 框架高度依赖 jQuery,而 vue.js 已经可以取代 jQuery 的多数功能。同一个项目中使用两套 js 框架会显得比较冗余。因此,Bootstrap-Vue 就为我们解决了这个问题。

创建 vue2.x 项目

由于 bootstrap-vue 尚未很好的兼容 vue3,至少截止我写这篇文章的时候。所以想要在 vue 项目中使用 bootstrap 最稳妥的方案就是使用 vue2.x 版本进行构建。

Image_2.png

这里设置了必要的组件和配置项。关于配置项会在文末有具体的解释。

完成配置后,等待系统的自动构建。此时系统会为我们创建一个普通的 vue-2.0 项目。我们还需要使用 vue-cli 安装 bootstrap-vue 插件。

Image_3.png

这里可以看到使用 cli 方式为 vue 项目添加 bootstrap 支持非常发容易。只需要下面一行命令:

# 进入项目目录
vue add bootstrap-vue

Image_4.png

安装成功!

Image_5.png

这时,我们可以看到 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 中:

Image_6.png

使用 npm-server 运行的效果:

Image_1.png

可以看到 bootstarp 的导航栏已经正确显示在网页中!已经成功在 vue 项目中使用 bootstrap。

vue-cli 配置项说明

# 构建项目
vue create vue-admin

3.jpg

4.jpg

5.jpg

6.jpg

路由模式有两种:hash、histor:

hash - 即地址栏URL中的 # 符号;如:http://www.abc.com/#/hello

history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。(怎么去除URL中的“#”号,此方法
需要后端 Apache 或 Nginx 进行简单的路由配置,否则会报404。)

注:这两个配置就是解决URL有没有 “#” 号的问题,如果不在意 “#” 号这个东西,就用hash。在意就用 history。

7.jpg

代码规范一般选择 Prettier:

8.jpg

9.jpg

10.jpg

用于第二次快速创建项目:

11.jpg

VUE UI

新版的 VUE 工具为我们提供了一个方便操作的 UI,可以直接通过 VUE UI 快速的安装项目需要的插件,依赖,修改添加一些基本配置。

启动命令:(在项目目录运行)

vue ui

vue-ui.png

启动后效果如下:

start-vue-ui.png

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/