目 录CONTENT

文章目录

如何启动一个vue.js的前端项目

大T
2021-11-28 / 0 评论 / 0 点赞 / 98 阅读 / 0 字

如何启动一个vue.js的前端项目

如何启动一个vue.js的前端项目

1、安装node.js

官网:https://nodejs.org/zh-cn/

12.22.7 列表下载:https://npmmirror.com/mirrors/node/v12.22.7/

1.1安装后验证

用以下命令验证node是否安装成功,若安装成功,则出现版本号

node -v
npm -v
image

1.2配置淘宝镜像

由于npm镜像在国内速度偏慢,所以通常使用淘宝的npm镜像。

安装成功后,在cmd命令窗口使用如下命令安装npm的国内镜像cnmp

npm install -g cnpm --registry=http://registry.npm.taobao.org
安装完成之后,就可以用cnpm代替npm来安装依赖包

1.3 安装vue-cli脚手架构建工具

//老版本
cnpm install -g vue-cli
//新版本
npm install -g @vue/cli

//安装新版需先卸载旧版本
npm uninstall vue-cli -g
装完运行环境和构建工具后,就开始使用vue-cli来构建项目。

1.4 构建项目

命令窗口中使用cd 到要构建的项目目录中,

然后需要输入命令:vue init webpack frontend (这里命令的意思是初始化一个项目,项目名称是frontend,其中webpack是构建工具,也就是整个项目时基于webpack的)

运行命令初始化的时候会让用户输入几个基本的选项,如项目名称、描述、作者等信息,可以直接回车默认就可以了。

image

1.5 安装项目依赖

项目初始化完成后,在项目目录下使用如下命令安装项目所需依赖:

cd到项目目录中去,然后输入*cnpm install *等待安装,安装中会出现警告信息,有的会出现栈溢出等错误,我就是在这里遇到了,一般第一次安装没事,如果安装过的,可以卸载了在重新安装

image

1.6 命令窗口启动项目

vue-cli-service serve

启动命令需要根据项目的package.json文件确定,默认项目可以直接用run或者dev启动。

image

启动成功:

image

2、IDEA中配置并启动项目

2.1 IDEA中配置npm和node.exe

image

2.2启动项目

image

0

评论区