VUE环境搭建及BootStrap引入

￡神魔★判官ぃ 2023-02-23 12:27 8阅读 0赞

本文主要介绍了VUE搭建以及bootstrap引入。我们都知道，bootstrap是基于jquery开发的，所以在引入bootstrap之前，还应该先引入jquery。接下来，我会以cmd方式和idea方式介绍VUE搭建。验证环境搭建成功后，在引入jquery及bootstrap。

# 1.VUE环境搭建 #

## 1.1基于CMD方式搭建VUE环境 ##

### 1.1.1 前期准备 ###

1）安装node.js软件。我本地版本是v14.3.0

![20200707174639301.png][]

2)确认npm安装没有问题。

![20200707174744763.png][]

### 1.1.2 安装CNPM ###

为了提高我们的效率，可以使用淘宝的镜像：[http://npm.taobao.org/][http_npm.taobao.org]

1)执行如下命令安装cnpm

npm install -g cnpm –registry=https://registry.npm.taobao.org

2)检测cnpm是否安装

如果提示未找到命令，需要配置path环境变量。我的环境变量在C:\\Users\\XXX\\AppData\\Roaming\\npm

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29ZaW5IZVpoaUd1YW5n_size_16_color_FFFFFF_t_70][]

### 1.1.3 全局安装vue-cli ###

cnpm install --global vue-cli

### 1.1.4 安装Vue ###

进入需要创建Vue工程的文件夹。输入一下命令,然后一路确定即可

vue init webpack vuetest

### ![20200707180118420.png][] ###

### 1.1.5 运行项目 ###

npm run dev

![format_png][]

### 1.1.6 验证是否安装成功 ###

在浏览器输入http://localhost:8080，如果弹出vue的界面，则说明安装成功。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29ZaW5IZVpoaUd1YW5n_size_16_color_FFFFFF_t_70 1][]

## 1.2基于IDEA方式搭建VUE环境 ##

### 1.2.1 环境准备 ###

1）安装node.js软件。我本地版本是v14.3.0

2)确认npm安装没有问题。

3) IDEA版本:2018.2

### 1.2.2 安装vue插件(如果IDEA没有安装) ###

1)依次点开菜单【file->setting->plugins】

2)在右侧输入框输入vue.js，如果没有安装此插件，下面是不会显示。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29ZaW5IZVpoaUd1YW5n_size_16_color_FFFFFF_t_70 2][]

3)点击下侧的【Browse repositories...】

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29ZaW5IZVpoaUd1YW5n_size_16_color_FFFFFF_t_70 3][]

4)如下图选项相应的选项，安装，重启idea

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29ZaW5IZVpoaUd1YW5n_size_16_color_FFFFFF_t_70 4][]

### 1.2.2 搭建VUE环境 ###

1)依次点击file->new->project，在弹出框选择左侧Static Web,右侧选择vue.js。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29ZaW5IZVpoaUd1YW5n_size_16_color_FFFFFF_t_70 5][]

2)根据提示，输入项目名称，然后一路向下走，等成功后出现如下界面。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29ZaW5IZVpoaUd1YW5n_size_16_color_FFFFFF_t_70 6][]

3)启动vue,在浏览器输入localhost:8080,弹出上面验证的界面，则部署成功。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29ZaW5IZVpoaUd1YW5n_size_16_color_FFFFFF_t_70 7][]

# 2 BootStrap框架引入 #

bootstrap是基于jquery开发的，所以在引入bootstrap之前，还应该先引入jquery。

## 2.1 jquery引入 ##

### 2.1.1 jquery安装 ###

npm install jquery --save-dev

### 2.1.2 **webpack.base.conf.js配置** ###

1)安装jquery模块

npm install jquery --save

2)在文件顶部增加如下语句

var webpack = require('webpack');

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29ZaW5IZVpoaUd1YW5n_size_16_color_FFFFFF_t_70 8][]

3)在文件【module.exports 的resolve上部添加】中添加如下代码。

plugins: [
    　　new webpack.ProvidePlugin({
    　　　　$:"jquery",
    　　　　jQuery:"jquery",
    　　　　"window.jQuery":"jquery"
    　　})
    ]

文档结构如下:

module.exports = {
      context: path.resolve(__dirname, '../'),
      entry: {
        app: './src/main.js'
      },
      output: {
        path: config.build.assetsRoot,
        filename: '[name].js',
        publicPath: process.env.NODE_ENV === 'production'
          ? config.build.assetsPublicPath
          : config.dev.assetsPublicPath
      },
      plugins: [
        new webpack.optimize.CommonsChunkPlugin('common.js'),
        new webpack.ProvidePlugin({
          jQuery: "jquery",
          $: "jquery"
        })
      ],
      resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
          'vue$': 'vue/dist/vue.esm.js',
          '@': resolve('src'),
        }
      },

## 2.2 引入BootStrap ##

### 2.2.1 安装bootstrap ###

npm install bootstrap3 --save

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29ZaW5IZVpoaUd1YW5n_size_16_color_FFFFFF_t_70 9][]

### 2.2.2 修复框架 ###

通过上面截图，会有提示run `npm audit fix` to fix them, or `npm audit` for details，可选择修复，也可以不修复。

### 2.2.3 修改main.js文件 ###

import 'bootstrap3/dist/css/bootstrap.min.css'
    import 'bootstrap3/dist/js/bootstrap.min'

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29ZaW5IZVpoaUd1YW5n_size_16_color_FFFFFF_t_70 10][]

### 2.2.4 测试bootstrap是否安装成功 ###

1)在src/components/HelloWorld.vue文件中添加如下代码:

<button type="button" class="btn btn-danger">Action</button>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29ZaW5IZVpoaUd1YW5n_size_16_color_FFFFFF_t_70 11][]

2)启动vue。在界面查看按钮的效果，证明bootstrap引入成功。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29ZaW5IZVpoaUd1YW5n_size_16_color_FFFFFF_t_70 12][]

3)当然你可以把main.js文件中的引入bootstrap代码删除，验证bootstrap是否真的引入成功。这里大家可以自行尝试。

[20200707174639301.png]: https://img-blog.csdnimg.cn/20200707174639301.png
[20200707174744763.png]: https://img-blog.csdnimg.cn/20200707174744763.png
[http_npm.taobao.org]: http://npm.taobao.org/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29ZaW5IZVpoaUd1YW5n_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200707175224197.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29ZaW5IZVpoaUd1YW5n,size_16,color_FFFFFF,t_70
[20200707180118420.png]: https://img-blog.csdnimg.cn/20200707180118420.png
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTM4OTgzOS8yMDE4MDUvMTM4OTgzOS0yMDE4MDUwMjExMTM1NzI1OS0yMTE0NzE0NjM5LnBuZw?x-oss-process=image/format,png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29ZaW5IZVpoaUd1YW5n_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200707180220730.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29ZaW5IZVpoaUd1YW5n,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29ZaW5IZVpoaUd1YW5n_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200708100047501.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29ZaW5IZVpoaUd1YW5n,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29ZaW5IZVpoaUd1YW5n_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200708100143434.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29ZaW5IZVpoaUd1YW5n,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29ZaW5IZVpoaUd1YW5n_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200708100244868.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29ZaW5IZVpoaUd1YW5n,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29ZaW5IZVpoaUd1YW5n_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200708100517297.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29ZaW5IZVpoaUd1YW5n,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29ZaW5IZVpoaUd1YW5n_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200708101021218.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29ZaW5IZVpoaUd1YW5n,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29ZaW5IZVpoaUd1YW5n_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20200708101211685.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29ZaW5IZVpoaUd1YW5n,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29ZaW5IZVpoaUd1YW5n_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20200708101722967.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29ZaW5IZVpoaUd1YW5n,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29ZaW5IZVpoaUd1YW5n_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20200708102527722.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29ZaW5IZVpoaUd1YW5n,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29ZaW5IZVpoaUd1YW5n_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20200708104706772.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29ZaW5IZVpoaUd1YW5n,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29ZaW5IZVpoaUd1YW5n_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20200708111919116.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29ZaW5IZVpoaUd1YW5n,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29ZaW5IZVpoaUd1YW5n_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/20200708112008787.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29ZaW5IZVpoaUd1YW5n,size_16,color_FFFFFF,t_70