第一部分：Vue-cli脚手架

vue2是对新手很友好的MVVM框架，有完善的官方中文文档，阅读起来也非常容易理解，由浅入

 深，示例完整。同时官方也提供了一个开箱即用的 vue-cli 帮我们生成一个完整的项目框架

vue.js 著名的全家桶系列, 包含了， vue-router, vuex， axios，再加上 vue-cli 就是一个从 路由，数据流管理，http请求都有的核心项目，vue 社区的丰富资源，也是满足了我们日常开发中的需求了。

Vue-cli脚手架就是Npm的第三方包，全局安装即可

设置npm的淘宝镜像
npm config set registry  https://registry.npm.taobao.org/  #设置淘宝镜像地址
npm config get registry  #查看镜像地址

全局安装 vue-cli(确保安装了node)

• 在命令行中输入 npm install -g vue-cli

• 安装完成后，检验是否安装成功，输入 vue-V (注意：这里是大写的 “V”)，如果出现版本号，则说明安装成功。

用 vue-cli 来构建项目。

步骤

1. 创建项目
2. 选择模板
3. 安装依赖
4. 启动项目

1.首先，在D盘新建一个文件夹作为项目的存放地，然后cd到目录下，输入命令，创建项目

# vue create命令是由@vue/cli提供的，vuecli-demo是文件夹名
vue create vuecli-demo

 2.通过键盘的上下箭头选择合适的模板，Manually select features 手动选择配置。选错ctrl+c。

3.我选择了vue2的默认配置（npm run serve //启动项目）

cd vuecli-demo20220513  //我创建的项目名称

npm run serve     //启动项目

npm run build      //项目打包（项目做完用）

4.输入第三步的两个命令，看到黑窗口如下，说明项目启动成功

 若选择自定义配置

1.选择自定义创建

2.选中vue-router,vuex,css Pre-processors选项

3.选择vue3.0版本或者vue2版本

4.选择hash模式的路由

 5.选择less作为预处理器

 6.选择 standard 标准代码风格

 7.保存代码校验代码风格，代码提交时候校验代码风格

 

 8.依赖插件或者工具的配置文件分文件保存

 9.是否记录以上操作，选择否

 10.安装完毕

初始化项目目录结构

 vuecil-demo          # 项目目录
    ├── node_modules    # 项目依赖的第三方包
    └── public           # 静态文件目录
       ├── favicon.ico    # 浏览器小图标
       └── index.html     # 单页面的html文件(网页浏览的是它)
    ├── src              # 业务文件夹=》写代码
       ├── assets        # 静态资源
           └── logo.png     # vue的logo图片
       ├── components    # 组件目录
           └── HelloWorld.vue    # 欢迎页面vue代码文件 
       ├── App.vue       # 整个应用的根组件
       └── main.js        # 入口js文件
    ├── package.json     # 描述项目及项目
    ├── .gitignore      # git提交忽略配置
    ├── babel.config.js     # babel配置 
    ├── README.md       # 项目说明
       └── package-lock.json    # 项目包版本锁定和下载地址

 项目打包注意点

项目打包：

npm run build 

在webpack打包时，会在项目目录创建dist/static，在该目录存放所有的静态资源，同时还会在

dist/static目录下分别创建目录 img，css，js等目录存放不同类型的静态资源。对于assets目录

下的文件，会分类放入不同的文件夹下。

devServer

目标：使用vue.config.js覆盖webpack的配置（webpack.config.js文件）。

操作：项目根目录下新建vue.config.js（和src同级）补充devServer

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer:{
  host: 'localhost',   // ip 本地
  open: true,          // 配置自动启动浏览器
  port: 3000           // 设置端口号
 },
  lintOnSave: false // 关闭eslint
})

第二部分：Vue-router路由基本使用

说明：如果使用vue-cli创建项目，没有选择路由插件，需要单独安装和配置

 由于Vue在开发时对路由支持的不足，于是官方补充了vue-router插件。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，实际上就是组件的切换。路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是我们WebApp的链接路径管理系统

一.安装

npm install vue-router

二.创建组件

如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能，src文件目录下会

有一个router文件夹，此处就是编写路由组件的地方。在src/router/index.js，这个文件就是路由的

核心文件：

vue路由流程如下

 编写路由

第一步：// 需求：创建路由规则文件.js

在此我写了一级路由和二级嵌套路由

src文件目录下会有一个router文件夹，此处就是可以创建编写路由规则文件的地方

//需求：创建路由规则文件夹
//第一步：导入vue
import Vue from "vue";
//第二步：导入路由插件
import VueRouter from "vue-router";
// 第三步：使用插件
Vue.use(VueRouter)
// 第四步：导入需要单页面切换的子组件
import MyRouterone from "../嵌套路由/stair/MyRouterone.vue";
import MyRoutertow from "../嵌套路由/stair/MyRoutertow.vue";
import MyRoutertree from "../嵌套路由/stair/MyRoutertree.vue";
// 如果有嵌套路由的情况：导入二级嵌套路由
import childrenone from "../嵌套路由/stair/children/childrenone.vue";

