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
- git命令行工具
- git 是软件(git官网->找系统32/64->下一步安装)
- 安装后的结果是: 文件夹->右键->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 xxx@example.com
$ git config --global user.email 81692059@qq.com
可以使用git版本控制 -> 管理代码->管理流程:
- 工作区(项目代码所在的文件夹)->暂存区(临时中转) : git add .
- 暂存区->本地仓库(项目代码所在文件夹中有个文件)
- 本地仓库的代码->代码托管平台(网站:github/码云)
04-基础-git-基本操作
新建项目目录 04/code/gitdemos
-
gitdemos右键->gitbash->执行git指令
// 当前gitdemos项目可以使用git去管理了
// 效果: 生成.git文件
git init
// 检查每个文件的状态(未跟踪/已修改)
// git status
// 把工作区代码->暂存区
git add .
// 暂存区-> 本地仓库
git commit -m "注释"
注意: git init 只需要写一次
05-基础-git-远程仓库
代码托管平台(github/码云)
注册
登录
-
新建远程仓库 (右上角+->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脚手架
- vue-cli是vue开发时必用工具
- 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-创建项目
来到目录 -> 打开cmd
-
vue init webpack-simple heroes64 {项目名称}
// 提示
? Project name xiangmu1 // 项目名
? Project description A Vue.js project // 描述
? Author delbug 81692059@qq.com // 作者
? License MIT // 认证
? Use sass? No // sass ->
cd heroes64 //进入项目文件夹
npm i //根据package.json下载包
// 启动开发模式:会把生成的vue项目在一个自带的本地服务器进行运行+ 自动打开浏览器
// 拓展: 开发模式/测试/上线(生产)
npm run dev //启动开发模式
09-基础-vue-cli-项目目录解释
src
- main.js 入口文件 : 引入其他包/样式
- App.vue根组件: 展示其他组件
- 一个.vue文件就是一个组件
- .vue文件代码三部分:template/script/style
- assets/静态资源(图片/字体/.css等)
index.html 不需要写代码
.gitignore: git排除忽略文件
10-基础-回顾-ES6 模块导入和导出
- 导入 import Vue from 'vue/路径文件'
- import "./样式.css"
- 导出export default {}
11-基础-vue-cli-简化模板代码
在根组件中使用其他组件
- 引入import
- 注册components
- 使用<hello-word>
12-基础-heroes 案例-效果演示
- 头部组件
- 侧边栏(导航)
- 列表组件
- 表格展示
- 删除/编辑/添加
案例目的:练习vuecli的使用和.vue文件的使用
前提: 布局div+样式css需要准备好
13-基础-heroes 案例-导入素材
- 02-其他资源/文件夹/index.html->标签结构->App.vue的tempalte
- css/index.css->src/assets/
- npm i bootstrap@3.3.7
14-基础-heroes 案例-处理样式文件
webpakc无法识别.ttf文件-->修改webpack.config.js->让识别.ttf文件->重启服务器npm run dev
15-基础-heroes 案例-提取公共组件-头部组件
- 新建appHeader.vue
- 把App.vue->template->nav剪切到头部组件
使用组件
- 导入
- 注册
- 使用
16-基础-heroes 案例-提取公共组件-侧边栏组件
和之前头部一样
17-基础-heroes 案例-提取列表组件
同上
18-基础-heroes 案例-路由功能-未提取
安装路由+main.js引入+Vue.use(VueRouter)
- 侧边栏组件 router-link
- 根组件App.vue 容器 router-view
- 创建.vue文件
- 实例化router
- 配置
- 挂载
