Vue脚手架安装使用

最新推荐文章于 2025-05-07 23:55:55 发布

hezebin

最新推荐文章于 2025-05-07 23:55:55 发布

阅读量498

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue npm

本文链接：https://blog.youkuaiyun.com/MrKorbin/article/details/104023559

Vue 专栏收录该内容

15 篇文章

订阅专栏

1.前言

之前还未完全接触Vue，在做项目时有机会用到了element ui的组件，也了解到Vue的一些基本用法，但都是通过script标签直接本地引入的，这种方式对于单页面的数据双向绑定可以很方便很爽的使用。

再一次由于项目的需求，需要用到路由，用之前的本地引用方式不知道如何解决，无奈只能去研究学习下脚手架了。

vue-cli的作用是下载模版项目，快速拉取相关依赖，类似于Springboot的快速构建，不用理解得复杂了。

2.安装Node.js

具体步骤和更多细节请参考我的另一篇博文：Node.js在Windows下安装和配置。
在这里插入图片描述

3.安装脚手架

3.1 Vue-Cli 2（旧版本）

搭建Vue的开发环境，全局安装Vue-Cli 2npm install --global vue-cli。安装好后vue -V查看版本信息确认是否安装成功。
在这里插入图片描述

3.2 Vue-Cli 3

与旧版本的区别是Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。如果你已经全局安装了旧版本的 vue-cli(1.x 或 2.x)，

你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。Node 版本要求Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。

安装新版 Vue-Cli 3：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

查看版本：
vue -V OR vue --version

4.创建项目

首先在cmd命令行中进入项目要存放的目录，在该目录下使用命令：vue create <Project Name>（旧版本请用vue init webpack <Project Name>），将<Project Name>替换成自己命名的项目名即可创建项目，跟着导航选择，完成初始化即可。cd入项目目录后再用npm run serve启动项目（旧版本请用npm run dev）。
在这里插入图片描述
根据提示的路径和端口号，打开页面则成功。

对于旧版本，用上述方式创建的项目，目录结构有点复杂，所以有一种更简洁的创建方式：
通过命令vue init webpack-simple <Project Name>构建项目，cd入项目目录，通过命令npm install下载依赖，最后同样npm run dev运行。这种方式的目录结构就很简洁，更方便。