Vue脚手架安装使用

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 -gyarn 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运行。这种方式的目录结构就很简洁,更方便。

### Vue CLI 的安装使用 #### 一、Vue CLI 基本概念 Vue CLI 是一种用于快速构建 Vue.js 应用程序的工具,它提供了现代化前端开发所需的多种功能支持。其全称为 Command Line Interface (CLI),通常被称为脚手架[^1]。 --- #### 二、前置条件:Node.js 和 NPM 安装安装 Vue CLI 之前,必须先确保本地已成功安装 Node.js 及其包管理器 NPM。这是因为 Vue CLI 需要依赖于 Node.js 提供的运行环境以及 NPM 来管理和下载必要的依赖项[^2]。 可以通过以下命令验证是否已经安装Node.js 和 NPM: ```bash node -v && npm -v ``` 如果未安装,则可以从官网下载并按照指引完成安装流程。 --- #### 三、Vue CLI 的安装过程 一旦确认 Node.js 已经正确安装,可以继续安装 Vue CLI: ##### 使用 npm 安装 Vue CLI 执行如下命令来全局安装 Vue CLI: ```bash npm install -g @vue/cli ``` 此操作会将 Vue CLI 添加到系统的全局环境中,使得可以在任何目录下调用 `vue` 命令[^4]。 为了加速国内用户的安装速度,建议切换至淘宝镜像源后再尝试安装 cnpm 或者直接设置 npm 镜像源: ```bash npm config set registry https://registry.npmmirror.com/ ``` 之后重新运行上述安装命令即可。 --- #### 四、创建新项目 安装完成后,可通过以下命令初始化一个新的 Vue 项目: ```bash vue create my-project-name ``` 这一步骤将会引导用户选择一系列预设选项(例如 Babel、Router 插件等),从而自动生成完整的项目结构文件夹[^3]。 --- #### 五、常用插件集成 对于希望引入第三方 UI 组件库的情况,比如 Element-UI 或 iView,可以直接利用 npm 进行安装。以 Element-UI 为例,在项目根路径下运行下面这条语句实现安装: ```bash npm install element-ui --save ``` 随后需按文档说明调整入口 JavaScript 文件中的相关内容以便正常加载组件样式资源。 --- #### 六、启动开发服务器 进入刚刚创建好的项目文件夹后,可借助内置服务迅速开启调试模式: ```bash cd my-project-name npm run serve ``` 此时浏览器应该能够访问默认地址 http://localhost:8080 查看实时效果。 --- ### 总结 以上即为基于 Vue CLI 构建应用的整体流程概述,涵盖了从基础环境准备直至实际部署的一系列环节。每步均附带具体的操作指南及相关注意事项提示,便于开发者参照实践。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值