【vue】vue中的路由vue-router，vue-cli脚手架详细使用教程

在这里插入图片描述

✨✨ 欢迎大家来到景天科技苑✨✨

🎈🎈 养成好习惯，先赞后看哦~🎈🎈

🏆 作者简介：景天科技苑
🏆《头衔》：大厂架构师，华为云开发者社区专家博主，阿里云开发者社区专家博主，CSDN新星创作者，掘金优秀博主，51CTO博客专家等。
🏆《博客》：Python全栈，前后端开发，人工智能，js逆向，App逆向，网络系统安全，数据分析，Django，fastapi，flask等框架，linux，shell脚本等实操经验，网站搭建等分享。

所属的专栏：前端零基础，实战进阶教学
景天的主页：景天科技苑

文章目录

vue-router的使用
- vue2的处理方法
vue-cli脚手架
- 安装liunx版本的nodejs
- 安装nodejs
- 常用的nvm命令
- npm
- 安装Vue-cli
- 使用Vue-CLI初始化创建项目
- - 生成项目目录
  - 项目目录结构

vue-router的使用

vue就是我们前面学习的vue基础，vue + vue-router 主要用来做SPA(Single Page Application)，单页面应用整个网站都是通过一个html文件搞定的
我们只需要开发组件，页面中有什么组件，就开发什么组件。这些事情都是前端来做的，跟后端没有一点关系

在这里插入图片描述

vue + vue-router就是完成单页面应用的，vue-router(路由)是vue的核心插件

每个组件渲染出的效果都是vue来做的
vue-router干的事就是通过不同访问路径来找相应组件
他俩是共生的，通过vue开发的网站都要使用vue-router

加载组件时，每个组件在生命周期函数之中往后台发请求
当浏览器访问不同路径，vue-router来处理路径，找相应的组件

比如首页有个大组件home组件，由header，content，footer三个子组件组成，把home组件挂载到App组件上，App是挂载到vue对象上的组件
通过vue-router控制，当浏览器访问index页面是，把home组件放到index.html文件中展示
访问其他路径时，把其他组件放到index.html文件中展示
这样，通过路径展示不同的组件。完成页面展示效果
如此，一个html文件通过加载不同组件来展示整个网站的页面效果
每个组件需要的数据通过axios请求拿数据

单页面应用一个不好点，就是只有一个html文件 meta=keywords content=‘景天商城’ 只有一个html的花，关键字只出现一次
百度收录的数据比较少。通过百度关键字搜索，搜索到页面的概率很低
百度竞价时，比较火的关键字很贵的

优点：
不同路径，加载不同组件，不同组件请求相关数据，把一个页面渲染所需要的所有数据，拆分成几步去请求，这样小数据传输比较快，请求都是异步的，页面渲染效率更高一些
用户体验更好

为什么要使用单页面应用呢？因为传统的路由跳转，如果后端资源过多，会导致页面出现’白屏现象’，所以我们希望让前端来做路由，
在某个生命周期的钩子函数中，发送ajax来请求数据，进行数据驱动，
之前比如我们用django的MTV模式，我们是将后端的数据全部渲染给了模板，然后模板再发送给前端进行浏览器页面的渲染，一下将所有的数据都给了页面，
而我们现在使用vue，我可以在组件的钩子函数中发送对应的ajax请求去获取对应的数据，
而不是裤衩一下子就把数据都放到页面上了，单页面应用给我们提供了很多的便利，
说起来大家可能没有什么切实的体会，来，给大家推荐一个稀土掘金网站，这个网站就是一个单页面应用，
是一个开发者技术社区网站，里面的资源会有很多，看样子：
在这里插入图片描述

这样的网站我们通过django是可以来完成页面的渲染的，模板渲染嘛，但是这个论坛的数据资源有很多，我们通过django的MTV模式是一下子就将数据全部放到页面里面了，
那么页面通过浏览器渲染的时候，浏览器可能没有那么快渲染出来，会出现几秒钟的白屏现象，也就是说几秒钟之后用户才看到页面的内容，
这样体验起来就不好，为了用户体验好，就用到了我们说的单页面应用，django模板渲染做大型应用的时候，也就是页面很复杂，数据量很大的页面的时候，是不太合适的，
当然如果你够nb，你也可以优化，但是一般它比较适合一些页面数据比较小的应用。

那么解释一下什么是单页应用，看下图：(react、angular也都是做单页面应用，很多大型的网站像网易云音乐，豆瓣等都是react写的单页面应用)
在这里插入图片描述

