创建vuecli工程&&vuecli使用bootstrap

1、创建vue-cli工程

1、在命令行下进入到工作空间文件夹中，输入如下命令：
vue create jtlc_vuecli_01_dcb（注意：工程名必须全部小写）

2、选择预设模板。这里选择“Manually select features”（手动选择特征）
3、通过 ↑↓ 箭头选择依赖，按 “空格” 选中，按 “a” 全选，按 “i” 反选。
Babel：转码器，可以将ES6代码转为ES5代码，可兼容不支持ES6的浏览器。
TypeScript：是JavaScript的超集（.ts文件），包含并扩展了 JavaScript 的语法。需要被编译输出为 JavaScript在浏览器运行。
Progressive Web App (PWA) Support：渐进式Web应用程序
Router ：vue-router（vue路由）
Vuex ：vuex（vue的状态管理模式）
CSS Pre-processors ：CSS 预处理器（如：less、sass）
Linter / Formatter：代码风格检查和格式化（如：ESlint）
Unit Testing ：单元测试（unit tests）
E2E Testing ：e2e（end to end） 测试
第一次创建工程时，可以只选择Babel和Router即可
4、选择是否使用history 形式的路由，也就是询问路径是否带 # 号，这里选择 n。
5、询问将依赖文件放在独立文件中，还是package.json中：为了保持工程配置文件的整洁性，这里选择“In package.json”
6、询问是否将当前选择保存以备下次使用。这里选择“n”
7、接下来耐心等待安装：最后出现：

8、输入：npm run serve 启动工程

9、启动成功

10、在浏览器中测试：http://localhost:8080

11、最后在Hbuilder里左侧项目栏空白处右键导入创建的工程就完成了！

2、vuecli使用bootstrap

1）安装jquery：cnpm install jquery --save
2）新建的vue.config.js文件中添加一下代码，这样jQuery的配置就完成了
/*
*Vue-CLI项目的核心配置文件
*/
const webpack = require(“webpack”);

module.exports = {
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$: “jquery”,
jQuery: “jquery”,
“window.jQuery”: “jquery”,
Popper: [“popper.js”, “default”]
})
]
}
};
3）安装bootstrap：cnpm install bootstrap --save
4）在main.js中导入bootstrap：
// 导入bootstrap
import “bootstrap”
import “bootstrap/dist/css/bootstrap.css”
5）安装font-awesome：cnpm i font-awesome
在main.js中导入：import ‘font-awesome/css/font-awesome.min.css’
6）还需引入依赖
cnpm install --save @popperjs/core