从0到1写一个vue2项目，按需引入element-ui的引入，npm下载路由，配置路由，路由嵌套

从0到1写一个vue2项目，此篇内容有element-ui的按需引入，npm下载路由，配置路由，路由嵌套

项目是b站上找的项目链接在此https://www.bilibili.com/video/BV1QU4y1E7qo/?p=8&spm_id_from=pageDriver&vd_source=2c599bf1d75e3f9a5a4776409163e9a1跟着博主开始敲得，此次的笔记是[1~8]集,完全是记录自己的学习

文章目录

一、如何快速建立一个vue2框架
1.1、node和脚手架cli已经下载完成
1.2、运行项目
二、element-ui 按需引入
2.1为什要按需引入？
2.2按需引入和完全引入的区别
2.3按需的引入步骤
三、npm下载路由，配置路由
3.1怎么下载路由？
3.2怎么配置路由？
四、路由嵌套
4.1路由嵌套的实际作用
4.2怎么实现路由嵌套？

五、展望与学习

一、如何快速建立一个vue2框架

vue create vue2
//这是搭建vue2的指令 前提是下载了node

1.1 node和vue已经下载完成

这一篇我写的很清楚如何下载https://blog.csdn.net/apple_70049717/article/details/138220416?spm=1001.2014.3001.5501

1.2 运行项目

在这里插入图片描述

npm run serve
//就可以启动项目

二、element-ui 的安装和引入方式

https://element.eleme.cn/#/zh-CN/component/installation这是官网地址

1、npm的安装方式
安装的话就npm i element-ui -s

2、cdn的安装方式
一般不推荐想用的话自己如下图引入下就可以

2.1为什要按需引入？

先说一下引入方式有完整引入和按需引入两种，完整引入意思是直接将所有组件下载到你的脚手架里面，这样有个不好出就是你的项目打包之后相对于较大一点，当用户量较大的时候就会影响性能，按需引入的话就是使用什么组件，引入什么组件，打包之后就小一点，使用起来稍微麻烦一点，但是正常项目推荐使用按需引入。
官网介绍https://element.eleme.cn/#/zh-CN/component/quickstart

2.2按需引入和完全引入的区别？

按需引入需要的组件，以达到减小项目体积的目的，完全引入打包之后比按需引入大一点（三倍左右）

2.3按需的引入步骤？

这里没有使用官网的按需引入使用的是视频教学的按需引入

在这里插入图片描述
2.3.1、如上图在babel.config.js写上

module.exports = {presets: ['@vue/cli-plugin-babel/preset',["@babel/preset-env", { "modules": false }],],"plugins": [["component",{"libraryName": "element-ui","styleLibraryName": "theme-chalk"}]]
}

2.3.2、如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';Vue.use(Button)Vue.use(Select)new Vue({el: '#app',render: h => h(App)
});

2.3.3、最后需要使用什么组件写出来就行

  <el-button>默认按钮</el-button><el-button type="primary">主要按钮</el-button><el-button type="success">成功按钮</el-button><el-button type="info">信息按钮</el-button><el-button type="warning">警告按钮</el-button><el-button type="danger">危险按钮</el-button>

一、npm下载路由，配置路由

vue-router官网

vue2使用的路由是vue3,vue3使用的路由时vue4

点我红圈拿出来的就可以切换路由

3.1怎么下载路由？

npm install vue-router@3.6.5

其他下载方式不说了就说npm，上面指令就是下载了vue2相对应的路由。vue3对应的是大版v4的路由想下载就直接npm install vue-route就可以

3.1.1怎么查找大版本对应的最新版本?

1、打开npm官网 https://www.npmjs.com/
2、搜索vue-router
3、打开versions
在这里插入图片描述

解释下3、4就是大版本号，图里面3.6.5就是vue2对应的最新的路由，4.3.2也就是vue3对应最新的路由

3.2怎么配置路由？

3.2.1 新建一个router文件夹，新建个index.js

3.2.2引入vue-router

// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)
import Vue from 'vue'
import VueRouter from 'vue-router'Vue.use(VueRouter)// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
import home from "@/view/home.vue";
import user from "@/view/user.vue";// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [{ path: "/home", component: home },{ path: "/user", component: user },
]// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({routes // (缩写) 相当于 routes: routes
})
并且导出export default router;//上面是在一个文件夹router里面
// 4. 创建和挂载根实例。在main.js里面
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
import router from "@/router"
const app = new Vue({router
}).$mount('#app')
//5、一定要一个出口文件，单路由出口就是显示当前那个页面，使用<router-view></router-view>
<router-view></router-view>显示路由

四、路由嵌套

路由嵌套是指在一个父路由组件内部定义和加载子路由组件的机制，这使得你可以在一个页面中根据不同的子路径显示不同的子组件。这样可以帮助你组织和管理具有层次结构的视图，使你的应用程序更加模块化和可维护。

想象你有一个网站，有以下页面：

首页
关于页下
用户页

用户资料页（User Profile）
用户订单页（User Orders）
用户页页面中根据不同的子路径显示不同的子组件就可以路由嵌套

4.1路由嵌套的实际作用？

在这里插入图片描述

视频里面的意思是变的只有右边内容，而菜单栏和header不变化，总不能每次页面都都带左边菜单栏的上的页面所以就可以使用路由嵌套。

4.2怎么实现路由嵌套？

1、view文件夹建立一个main父级文件和两个子级文件
在这里插入图片描述
2、在router文件夹里面写

import Vue from "vue";
import VueRouter from "vue-router";Vue.use(VueRouter);
import home from "@/view/home.vue";
import user from "@/view/user.vue";
import main from "@/view/main.vue";
//children下面写子路由
const routes = [{path: "/",component: main,children: [{ path: "/home", component: home },{ path: "/user", component: user },],},
];
const router = new VueRouter({routes, // (缩写) 相当于 routes: routes
});
export default router;
//还要在main.vue父级文件写出口
<router-view></router-view>