下面我们来下载一下vue-router，[文档地址] https://router.vuejs.org/zh/ 下载地址： https://unpkg.com/vue-router@4.2.2/dist/vue-router.global.js

vue官网： https://cn.vuejs.org/
vue官网中就有vue-router
在这里插入图片描述

在这里插入图片描述

拷贝下来保存到本地使用
在这里插入图片描述

使用方法，先引入vue，再引入vue-router
在这里插入图片描述

简单使用技巧

<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-router@4"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!--使用 router-link 组件进行导航 -->
    <!--通过传递 `to` 来指定链接 -->
    <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
    <router-link to="/">Go to Home</router-link>
    <router-link to="/about">Go to About</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

vue2的处理方法

1 下载并引入vue-router的js文件: https://unpkg.com/vue-router/dist/vue-router.js
2 创建路由规则(哪个路径对应哪个组件)

const routes = [
  { path: '/home', component: Home },
  { path: '/course', component: Course }
]

3 创建对应的组件(Home\Course)

let Home = {
    data(){
        return {
            msg:'我是home组件',
        }
    },
    template:
            `
                <div class="home">
                    <h1>{{msg}}</h1>

                </div>
            `
};

let Course = {
    data(){
        return {
            msg:'我是Course组件',
        }
    },
    template:
            `
                <div class="course">
                    <h1>{{msg}}</h1>

                </div>
            `

}

4 创建vueRouter对象,并将路由规则交给这个对象

let router = new VueRouter({
    routes,
})

5 在vue对象中挂载一下router对象

let vm  = new Vue({
    el:'#app',
    router,  //挂载
    components:{
        App,
    }


})

6 创建router-link标签来指定路由

    let App = {
    data(){
        return {

            num:100,

        }
    },

    template:
            `
            <div class="app">

                <router-link to="/home">首页</router-link>
                <router-link to="/course">课程页</router-link>


                <router-view></router-view>
            </div>

            `,

    methods:{

    }
}

7 写路由出口 router-view

官网js处简单操作：下面是vue3的处理方法

// 1. 定义路由组件.

// 也可以从其他文件导入
const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }

// 2. 定义一些路由

// 每个路由都需要映射到一个组件。
// 我们后面再讨论嵌套路由。
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
]

// 3. 创建路由实例并传递 routes 配置

// 你可以在这里输入更多的配置，但我们在这里
// 暂时保持简单
const router = VueRouter.createRouter({
  // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
  history: VueRouter.createWebHashHistory(),
  routes, // `routes: routes` 的缩写
})

// 5. 创建并挂载根实例

const app = Vue.createApp({})
//确保 _use_ 路由实例使
//整个应用支持路由。
app.use(router)

app.mount('#app')

// 现在，应用已经启动了！

vue3代码，要使用vue3最新代码

1.定义子组件



let home = {
    data() {
        return {
            msg: '我是home组件',
        }
    },

    template:
        `<div class = 'home'>
            <h1>{{msg}}</h1>
         </div>`,
};

let course = {
    data() {
        return {
            msg: '我是course组件',
        }
    },

    template:
        `<div class = 'course'>
            <h1>{{msg}}</h1>
         </div>`,
};

定义一些路由

// 每个路由都需要映射到一个组件。
// 我们后面再讨论嵌套路由。
const routes = [
    //每个字典都是一个路由规则
    {path: '/home', component: home},
    {path: '/course', component: course},
];

3.实例化vue-router对象

    const router = VueRouter.createRouter({
        history: VueRouter.createWebHashHistory(),
        routes, //(缩写) 相当于 routes: routes
    })


    //定义总组件
    let App = {
        data() {
            return {
                num: 100,
            }
        },

        template:
            `<div class = 'App'>
                  <router-link to="/home">首页</router-link>
                  <router-link to="/course">课程</router-link>
                    <!-- 路由出口 -->
                     <!-- 路由匹配到的组件页面将渲染在路由出口这里，也可以使用单标签 -->
                    <router-view></router-view>
             </div>`,

    }

    let vm = Vue.createApp({
       
 components: {
            App
        }


    });

    vm.use(router)    //vue3 必须这样挂载路由
    vm.mount('#app')    //vue3实例对象必须调用 .mount()后才能渲染出来

在这里插入图片描述

vue-cli脚手架

上面所有组件都写在一个html文件之中，贼乱，不便于维护。以后成千上千页面，这个文件就很大。生产中不会这么写
我们需要将这些组件分出去，实现真正进行组件化开发
组件化开发和python的模块化开发是一样的，把不同的组件放到不同的文件中去

