Vue-Cli 快速构建项目并引入 Bootstrap、JQuery
Vue-Cli 是一个基于 Vue.js 的项目脚手架工具，能够快速构建项目架构。下面将详解 Vue-Cli 快速构建项目以及引入 Bootstrap、JQuery 的步骤。
需要全局安装 Vue-Cli。使用以下命令安装 Vue-Cli：
```
npm install -g vue-cli
```
安装完成后，使用以下命令生成项目模板：
```
vue init webpack cnm
```
这将生成一个名为 cnm 的项目模板。然后，进入 cnm 文件夹，使用以下命令初始化安装依赖项：
```
npm install
```
安装完成后，使用以下命令启动开发服务器：
```
npm run dev
```
如果一切正常，浏览器将自动弹出一个欢迎页面。如果不自动弹出，可以手动打开 http://localhost:8080。
现在，我们已经成功构建了一个 Vue-Cli 项目。但是，如果我们想要引入一些插件或者框架，例如 JQuery、Bootstrap，如何操作呢？
引入 JQuery：
1. 使用以下命令下载 JQuery 依赖项：
```
npm install jQuery --save-dev
```
2. 找到 build 文件夹下的 webpack.base.conf.js 文件，打开并修改配置。添加以下代码：
```
var webpack = require('webpack');
module.exports = {
// ...
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
})
]
}
```
3. 在入口文件 main.js 中引入 JQuery：
```
import $ from 'jquery'
```
引入 Bootstrap：
1. 修改 webpack.base.conf.js 文件，添加以下代码：
```
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'assets': path.resolve(__dirname, '../src/assets'),
'jquery': "jquery/src/jquery"
}
```
2. 在入口文件 main.js 中引入 Bootstrap：
```
import './assets/css/bootstrap.min.css'
import './assets/js/bootstrap.min'
```
3. 在 assets 文件目录中拷贝 Bootstrap 的各种文件。
现在，我们已经成功引入了 Bootstrap 和 JQuery。如果我们想要验证 Bootstrap 是否引入成功，可以打开 hello.vue 文件，替换组件模板：
```
<template>
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
</template>
```
现在，我们已经成功引入了 Bootstrap 和 JQuery，Vue-Cli 项目已经准备好了！
