1. 环境搭建
使用vue-cli脚手架创建vue前端项目首先需要搭建软件环境,这里需要安装node.js、配置npm镜像cnpm、安装vue-cli。
-
安装node.js
node.js的官网地址:https://nodejs.org/en/,直接下载LTS版本的即可。如下图:
下载之后双击安装即可。安装完成后打开命令行窗口输入:
node -v
可以检查node.js安装是否成功。安装成功命令行会显示node.js的版本号。
-
配置npm的镜像cnpm
npm(Node Package Manager)是node.js的包管理工具,在安装node的时候已经顺带安装好了, 因为npm是远程将依赖包下载到本地来,所以我们为了下载速度更快,会配置一下国内的镜像地址,命令行输入以下命令:npm install -g cnpm --registry=https://registry.npm.taobao.org
-
安装vue-cli
接下来我们用cnpm的命令安装vue-cli,命令如下:cnpm install -g @vue/cli
安装完成之后,可以输入以下命令查看安装的vue-cli的版本号,注意是大写的V
vue -V
本次教程中安装的vue-cli版本号为**@vue/cli 4.5.12**
2. 项目创建
上面环境配置好之后,就可以直接在命令行中使用vue命令创建vue项目啦。在要创建项目的目录下打开命令行窗口,输入以下命令:
vue create hello-vue
hello-vue就是项目的名字,命令输入后回车,会看到下图界面:
可以使用上下箭头选择使用的Vue的版本,本次教程选择的Vue3版本。选择后直接回车即可。看到下图界面说明hello-vue的项目已经安装成功。
3.项目运行
按照上图提示,命令行输入以下命令即可将刚刚创建好的vue项目运行起来
cd hello-vue
cnpm run serve
如下图:
打开浏览器,输入http://localhost:8080/可以看到如下页面,说明vue项目启动成功。
4. 项目目录说明
创建好的项目可以使用IDE打开,此教程使用的idea,打开后截图如下: