前端知识|Vue指令综合案例——汽车品牌管理前端|node.js|bootstrap|vscode|vue.j

目录
项目源代码：
一、vue-devTools安装
二、案例功能实现
1、新建项目（ui创建）
2、cnpm导入项目依赖库
3、删除不需要的代码结构:
4、修改代码结构
5、添加汽车品牌
插件安装
bootstrap的提示功能
添加bootstrap样式
6、删除汽车品牌
7、查询汽车品牌(过滤)

项目源代码： Vue指令综合案例——汽车品牌管理（项目实战）-Node.js文档类资源-CSDN下载

一、vue-devTools安装 Vue.js devtools是基于google chrome浏览器的一款调试vue.js应用的开发者浏览器扩展，可以在浏览器开发者工具下调试代码,安装方式：

在线安装(需要)：chrome商店直接搜索安装
离线安装:

将已经下载解压的vue.js.devTools插件目录手动加载到chrome浏览器的扩展程序中 ~~~注：这里可以找到我博客中资源，自行下载，内附安装教程

下载地址： vue-devTools安装谷歌浏览器拓展程序-Node.js文档类资源-CSDN下载

安装插件：

文章图片

文章图片

扩展程序中出现如下，则安装成功：

文章图片

二、案例功能实现 1、新建项目（ui创建） vue创建项目两种方式：

create+项目名
vue ui

第一种create创建，参考VS code创建Vue项目方法1：create+项目_Siobhan. 明鑫的博客-CSDN博客

接下来我们使用第二种创建：
1.打开vs code，在终端命令窗口输入：vue ui。如下：

文章图片

2.此时会自动跳转到打开【vue项目仪表盘】

文章图片

选择【vue项目管理器】

文章图片

文章图片

稍等片刻，就ok了！！！

文章图片

此时创建完成~~~~~
2、cnpm导入项目依赖库为了使用前台布局，我们此时需要导入bootstrap，方便快速编写案例的前台界面布局

cnpm i bootstrap -D

文章图片

*: 凡是在 npm安装依赖的时候出现上图所示的警告，表示当前这个库依赖的库没有安装上，只要将要求的依赖库安装上即可。

cnpm i @popperjs/core@^2.11.5 -D

缺少什么版本的下载什么

文章图片

cnpm常用安装命令的区别:

npm i module_name -S = > npm install module_name --save 写入到 dependencies 对象

npm i module_name -D => npm install module_name --save-dev 写入devDependencies 对象

npm i module_name -g 全局安装

npm i module_name 安装到当前目录的nodu_modules,但不会写入到dependencies和devDependencies中，在项目开发时，不建议使用

注意：vscode安装bootstrap插件，在编写bootstrap组件元素时可以给出智能提示, 提高效率

3、删除不需要的代码结构: 删除assets、components、APP.vue

文章图片

删完结构如下：

文章图片

4、修改代码结构

文章图片

修改vue.config.js配置，使得能够使用我们的方式导入vue库

文章图片

5、添加汽车品牌 html 中输入 bs3-table 即可快速创建 bootstrap 表格元素，输入 bs3 panel可以快速创建简单面板 :提供输入汽车品牌和名称，点击添加数据。在这里可能大家会出现输入【bs3-table】不自动弹出提示，接下来我们需要安装一些插件：

插件安装

打开vscode，选择扩展功能（ctrl+shit+x），搜索bootstrap 3 snippets 和bootstrap 4 snippets，安装后，重新加载。

文章图片

bootstrap的提示功能

在html文件中，输入bs3-* 可以弹出提示，而且是以组件的形式弹出。

文章图片

注意，修改package.json 中的调试方法。修改如下：（当我们输入启动命令时自动打开页面）

文章图片

同时注意修改rules：（规避vm is not used ）

文章图片

index.html如下：

- 锐客网 ID Name Ctime Operation {{item.id}} {{item.name}} {{item.ctime}} 删除

ID	Name	Ctime	Operation
{{item.id}}	{{item.name}}	{{item.ctime}}	删除

main.js如下：

import Vue from "vue"var vm = new Vue({ el:"#app", data:{ brandlist: [ {id:1,name:"奔驰",ctime:new Date()}, {id:2,name:"奥迪",ctime:new Date()} ] }, methods:{ del(id){ alert(id); } }})

此时使用命令：npm run dev