vue-cli 能创建vue项目，把目录创建好了，哪个地方放组件，哪个地方放css样式等都划分好目录了。类似于我们通过pycharm创建django项目
而且能vue-cli把整个项目通过socket跑起来，还能引入第三方库，把依赖包下载好

vue-cli安装需要借助node.js环境 node.js通过原生js来写后台代码

js很随意，node.js更随意，版本迭代非常快。之前有官方版本和开源版本。后来发现社区版本更牛逼。语法不是很严格，做后台还是很吃力的
火了一阵子，现在没什么劲了

nodejs把浏览器解释js的那一套嵌入到nodejs里面，例如控制台的使用

前面学习了普通组件以后，接下来我们继续学习单文件组件则需要提前先安装准备一些组件开发工具。否则无法使用和学习单文件组件。
一般情况下，单文件组件，我们运行在自动化工具vue-CLI中，可以帮我们编译单文件组件。所以我们需要在系统中先搭建vue-CLI工具，
官网：https://cli.vuejs.org/zh/
Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本。

nodejs官网 https://nodejs.org/zh-cn
在这里插入图片描述

Windows安装nodejs ，直接点点点安装
在这里插入图片描述

安装liunx版本的nodejs

在这里插入图片描述

使用nvm安装：需要开代理用普通用户执行安装

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

或者

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

安装成功会有这些提示：
在这里插入图片描述

同理，它会自动的添加到环境中，
在这里插入图片描述

最后需要激活环境：*bash *source ~/.bashrc or zsh source ~/.zshrc，或者干脆重启终端。之后就可以正常使用了

nvm list-remote

在这里插入图片描述

安装nodejs

nvm install v18.16.0

在这里插入图片描述

linux安装完毕

Node.js是一个新的后端(后台)语言，它的语法和JavaScript类似，所以可以说它是属于前端的后端语言，后端语言和前端语言的区别：

运行环境：后端语言一般运行在服务器端，前端语言运行在客户端的浏览器上
功能：后端语言可以操作文件，可以读写数据库，前端语言不能操作文件，不能读写数据库。

我们一般安装LTS(长线支持版本)：

下载地址：https://nodejs.org/en/download/【上面已经安装了nvm，那么这里不用手动安装了】

node.js的版本有两大分支：

官方发布的node.js版本：0.xx.xx 这种版本号就是官方发布的版本

社区发布的node.js版本：xx.xx.x 就是社区开发的版本

Node.js如果安装成功，可以查看Node.js的版本,在终端输入如下命令：

node -v

nvm可以管理nodejs版本

nvm工具的下载和安装： https://www.jianshu.com/p/d0e0935b150a

https://www.jianshu.com/p/622ad36ee020

安装记录:
打开:https://github.com/coreybutler/nvm-windows/releases
在这里插入图片描述

常用的nvm命令

nvm list-remote   #查看有哪些版本可以安装
nvm list   # 列出目前在nvm里面安装的所有node版本
nvm install node版本号      # 安装指定版本的node.js

例子：nvm install 14.15.1

nvm uninstall node版本号    # 卸载指定版本的node.js
nvm use node版本号          # 切换当前使用的node.js版本

如果使用nvm工具，则直接可以不用自己手动下载，如果使用nvm下载安装 node的npm比较慢的时候，可以修改nvm的配置文件(在安装根目录下)

# settings.txt
root: C:\tool\nvm    [这里的目录地址是安装nvm时自己设置的地址,要根据实际修改]
path: C:\tool\nodejs
arch: 64
proxy: none
node_mirror: http://npm.taobao.org/mirrors/node/ 
npm_mirror: https://npm.taobao.org/mirrors/npm/

nodejs包管理工具，常用的有npm和yarn npm在找一些包依赖时比较差劲，容易安装失败 npm无法控制安装包的版本 yarn可以指定版本安装

现在新版本的npm安装时生成个安装记录文件，里面记录了安装的包的版本。把项目部署到线上的时，npm会根据记录文件安装指定版本

npm

在安装node.js完成后，在node.js中会同时帮我们安装一个npm包管理器npm。我们可以借助npm命令来安装node.js的包。这个工具相当于python的pip管理器。

npm install -g 包名              # 安装模块   -g表示全局安装，如果没有-g，则表示在当前项目安装
npm list                        # 查看当前目录下已安装的node包
npm view 包名 engines            # 查看包所依赖的Node的版本 
npm outdated                    # 检查包是否已经过时，命令会列出所有已过时的包
npm update 包名                  # 更新node包
npm uninstall 包名               # 卸载node包
npm 命令 -h                      # 查看指定命令的帮助文档

