安装Vue通常涉及几个步骤,主要依赖于Node.js环境及其包管理器npm(或cnpm等国内镜像源)。以下是详细的安装步骤:
一、安装Node.js
- 访问官网:首先,访问Node.js官网下载并安装Node.js。确保下载适合你操作系统的版本。
- 安装Node.js:按照安装向导进行安装。安装过程中,可以选择自定义安装路径,并确认安装过程中包含了npm(Node.js的默认包管理器)。
- 验证安装:安装完成后,打开命令行工具(在Windows上可以是CMD或PowerShell,Mac和Linux上通常是Terminal),输入
node -v
和npm -v
来检查Node.js和npm是否成功安装并显示其版本号。
二、配置npm(可选,但推荐)
- 配置npm镜像源:由于npm的默认源在国外,访问速度可能较慢,可以配置为国内镜像源以加快下载速度。例如,使用淘宝npm镜像(cnpm)或npm mirror。配置命令示例(以npm mirror为例):
npm config set registry https://registry.npmmirror.com
。 - 配置全局安装路径和缓存路径(这个看自己的心情来😉):为了避免权限问题,可以将npm的全局安装路径和缓存路径更改为不需要管理员权限的目录。这需要在环境变量中设置。
三、安装Vue CLI
Vue CLI是一个基于Vue.js进行快速开发的完整系统,提供了项目初始化、开发调试、构建部署等功能。
- 安装Vue CLI:在命令行中运行
npm install -g @vue/cli
(注意:这里使用@vue/cli
是Vue CLI 3及更高版本的命令)。如果是使用cnpm,则命令为cnpm install -g @vue/cli
。 - 验证安装:安装完成后,通过运行
vue --version
或vue -V
来检查Vue CLI是否成功安装并显示其版本号。
四、创建Vue项目
- 选择项目位置:在命令行中,使用
cd
命令切换到你想创建Vue项目的目录。 - 也可以从文件夹cmd进入终端
- 创建Vue项目:运行
vue create 项目名
来创建一个新的Vue项目。这里,“项目名”是你想给你的Vue项目指定的名称。 - 项目配置:在创建项目过程中,Vue CLI会询问你一些关于项目的配置问题,如是否使用Vue Router、Vuex等。根据你的需要选择相应的配置。
五、运行Vue项目
- 进入项目目录:使用
cd
命令切换到你的Vue项目目录。 - 安装依赖(如果项目是通过拷贝或克隆得到的):如果项目目录中存在
package.json
文件,但node_modules
目录不存在或缺失,需要先运行npm install
或cnpm install
来安装项目依赖。 - 启动项目:在项目目录中,运行
npm run serve
或cnpm run serve
来启动Vue项目。默认情况下,Vue CLI会将项目运行在localhost:8080
上,你可以通过浏览器访问这个地址来查看你的Vue应用。