基础-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生成的模板的有难有易
- 简单业务 => 简易模板
- 复杂业务 => 内容丰富模板
基础-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去做
任务
- 新建一个名为 Menu的组件
- 内容为 一个横向菜单 首页 新闻 体育 音乐
- 菜单高60px 水平居中 字体大小为20px 颜色为 red 背景色 为 #CCCCCC
- 实现组件在页面上展示
基础-案例-效果演示
项目演示 => 功能拆分 => 路由 => 增 修改 删除 更新
基础-案例-导入素材
目标:将项目所需样式导入到项目中
安装 bootstrap固定版本
npm i bootstrap@3.3.7安装完成之后 ,在入口处引入js文件
import "./../node_modules/bootstrap/dist/css/bootstrap.css"; // 引入 import "./assets/index.css"; // 引入index.css
基础-案例-提取公共组件-头部-侧边栏-列表
- 新建vue文件
- 拷贝html静态内容到 template中
- 在app.vue中引入组件
- 注册在app.vue的组件中
- 在app.vue的模板中使用注册组件
基础-案例-路由功能
步骤:
- 安装路由
- 在main.js中引入 路由模块
- 在vue-cli中使用router
- 配置router-link
- router-link上的tag属性 可以指定渲染成什么html元素
- 实例化router 完善路由表
- 路由表需要的组件从外部引入
- 在App.vue中加入路由承载视图（router-view）
1. npm i vue-router // 安装路由模块2. import VueRouter from 'vue-router' // 引用router3. Vue.use(VueRouter) // 使用router4. <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>
基础- 案例-提取路由模块
路径:
- 把路由业务抽取到router.js
- 注意要引入vue
在最后一行把router对象暴露出去
export default router在main.js中引入router.js
基础-案例-列表渲染
步骤：
- 安装axios 插件
- 人物列表组件中引入 axios ,
- 定义data选项定义list列表数据
- 请求列表的方法封装 获取数据赋值list列表
- 在mounted事件(相当于window.onload)中调用获取数据方法
- 根据数据渲染列表
// 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:;">edit</a> <a href="javascript:;">delete</a> </td> </tr>
基础-案例-删除功能
- 注册删除事件
- 因为删除需要id 所以定义删除方法的时候 把id传进去
- 定义删除方法 实现删除逻辑
- 判断删除成功 刷新数据
// 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(); // 刷新数据 } }); } }
基础-案例-渲染新增组件
新建add.vue组件 写入静态内容(拷贝静态资源)
在路由表中配置添加功能的路由
给列表组件的添加按钮 添加hash 以对应路由表
根据业务场景调整页面模板
// 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>
基础-案例-新增功能完善
步骤:添加功能的实现
定义表单数据 和 表单进行绑定
给确定按钮 添加点击事件和方法
实现添加方法的逻辑
判断填报信息是否为空
发送axios请求以post方式 调用 添加的接口地址
- 成功返回状态码是201
成功以后 利用编程式导航 跳转到 ’/heroes‘
//1.添加数据 data() { return { // 定义一个数据对象 存储 姓名和性别 formData: { name: "", // 姓名 gender: "" // 性别 } }; }<!-- 2.给添加确定注册一个事件 --> <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("提交信息不能为空"); } }
基础-案例-渲染编辑组件
注意:由于编辑组件和添加组件页面结构基本一致 可以 直接拷贝添加组件的内容
基础-案例-显示编辑数据
步骤: 实现编辑的显示数据
- 添加编辑路由 注意 由于需要拿到编辑数据的标识 所以需要动态路由
- 给 编辑按钮 添加 跳转路由的属性
- 定义获取英雄数据方法
- 通过$router.params来获取动态id
- 根据id发送axios请求 获取英雄数据
- 在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(); }
基础-案例-编辑-提交功能
步骤:
- 定义提交方法
- 实现提交方法的逻辑
- 判断提交内容非空
- 获取动态参数id
- 发送aixos请求put方式 拼接id 把修改的数据带上
- 成功以后 利用编程式导航回到 “/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中配置统一的**请求路径头**
- 给axios中的baseUrl设置常态值
Axios.defaults.baseURL = "http://localhost:3000"; // 设置共享的方法
- 改造所有的的请求
// 没改造之前 'http://localhost:3000/heroes/' // 设置完常态值 '/heroes/'
基础-案例优化-统一设置激活样式
- router.js 的路由表上面加上
linkActiveClass: "active", // active为bootstrap中的 一个class样式
234
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
