【Vue】使用vue-cli与路由的基本使用

基础-vue-cli 工具-介绍

• 介绍: vue-cli是一个辅助开发工具=> 代码编译 + 样式 + 语法校验 + 输出设置 + 其他 …
• 作用: 可以为开发者提供一个**标准的项目开发结构** 和配置 开发者不需要再关注其他
• vue-cli 一个**命令行工具,最新版本也支持图形化**操作,可快速搭建大型网页应用

基础-vue-cli-安装

**说明:**vue-cli本质上是一个npm包,也需要通过npm去安装下载

npm i -g @vue/cli  // 全局安装脚手架  默认安装的最新版本 4.0+

安装完成后 可通过 **vue命令**来进行检查 脚手架是否安装成功

查看版本

vue -V  // 查看脚手架版本号
or 
vue --version // 和上面等价 

问题: 默认安装的4.0+ 版本,但是企业很多还在用2.0+版本 怎么破?

执行以下命令就可以 2.0 和 4.0 兼得

2.0和4.0创建项目的命令是不一样的

npm install -g @vue/cli-init  // 安装桥接工具 将2.0的功能补齐到目前的脚手架上

注意: vue生成的模板的有难有易

• 简单业务 => 简易模板 (webpack-simple)
• 复杂业务 => 内容丰富模板(webpack)

基础-vue-cli-创建项目

**注意:**文件目路径不能有中文

创建: 采用 cli 2.0的特性 (生成简易模板)

# 1.heroes 创建的项目名称
$ vue init webpack-simple heroes //  webpack-simple 为模板名称 固定写法
# 2.切换到当前目录
$ cd  heroes 
# 3.安装依赖
$ npm install  
# 4.启动运行项目
$ npm run dev

**创建：**采用 cli 4.0 特性 (两种 默认 /选填)

# 4.0下创建项目
$ vue create heroes // create(创建) 为关键字
# 切换到当前目录
$ cd  heroes 
# 在开发模式下 启动运行项目
$ npm run serve

注意 4.0 +创建项目时 有两种模式, 一种**默认模式**, 一种选择模式,

默认模式:一种标准的模板

选择模式: 可以根据自己的需求选择需要的工具和模式(用空格选择是否选中,用回车进入下一步)

配置:

在vue.config.js中直接配置，例如

module.exports = {
lintOnSave: true,					// 在保存代码的时候开启eslint代码检查机制
devServer: {							// 实时保存、编译的配置段
open:true,							// 自动开启浏览器
port: 12306							// 服务运行端口
}
}

基础-vue-cli-项目目录解释

|-- node_modules			// 项目需要的依赖包
|-- public					// 静态资源存储目录
|   |-- index.html			// 项目主容器文件
|   |-- favicon.ico			// 项目默认索引图片
|-- src
|   |-- assets		// 放置一些静态资源文件，例如图片、图标、字体 
|   |-- components			// 公共组件目录
|   |-- views				// 业务组件目录
|   |-- App.vue				// 顶层根基路由组件
|   |-- main.js				// 主入口文件
|   |-- router.js			// 路由配置文件
|-- .editorconfig			// 代码规范配置文件
|-- .eslintrc.js			// eslint代码规范检查配置文件
|-- .gitignore				// git上传需要忽略的文件格式
|-- babel.config.js			// babel配置文件
|-- package-lock.json		// 依赖包版本锁定文件
|-- package.json			// 项目基本信息配置文件
|-- postcss.config.js		// css预处理器配置文件
|-- vue.config.js//webpack 配置文件(与webpack.config.js作用一致)

基础-回顾-ES6 模块导入和导出

• require 和 Es模块化的区别

基础-vue-cli-简化模板代码

介绍: 在cli开发模式下, 一个*.vue文件就是一个组件

• template 组件的页面结构 代表它的 html 结构

• 必须在里面放置一个 html 标签来包裹所有的代码

• 我们在其他地方写好了一个组件，然后就可以在当前template中引入

• script 组件的逻辑结构及数据对象

• style 组件的样式

• 就是针对我们的 template 里内容出现的 html 元素写一些样式

注意: vue-cli的作用就是让我们把精力放在业务编码上,一切准备的工作交给vue-cli去做

基础-案例-效果演示

项目演示 => 功能拆分 => 路由 => 增 修改 删除 更新

基础-案例-导入素材

目标:将项目所需样式导入到项目中

• 安装 bootstrap固定版本

  npm i  bootstrap@3.3.7
  

• 安装完成之后 ,在入口处引入js文件

  import "./../node_modules/bootstrap/dist/css/bootstrap.css"; // 引入 
  import "./assets/index.css"; // 引入index.css
  

基础-案例-提取公共组件-头部-侧边栏-列表

1. 新建vue文件
2. 拷贝html静态内容到 template中
3. 在app.vue中引入组件
4. 注册在app.vue的组件中
5. 在app.vue的模板中使用注册组件

基础-案例-路由功能

步骤:

1. 安装路由
2. 在main.js中引入 路由模块
3. 在vue-cli中使用router
4. 配置router-link
   • router-link上的tag属性 可以指定渲染成什么html元素
5. 实例化router 完善路由表
   • 路由表需要的组件从外部引入
6. 在App.vue中加入路由承载视图（router-view）

1. npm i vue-router // 安装路由模块

2. import VueRouter from 'vue-router' // 引用router

3. Vue.use(VueRouter) // 使用router

4. <router-link tag="li" to="/heroes">
        <a href="#">英雄列表a>
   router-link>
    ....

5.
import AppList from "./app-list.vue";
import Foo from "./foo.vue";
import Bar from "./bar.vue";
const router = new VueRouter({
  // 路由表
 routes: [
     { path: "/heroes", component: AppList },
     { path: "/foo", component: Foo },
     { path: "/bar", component: Bar }
 ]
}); 
// router加入实例
new Vue({
  el: '#app',
  render: h => h(App),
  router
})

6.
<div>
<AppHeader>AppHeader>
<div class="row">
<AppSilder>AppSilder>
 <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
     
     <router-view>router-view>
div>
div>
div>

基础- 案例-提取路由模块

路径:

1. 把路由业务抽取到router.js

• 注意要引入vue

2. 在最后一行把router对象暴露出去

   export default router
   

3. 在main.js中引入router.js

基础-案例-列表渲染

步骤：

1. 安装axios 插件
2. 人物列表组件中引入 axios ,
3. 定义data选项定义list列表数据
4. 请求列表的方法封装 获取数据赋值list列表
5. 在mounted事件(相当于window.onload)中调用获取数据方法
6. 根据数据渲染列表

// 1.安装axios 插件 
npm i axios 

// 2.引入axios

// 3.定义数据
data() {
 return {
 	list: []
 };
}

// 4.请求人物列表的方法封装
loadData() {
 //restful规则
 axios.get("http://localhost:3000/heroes").then(result => {
 	this.list = result.data;
 })
}

// 5.实例完成事件
mounted() {
	this.loadData();
},

// 6.根据数据渲染列表
<tr v-for="item in list" :key="item.id">
    <td>{{item.id}}td>
    <td>{{item.name}}td>
    <td>{{item.gender}}td>
    <td>
        <a href="javascript:;">edita>   
        <a href="javascript:;">deletea>
    td>
tr>

基础-案例-删除功能

1. 注册删除事件

• 因为删除需要id 所以定义删除方法的时候 把id传进去

2. 定义删除方法 实现删除逻辑
3. 判断删除成功 刷新数据

// 1.注册删除事件 
<a href="javascript:；" @click="delItem(item.id)">删除a>

// 2.定义删除方法
// id为要删除id的方法
delItem(id) {
 if (confirm("确认删除此条数据")) {
     axios.delete("http://localhost:3000/heroes/" + id).then(result => {
          // 3. 判断删除状态 是否成功
         if (result.status === 200) {
           this.getData(); // 刷新数据
         }
     });
 }
}

基础-案例-渲染新增组件

1. 新建add.vue组件 写入静态内容(拷贝静态资源)

2. 在路由表中配置添加功能的路由

3. 给列表组件的添加按钮 添加hash 以对应路由表

4. 根据业务场景调整页面模板

// 2.在路由表中配置添加功能的路由
{ path: "/add", component: Add }  // 引入组件 配置路由

// 3.给列表组件的添加按钮  添加hash  以对应路由表 
<a class="btn btn-success" href="#/add">添加</a>