// 第五步：创建路由规则
const router = new VueRouter({
 routes: [
  /*
  一级路由扩展知识
  { 
   进入 /a 路径，自动跳转到 /b
   path: '/a', 
   redirect: '/b'
   },
   */
   {
    // 第一层路由请求的路径path以'/'开头，
    // component:对应装入的组件
    // 当浏览器访问 http://localhost:8080/#/MyRouterone时
    // 装入组件 MyRouterone
    path: "/MyRouterone",
    name: "MyRouterone",
    component: MyRouterone,
    // 嵌套路由的使用语法:配置二级路由
    // 语法：children:[{}]
    children: [
      {
        path: '/childrenone',
        name: 'childrenone',
        component: childrenone
      },
      /*
      二级路由扩展知识
      {
      path不以/开头，表示访问地址要加上上级路由的地址。localhost:3000/#/MyRouterone/usa
      path: 'usa', 
      component: childrenone
      },
      {
      path为空，表示 http://localhost:3000/#/sport时，默认展示父组件 + childrenone
      path:"", 
      component: childrenone
      },
      */
      ]
    },
    /*
    这里写一下params传值
    语法：
    路由中写法：path:"/MyRoutertow/:id/:name"
    组件中写法：<router-link to="/MyRoutertow/abc/bcd">[text]</router-link>
    子组件查看参数：params:{id:abc,name:bcd}
    */
    /*
    这里写一下query传参
    组件中：<router-link to="/MyRoutertow？name=张三&age=18">[text]</router-link>
    */
    {
      path: "/MyRoutertow/:id",
      name: 'MyRoutertow',
      component: MyRoutertow
    },
    {
      path: "/MyRoutertree",
      name: 'MyRoutertree',
      component: MyRoutertree
    },
    {
      // 所有路由都不匹配时，默认匹配*，显示页面404
      path: '*',
      component: Page404//写一个404页面跳转
    }
  ]
})

// 第六步：导出
export default router
// 创建路由完成

第二步：创建实例

需求：需要把写好的路由放置在main.js文件夹的出口，好让子组件被父组件调用

在src/main.js文件中创建一个vue的实例

import Vue from 'vue'
// import App from './App.vue'
// 需求：需要把写好的路由放置在main.js文件夹的出口，好让子组件被父组件调用
// 第一步：导入父组件
import App from './嵌套路由/Router-App.vue'
// 第二步：导入创建好的路由规则文件夹
// 路由规则文件夹，想叫啥叫啥，我就叫嵌套路由.js
import router from "./router/嵌套路由.js";

Vue.config.productionTip = false

new Vue({
  // 第三步：放在new Vue中
  router: router,
  render: h => h(App),
}).$mount('#app')

第三步：router-link制作导航

第一点：router-link的基本使用

1.router-link 是一个组件，它默认会被渲染成一个带有链接的a标签，通过to属性指定链接地址。

注意：被选中的router-link将自动添加一个class属性值.router-link-active。

<router-link to="/">[text]</router-link>

• to：导航路径，要填写的是你在router/index.js文件里配置的path值，如果要导航到默认首页，只需要写成 to="/" ，
• [text] ：就是我们要显示给用户的导航名称。

第二点：router-link传递参数

query参数，格式：/page1?a=1&b=2

<router-link :to="/page1?a=1&b=2">[text]</router-link>

 params参数，

<router-link to="/news/123">[text]</router-link>

 例如在路由规则文件夹的path路径中写入：/news/:id

可以匹配如下地址:

 http://localhost:8080/#/news       ==》 无法匹配

 http://localhost:8080/#/news/123   ==》 id就是123

 http://localhost:8080/#/news/3456  ==》 id就是3456

params传参细节

//根组件里的标签to="/news/123/456"
<router-link to="/news/123/456">[text]</router-link>
//router/index.js 这里指路由规则文件里面需要写两个参数
path: "/news/:id/:name"(id,name就是属性名)

参数值会被设置到this.$route.params 在子组件访问，
此时子组件的值为{id:123,name:456}

当匹配到一个路由时，参数值会被设置到this.$route.params，可以在每个组件内使用。

第四步：router-view 用于渲染匹配到的组件。

编程式导航

API

// 跳转页面不传参
this.$router.push('/路由路径')
this.$router.push({path: '路由路径'})
this.$router.push({name: '路由名称'})

// 跳转并query传参-方式1
this.$router.push("/路由路径?参数1=值1&参数2=值2")
// 跳转并query传参-方式2
this.$router.push({
  path: "路由路径",
  query: {
      "参数1":值1,
      "参数2":值2
  }
})

// 跳转并params传参-方式1
this.$router.push("/路由路径/值1/值2")
// 跳转并params传参-方式2
this.$router.push({
  name: "路由名称",
  params: {
      "参数1":值1,
      "参数2":值2
  }
})


// 后退
 路由跳转 ： this.$router.push()
​ 路由替换 : this.$router.replace()
​ 后退： this.$router.back()
​ 前进 ：this.$router.forward()

vue $router和$route的区别

vue-router中经常会操作的两个对象route和router两个。

1、$route对象
$route对象表示当前的路由信息，包含了当前 URL 解析得到的信息。包含当前的路径，参数，query对象等。

2、$router对象
$router对象是全局路由的实例，是router构造方法的实例。

相同的路由组件如何重新渲染？

开发人员经常遇到的情况是，多个路由解析为同一个Vue组件。问题是，Vue出于性能原因，默认情况下共享组件将不会重新渲染，如果你尝试在使用相同组件的路由之间进行切换，则不会发生任何变化。

const routes = [
  {
    path: "/a",
    component: MyComponent
  },
  {
    path: "/b",
    component: MyComponent
  },
];

如果依然想重新渲染，怎么办呢？可以使用key

<template>
    <router-view :key="$route.path"></router-view>
</template>