使用npm安装Vue并创建项目

**

使用npm安装Vue并创建项目

**

一.下载node.js

官方下载地址:https://nodejs.org/en/download/
选择相应版本安装
使用npm安装Vue并创建项目_第1张图片
下载完成后一路next到安装完成。
一般情况环境变量自动添加完成,win+R键输入cmd打开命令行测试是否安装成功:
输入node -v
输入npm -v
使用npm安装Vue并创建项目_第2张图片
二.安装cnpm
在命令行中使用下面命令安装淘宝镜像npm

npm install -g cnpm --registry=https://registry.npm.taobao.org

等待安装完成后,使用cnpm -v命令测试是否安装成功。
使用npm安装Vue并创建项目_第3张图片
三.安装Vue
全局安装Vue CLI 3.X版本

npm install -g @vue/cli

等待安装成功后,使用vue -V查看版本号,使用vue --help命令获取帮助。
使用npm安装Vue并创建项目_第4张图片

四.创建项目
新建目录,进入到当前工作环境。

vue create [project-name]

(项目名为小写用“-”隔开)
使用npm安装Vue并创建项目_第5张图片使用上下进行选择,回车键确定。
使用npm安装Vue并创建项目_第6张图片
使用上下进行选择,使用空格键进行勾选,回车结束。
使用npm安装Vue并创建项目_第7张图片
细节配置:
使用npm安装Vue并创建项目_第8张图片
Vue CLI v4.5版本细节配置,配置完成后回车结束。
使用npm安装Vue并创建项目_第9张图片
项目创建完成后,会显示启动方法。

cd [project目录]
npm run serve

使用npm安装Vue并创建项目_第10张图片
浏览器输入项目地址:

 App running at:
  - Local:   http://localhost:8080/
  - Network: 

在网页显示出页面,至此vue项目创建成功。
使用npm安装Vue并创建项目_第11张图片

你可能感兴趣的:(前端,vue,npm)