vue-cli2的使用

最新推荐文章于 2025-07-04 16:00:20 发布

原创

最新推荐文章于 2025-07-04 16:00:20 发布 · 2.8k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

本文详细介绍了vue-cli2的使用步骤，包括环境配置、webpack的安装和使用、vue-router的配置与路由嵌套、参数传递、组件重定向、路由模式与404页面设置。同时讲解了路由钩子函数与异步请求的结合，以及如何利用axios进行数据获取。

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

什么是vue-cli

vue-cli官方提供的一个脚手架，用于快速生成一个vue的项目模板；
预先定义好的目录结构及基础代码，就好比咱们在创建Maven项目时可以选择创建一个骨架项目，这个估计项目就是脚手架，我们的开发更加的快速；

需要的环境

需要注意的是vue-cli2不支持较高的node.js版本，我下的是12的版本

Node.js：http://nodejs.cn/download/
安装就是无脑的下一步就好，安装在自己的环境目录下
Git：https://git-scm.com/doenloads
镜像：https://npm.taobao.org/mirrors/git-for-windows/

确认nodejs安装成功：

cmd下输入node -v，查看是否能够正确打印出版本号即可！
cmd下输入npm -v，查看是否能够正确打印出版本号即可！
这个npm，就是一个软件包管理工具，就和linux下的apt软件安装差不多！
安装Node.js淘宝镜像加速器（cnpm）
这样的话，下载会快很多~

# -g 就是全局安装
npm install cnpm -g

# 或使用如下语句解决npm速度慢的问题
npm install --registry=https://registry.npm.taobao.org

安装vue-cli

npm install -g vue-cli
#测试是否安装成功#查看可以基于哪些模板创建vue应用程序，通常我们选择webpack
vue list

在这里插入图片描述

第一个vue-cli应用程序

D:\Project\vue-study;

创建一个基于webpack模板的vue应用程序

#1、首先需要进入到对应的目录 cd D:\Proj

最低0.47元/天解锁文章

200万优质内容无限畅学