nodejs安装好后，自动会给我们安装一个npm
在这里插入图片描述

安装Vue-cli

npm install -g vue-cli
npm install -g vue-cli --registry https://registry.npm.taobao.org

如果安装速度过慢，一直超时，可以考虑切换npm镜像源：http://npm.taobao.org/
在这里插入图片描述

指令：

1 //临时使用
2 npm install jquery --registry https://registry.npm.taobao.org
3
4 //可以把这个选型配置到文件中，这样不用每一次都很麻烦
5 npm config set registry https://registry.npm.taobao.org
6
7 //验证是否配置成功
8 npm config list 或者 npm config get registry
9
10 //在任意目录下都可执行,–global是全局安装，不可省略
11 npm install --global cnpm 或者 npm install -g cnpm --registry=https://registry.npm.taobao.org
12
13 //安装后直接使用
14 cnpm install jquery

安装vue-cli

nvm是node.js的版本管理工具

1 安装node.js 自带npm

2 通过npm 安装vue-cli 它的运行需要依赖node.js的环境

使用Vue-CLI初始化创建项目

生成项目目录

使用vue自动化工具可以快速搭建单页应用项目目录。

该工具为现代化的前端开发工作流提供了开箱即用的构建配置。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：

// 生成一个基于 webpack 模板的新项目
先创建个目录，用来存放项目

mkdir vuepro

在这里插入图片描述

vue init webpack 项目名

例如：

vue init webpack myproject

在这里插入图片描述

vue-cli默认是不安装vue-router的，选y安装

是否用严格模式运行js代码，选否
在这里插入图片描述

在这里插入图片描述

看到这个表示项目创建好了
在这里插入图片描述

看下项目，类似django创建的项目
在这里插入图片描述

启动服务：
先进入项目cd firstblood 运行

npm run dev

nodejs用自己内置的socket将项目运行起来，默认端口号是8080
在这里插入图片描述

虚拟机内部访问，这就是vue提供的首页
在这里插入图片描述

在pycharm中查看项目：
build是打包发给服务端部署，打包时用到的工具
在这里插入图片描述

config是目前的前端项目的配置文件，比如项目启动时的端口等
在这里插入图片描述

node_modules，运行当前项目所需要的依赖包环境，部署项目的时候，把它删掉
在这里插入图片描述

npm装的包，生成一个package-lock.json文件，里面记录了各个依赖包的版本等信息
在这里插入图片描述

部署时，把node_modules目录删掉，运维人员只需要进入目录，执行npm install
就可以根据package.json package-lock.json 把相关依赖包都下载好

现在vue-router不再是以js文件形式引入了，而是以模块包的形式引入
在这里插入图片描述

开发重点关注的是src目录，vue是开发单页面应用，src里面就是把各个组件，引入的文件等都划分到不同的文件和文件夹中
在这里插入图片描述

main.js里面只创建了一个vue对象
在这里插入图片描述

导包的含义：当我们引入node_modules 第三方包时，from ‘包名’ 自动会去里面找到包名
相当于从vue-router包里面引入抛出的对象 Router是自定义的名称
name是组件别名，可以忽略
访问什么路径，找相应组件
@符号代指的是src路径，@/components/HelloWorld 指的是src目录下 compoents下面的HelloWorld组件

vue-cli中，要想使用路由，必须使用vue对象.use(路由对象) 固定用法
在这里插入图片描述

在vue-cli中，一个.vue文件就是一个组件。一个.vue文件点开就是一个template模板
在这里插入图片描述

分三个标签，template标签用来写网页标签，script标签用来写剩余的js代码 style标签用来写css样式
在这里插入图片描述

引入某个对象，某个对象必须export default抛出来，才能引入
引入.vue文件时，.vue是不用写的
在这里插入图片描述

这个引入的是router目录下index.js中抛出的对象，目前这个文件中只抛出了vue-router对象
引入index文件时，只需引入其所在目录，自动引入该文件
在这里插入图片描述

单页面应用，单页面就是这一个index.html文件，里面只做了圈地
在这里插入图片描述

前端项目可以自己单独运行，不依赖后端，拿动态数据需要请求后台项目
后端项目和页面完全没关系，只提供数据

pycharm可以新建.vue文件，就是组件，右键
在这里插入图片描述

如果右键没发现vue Component 可以下载vue插件 install
安装完成后重启pycharm
在这里插入图片描述

npm run build 给项目打包部署用的

在这里插入图片描述

vue-cli是针对vue2使用的
在这里插入图片描述

vue3使用的是vite

// 启动开发服务器 ctrl+c 停止服务

