vue教程菜鸟教程（vue 教程）

编程日记 • 2025-02-15 23:17 • 阅读 22

这篇博客只描述vue-cli (终端建立vue项目后的使用) ，使用vue项目框架前建议先去官网看视频学习基本的指令，也可以后面再学。
建立项目后要先搞明白项目的目录都有什么用，可以看菜鸟教程的图片，主要是了解配置文件跟编写代码的位置

没有使用过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配置

把路由引入main.js,main.js是程序的一个入口
引入的路由配置命名为小写开头

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

不要忘记安装element-ui仓库
根据官网介绍使用

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

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

在这里插入图片描述

在路由配置文件中添加

查看官网API

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

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

Axios获取参数：