Vue-基础-05-重点

Vue-基础-day05-重点

01-基础-路由-vue-router-嵌套路由

children用法和routes一样

1. $route.params.id  路由配置对象$route -> 获取数据时
2. this.$router.push()  路由实例化对象 ->调方法

02-基础-git-介绍安装

开发中->管理代码->1每次记录代码变化 2 协同开发 3 把代码托管到平台(网站) -> git/svn

版本控制工具(管理代码->合代码):git/svn

1. git命令行工具
2. git 是软件(git官网->找系统32/64->下一步安装)
3. 安装后的结果是: 文件夹->右键->gitbash/git->git指令
   // 检查git版本
   git --version

03-基础-git-基础概念

安装git软件->gitbash(小黑框)->使用git指令

在使用git指令之前 .配置邮箱名字

$ git config --global user.name "xxx"
$ git config --global user.name "delbug"
$ git config --global user.email [email protected]
$ git config --global user.email [email protected]

可以使用git版本控制 -> 管理代码->管理流程:

1. 工作区(项目代码所在的文件夹)->暂存区(临时中转) : git add .
2. 暂存区->本地仓库(项目代码所在文件夹中有个文件)
3. 本地仓库的代码->代码托管平台(网站:github/码云)

04-基础-git-基本操作

1. 新建项目目录 04/code/gitdemos

2. gitdemos右键->gitbash->执行git指令

   // 当前gitdemos项目可以使用git去管理了
   // 效果: 生成.git文件
   git init
   // 检查每个文件的状态(未跟踪/已修改)
   // git status
   // 把工作区代码->暂存区
   git add .
   // 暂存区-> 本地仓库
   git commit -m "注释"

注意: git init 只需要写一次

05-基础-git-远程仓库

代码托管平台(github/码云)

1. 注册

2. 登录

3. 新建远程仓库 (右上角+->new->命名->create)

   // 关联远程仓库
   git remote add origin https://github.com/自己的账号/gitdemos64.git
   // 推送代码
   git push -u origin master

   // 开发功能1 -> 完成
   git add .
   git commit -m "注释1"
   // 开发功能2 -> 完成
   git add .
   git commit -m "注释2"
   // 推送代码
   git push

git基本使用-> git没讲完

06-基础-vue-cli 工具-介绍

vue开发项目-> 本地服务器+less配置+好多辅助开发的工具都需要配置+新建好多文件夹(静态资源的文件/项目入口文件等)->结果: 使用一个vue开发时工具帮助我们生成vue项目目录->vue-cli脚手架

1. vue-cli是vue开发时必用工具
2. vue-cli是全局命令行工具(-g全局安装)

// 全局安装脚手架工具(默认安装最新稳定版3+)
npm install -g @vue/cli
// 检查版本
vue --version

快速安装：

npm install -g @vue/cli  // 安装脚手架
npm install -g @vue/cli-init  安装桥接工具
vue init webpack-simple    //项目文件所在目录的文件夹名字

07-基础-vue-cli-安装和 2-3 版本解释

目的:安装3+版本->使用2版本的指令

// 安装桥接工具
npm install -g @vue/cli-init
// 可以使用2版本的指令
// vue项目根据其复杂程度可以有多种不同的目录
// vue复杂 -> 目录文件多一些
// vue项目简单->少一些文件
// webpack-simple固定写法(简单vue项目目录)

vue init webpack-simple    //项目文件所在目录的文件夹名字

注意: 2和3版本的指令不一样

08-基础-vue-cli-创建项目

1. 来到目录 -> 打开cmd

2. vue init webpack-simple heroes64 {项目名称}

   // 提示
   ? Project name xiangmu1 // 项目名
   ? Project description A Vue.js project // 描述
   ? Author delbug [email protected] // 作者
   ? License MIT // 认证
   ? Use sass? No // sass ->
   cd heroes64 //进入项目文件夹
   npm i //根据package.json下载包
   // 启动开发模式:会把生成的vue项目在一个自带的本地服务器进行运行+ 自动打开浏览器
   // 拓展: 开发模式/测试/上线(生产)
   npm run dev //启动开发模式

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

src

1. main.js 入口文件 : 引入其他包/样式
2. App.vue根组件: 展示其他组件
   1. 一个.vue文件就是一个组件
   2. .vue文件代码三部分:template/script/style
3. assets/静态资源(图片/字体/.css等)

index.html 不需要写代码

.gitignore: git排除忽略文件

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

1. 导入 import Vue from 'vue/路径文件'
   1. import "./样式.css"
2. 导出export default {}

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

在根组件中使用其他组件

1. 引入import
2. 注册components
3. 使用

12-基础-heroes 案例-效果演示

1. 头部组件
2. 侧边栏(导航)
3. 列表组件
   1. 表格展示
   2. 删除/编辑/添加

案例目的:练习vuecli的使用和.vue文件的使用

前提: 布局div+样式css需要准备好

13-基础-heroes 案例-导入素材

1. 02-其他资源/文件夹/index.html->标签结构->App.vue的tempalte
2. css/index.css->src/assets/
3. npm i [email protected]

14-基础-heroes 案例-处理样式文件

webpakc无法识别.ttf文件-->修改webpack.config.js->让识别.ttf文件->重启服务器npm run dev

15-基础-heroes 案例-提取公共组件-头部组件

1. 新建appHeader.vue
2. 把App.vue->template->nav剪切到头部组件

使用组件

1. 导入
2. 注册
3. 使用

16-基础-heroes 案例-提取公共组件-侧边栏组件

和之前头部一样

17-基础-heroes 案例-提取列表组件

同上

18-基础-heroes 案例-路由功能-未提取

安装路由+main.js引入+Vue.use(VueRouter)

1. 侧边栏组件 router-link
2. 根组件App.vue 容器 router-view
3. 创建.vue文件
4. 实例化router
5. 配置
6. 挂载