cd myproject

npm run dev           # 运行这个命令就可以启动node提供的测试http服务器

那么访问一下命令执行完成后提示出来的网址就可以看到网站了：http://localhost:8080/

项目目录结构

src 主开发目录，要开发的单文件组件全部在这个目录下的components目录下

static 静态资源目录，所有的css，js，图片等文件放在这个文件夹

dist项目打包发布文件夹，最后要上线单文件项目文件都在这个文件夹中[后面打包项目,让项目中的vue组件经过编译变成js 代码以后,dist就出现了]

node_modules目录是node的包目录，

config是配置目录，

build是项目打包时依赖的目录

src/router 路由,后面需要我们在使用Router路由的时候,自己声明.

项目执行流程图
在这里插入图片描述

整个项目是一个主文件index.html,index.html中会引入src文件夹中的main.js,
main.js中会导入顶级单文件组件App.vue,
App.vue中会通过组件嵌套或者路由来引用components文件夹中的其他单文件组件。

基于vue-cli创建的项目，稍作修改。访问不同路径展示不同页面
在这里插入图片描述

有人会问，为什么路由里面多个#
vue-router中有两种路由模式，
1、默认是哈希模式，哈希模式就加了个#，其他啥也没干
2、history模式
在这里插入图片描述

history模式配置方式：

export default new Router({
  mode:'history',  #去掉路由中的#，以后都用这个模式
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/course',
      name: 'Course',
      component: Course
    },
  ]
})

在这里插入图片描述

vue-cli默认是没有安装axios的，现在需要安装axios
在当前项目中，

npm install axios -S / --save   #表示给当前项目安装axios

npm install axios -g  #表示全局安装，每个创建的项目都安装

在这里插入图片描述

看到node_modules里面有了axios
在这里插入图片描述

从node_modules中导入包时，直接from ‘包名’，一般在main.js中引入
在这里插入图片描述

看axios官网，怎么在vue框架中使用
在这里插入图片描述

官网使用方法比较麻烦，我们可以使用原型链的方式把axios封装到vue对象当中
我们可能会在很多组件里用到数据/实用工具，但是不想污染全局作用域。
这种情况下，可以通过在原型上定义它们使其在每个 Vue 的实例中可用。

基本示例
在main.js中添加一个变量到 Vue.prototype

Vue.prototype.$appName = 'My App'
这样 $appName 就在所有的 Vue 实例中可用了，甚至在实例被创建之前就可以   可用通过this.$appName调用

new Vue({
  beforeCreate: function () {
    console.log(this.$appName)
  }
})

为实例prototype设置作用域
为什么 appName 要以 $ 开头？这很重要吗？
这里没有什么魔法。$ 是在 Vue 所有实例中都可用的 property 的一个简单约定。这样做会避免和已被定义的数据、方法、计算属性产生冲突。
如果我们设置：

Vue.prototype.appName = 'My App'

那么如下的代码输出什么：

new Vue({
  data: {
    // 啊哦，`appName` 也是一个我们定义的实例 property 名！
    appName: 'The name of some other app'
  },
  beforeCreate: function () {
    console.log(this.appName)
  },
  created: function () {
    console.log(this.appName)
  }
})

日志中会先出现 “My App”，然后出现 “The name of some other app”，因为 this.appName 在实例被创建之后被 data 覆写了。
我们通过 $ 为实例 property 设置作用域来避免这种事情发生。你还可以根据你的喜好使用自己的约定，诸如 $_appName 或 ΩappName，来避免和插件或未来的插件相冲突。

注册和使用全局变量
每个组件都是一个vue实例，Vue.prototype加一个变量，只是给每个组件加了一个属性，这个属性的值并不具有全局性。
比如以下例子：

点击 home 中的 change name 再跳转about，about里面还是显示 main in test2

如果要实现全局变量的功能，需要把属性变为引用类型

Vue.prototype.$appName = { name: 'main' }

后面使用 this.$appName.name 改变和引用相应的值
这进入 about 后显示 test1 in test2

应用示例：

// 相应组件
<script>
  export default{
    data(){
      return{
        userId:666,　　　　　　　　　
        token:'',
      }
    },
    created(){
      this.$axios({
        method:'post',
        url:'api',
        data:this.qs.stringify({    //这里是发送给后台的数据
          userId:this.userId,
          token:this.token,
        })
      }).then((response) =>{          //这里使用了ES6的语法
        console.log(response)       //请求成功返回的数据
      }).catch((error) =>{
        console.log(error)       //请求失败返回的数据
      })
    }
  }
</script>