// 4.根据业务场景调整页面模板
<div>
<h2 class="sub-header">添加人物h2>
<form>
<div class="form-group">
<label for="exampleInputEmail1">用户名label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入姓名" />
div>
<div class="form-group">
<label for="exampleInputPassword1">性别label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入性别" />
div>
<button type="submit" class="btn btn-success">添加人物button>
form>
div>

基础-案例-新增功能完善

步骤: 添加功能的实现

1. 定义表单数据 和 表单进行绑定

2. 给确定按钮 添加点击事件和方法

3. 实现添加方法的逻辑

4. 判断填报信息是否为空

5. 发送axios请求以post方式 调用 添加的接口地址

   • 成功返回状态码是201

6. 成功以后 利用编程式导航 跳转到 ’/heroes‘

//1.添加数据
data() {
 return {
 // 定义一个数据对象 存储 姓名和性别
     formData: {
         name: "", // 姓名
         gender: "" // 性别
     }
 };
} 

<button type="submit" class="btn btn-success" @click="addHero">确定button>

// 3.确定按钮方法
addHero() {
// 4.判断填报信息是否为空
if (this.formData.name && this.formData.gender) {
    // 5.发送请求 添加人物信息
    axios.post("http://localhost:3000/heroes", this.formData)
    .then(result => {
    	// 注意这里添加成功的状态码 是 201
    	if (result.status === 201) {
             // 6. 添加成功之后 要跳转回列表页
             // 编程式导航
 			this.$router.push({ path: "/heroes" });
		} else {
 			alert("添加失败");
		}
	});
} else {
	alert("提交信息不能为空");
}
}

基础-案例-渲染编辑组件

注意: 由于编辑组件和添加组件页面结构基本一致 可以 直接拷贝添加组件的内容

基础-案例-显示编辑数据

步骤: 实现编辑的显示数据

1. 添加编辑路由 注意 由于需要拿到编辑数据的标识 所以需要动态路由
2. 给 编辑按钮 添加 跳转路由的属性
3. 定义获取英雄数据方法
   1. 通过$router.params来获取动态id
   2. 根据id发送axios请求 获取英雄数据
4. 在mounted事件中 调用加载英雄方法

// 1.添加动态路由
{ path: "/edit/:id", component: Edit } // 编辑组件 动态路由

// 2.编辑按钮添加跳转的属性
<router-link :to="{path:'/edit/'+item.id }">编辑router-link>

// 3.通过id获取英雄数据
loadHero() {
	const { id } = this.$route.params; // 通过参数获取id
 if (id) {
     //判断id
     axios.get("http://localhost:3000/heroes/" + id).then(result => {
         this.formData = result.data; // 获取数据并赋值给表单对象
     });
 }
}

// 4.调用获取英雄数据的方法
mounted() {
	this.loadHero();
}

基础-案例-编辑-提交功能

步骤:

1. 定义提交方法
2. 实现提交方法的逻辑
   1. 判断提交内容非空
   2. 获取动态参数id
   3. 发送aixos请求put方式 拼接id 把修改的数据带上
   4. 成功以后 利用编程式导航回到 “/heroes”

// 编辑英雄
editHero() {
    if (this.formData.name && this.formData.gender) {
        const { id } = this.$route.params; 
        axios
            .put("http://localhost:3000/heroes/" + id, this.formData)
            .then(result => {
            if (result.status === 200) {
                this.$router.push({ path: "/heroes" });
            } else {
                alert("编辑失败");
            }
        });
    } else {
        alert("提交内容不能为空");
    }
}

基础-案例优化-axios 统一导入

1 在入口main.js文件中引入axios,并赋值给全局Vue对象的原型

Vue.prototype.$http = Axios; //所有的实例都直接共享拥有了 这个方法

2 调用接口时 采用 实例.属性的方式即可调用

// 把以前用到axios的地方 换成 this.$http

基础-案例优化-设置baseUrl

步骤: axios中配置统一的**请求路径头**

1. 给axios中的baseUrl设置常态值

Axios.defaults.baseURL = "http://localhost:3000"; // 设置共享的方法

2. 改造所有的的请求

// 没改造之前
'http://localhost:3000/heroes/'
// 设置完常态值
'/heroes/'

基础-案例优化-统一设置激活样式

• router.js 的路由表上面加上

linkActiveClass: "active", // active为bootstrap中的 一个class样式