2025年vue教程菜鸟教程（vue 教程）

科技前沿 • 2025-05-23 12:16 • 阅读 59

大家好，我是讯享网，很高兴认识大家。

 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg> <blockquote>

讯享网

没有使用过vue项目的系统：
(1) 先安装node.js
下面步骤记得以管理员身份打开的cmd

(2) 选择使用淘宝镜像

讯享网

(3) 全局安装 vue-cli

(4) 创建一个基于 webpack 模板的新项目

讯享网

(5) 进入项目，初始化并运行：

(6) 打包 Vue 项目

讯享网

注意自己使用vue-router的版本，4.0以上的版本与4.0以下的版本存在区别。
4.0以下的版本包的使用为：

讯享网
4.0以上为：

本人开发使用4.0以下的本版，具体情况遇到再具体解决。

创建项目的过程中如果没有选择自动下载router,那就手动下载：

npm不行就用cnpm,版本可以自行添加，我在package.json文件中找到
“vue-router”: “^3.0.7”,
修改版本为3.0.7，
再运行

讯享网

建一个文件夹router,夹一个index.js编写router配置

讯享网

App为第一个Vue文件，在这个文件实现页面信息的跳转跟展示
跳转html前端使用
<link …
vue使用
<router-link to=“/content” 。。。。
展示使用<router-view 。。。。

内容页面

讯享网

建1–n个vue界面自定义内容

在这里插入图片描述

在router配置文件index.js中的主url下加入嵌套url

在这里插入图片描述

最后在主url页面中添加router跳转及显示

为了做得好看一点可以去element-ui官网中抄：
我抄了一个界面
在这里插入图片描述
然后就是找地方插入router-link 跟 router-view

在内容页（url是：/content）,发起重定向请求（url是：/gohome）跳回首页（url是：/home）

在router配置文件中添加路由index.js
在这里插入图片描述

在这里插入图片描述

添加参数

在路由配置文件中添加

编写router-link传参

讯享网

取出参数展示

查看官网API

讯享网

先安装axios
项目中开发时一般先方测试版的数据文件
要建立专用目录

文件存放于该目录下可以在网页直接访问json数据
http://localhost:8080/static/mock/data.json

Axios获取参数：

2025年vue教程菜鸟教程（vue 教程）

相关推荐