33_Vue_基于Vue-Router与elementUI的环境搭建

最新推荐文章于 2024-05-23 14:05:14 发布

weixin_44560027

最新推荐文章于 2024-05-23 14:05:14 发布

阅读量184

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_44560027/article/details/117225725

版权

本文介绍了如何在Vue项目中安装和使用Vue-Router，通过它实现单页面应用的多视图切换。首先，可以通过script标签直接引入Vue-Router，或者通过npm进行安装，并使用Vue.use()进行手动安装。接着，讲解了ElementUI的安装步骤，包括使用npm安装依赖，然后在项目中导入并应用ElementUI的组件和样式。这两个库是前端开发中常用的工具，能够提升开发效率和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、Vue-Router
vue-Router允许我们通过不同的Url访问不同的内容。可以实现多试图的单页Web应用(SPA,即Single Page Application单页面应用程序)

安装和引入
1、script标签引入：在Vue后面加载 vue-router ，它会自动实现安装

2、npm方式(推荐) Vue-Router时通过插件的形式来扩展Vue的功能，所有要使用它，必须通过Vue.use()方法安装路由功能。
2.1 安装依赖，输入命令：npm i -D vue-router
import Vue from ‘vue’;
import VueRouter from ‘vue-router’;
//调用vue.use手动安装，之后才能在实例中通过this.$router访问
Vue.use(VueRouter )

二、ElementUI的环境搭建
安装
1、安装element依赖包：npm i element-ui -S
2、element引入：
import Vue from ‘vue’;
import ElementUI from ‘element-ui’;
import ‘element-ui/lib/theme-chalk/index.css’;
Vue.use(ElementUI )
如图所示：
在这里插入图片描述