2020.7.14：嵌套路由、地址栏 # 、路由器模式 hash，history，abstract、-s -d 定义、单独安装vue-router、导入vue-cli3项目、vue-cli3项目创建与配置

# 今日学习内容

## vue-cli2 嵌套路由

1. 在项目案例效果二的基础上，实现嵌套路由的效果：index.js里面的子组件的，children:[{},{}] ，子路由会带着显示父路由的内容
2. `<router-view></router-view>` 每一个父级要添加的
3. `<router-link to="/">返回首页</router-link>` ——> 导航其他页面

### 地址栏 #， 路由器模式 hash，history，abstract

1. 地址栏中，经常出现 # ，是什么作用，能不能去掉 # ？
2. hash 模式：地址栏包含 # 符号，# 以后的不被后台获取
3. history 模式：具有对 url 历史记录进行修改的功能
4. 在微信支付、分享 url 作为参数传递时，# 不能满足需求
5. history 需要后台配合，处理 404的问题

    - hash： 路径来自于地址栏中 # 后面的值，这种模式兼容性比较好
    - history： 路径来自于真实的 地址路径，旧浏览器不兼容
    - abstract： 路径来自于内存

 ### 生产环境（项目打包，发布阶段）（-s，dependencies），开发环境（编辑阶段）（-d，devDependencies）

1. 生产环境（项目打包，发布阶段）（-s，dependencies）
2. 开发环境（编辑阶段）（-d，devDependencies）
3. 想要加入到开发环境中，必须加 --save-dev 或者是 -D
4. 同样，生产环境 可以写 --save 或 -S
5. APP.vue ——> router>index.js ——> components

 ### 如果没有安装 vue-router，可不可以单独进行安装

1. 基于 webpack 模板创建项目的语法是：

  + vue init webpack prog1

### 怎么导入 vue-cli 项目

1. node,npm,vue ——> npm install

## vue-cli3 创建

### 如果不用 cue-cli 的模板，手动

1. 安装依赖：npm install 或者 cnpm install
2. 初始化：npm init -f 或者 cnpm init -f
3. 安装组件，并查看安装后的内容
4. npm i vue-router -D
5. npm i eslint -D

### cue-cli3 安装/升级

1. 卸载 vue-cli2：npm uninstall vue-cli -g
2. 普通安装 vuecli3：npm install -g @vue/cli
3. 淘宝镜像安装：cnpm install -g @vue/cli

## vue-cli3 图形界面

1. vue ui

## vue-cli3 项目创建

1. 安装 vue-cli3：vue create 项目名(例如：vue-test3)
2. npm ren serve 启动服务

### vue-cli3 配置

1. `? Please pick a preset: (Use arrow keys)` ，选择 默认

  + default (babel, eslint)
  + Manually select features

2. `? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)`
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

3. `? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)` ，选择 y history 
4. `? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)` ，记录的文件，选择 package, json
5. `? Save this as a preset for future projects? (y/N)` ，是否开始创建，选择 y
6. 后面直接默认

 ### Vue-cli3 添加样式的三种方法

1. 通过 class 然后 style 设置
2. 通过 link 外部 css 资源，然后 style scoped （推荐这种）
3. 通过 index.html 里面 link 外部 css


<template>
  <div>
    <router-link class="ys1" to="/a">转向A页面</router-link>
    <router-link class="ys1" to="/b">转向B页面</router-link>
    <router-view></router-view>
  </div>
</template>

<style scoped>
@import "../../public/ys1.css"
.ys1 {
  color: red;
  font-size: 20px;
}
</style>

    <link rel="stylesheet" href="ys1.css" type="text/css">