如何建立运行vue项目

2024-03-29 15:32:23

这段时间接触vue，但刚入手的同行都有点头晕脑胀，接下来我们描述一下如何建立一个vue项目。

操作方法

01

第一步，肯定是安装node.js。根据需要下载安装，安装后如图，然后进行下一步
02

打开命令提示符（win+r），然后进行下一步；
03

输入node -v ，出现如下图所示，表示安装成功，进行下一步
04

检查npm管理包，npm是集成在node中的，如图：输入 npm -v出现如下图所示，显示出npm的版本信息，表示npm包含。然后进行下一步：
05

安装cnpm，由于npm有些资源被屏蔽,儿有些是国外资源的原因，会导致安装依赖的时候失败，这里安装cnpm国内镜像。输入如下命令： npm install -g cnpm --registry=http://registry.npm.taobao.org。然后等待，进行下一步
06

如图：安装过程及结果如下：
07

安装vue-cli,如图，输入 cnpm install -g vue-cli ，等待完成。然后进行下一步
08

把当前路径改到你要存放项目的路径，此处，如图，为演示方便，我们放在桌面上：然后进行下一步：
09

在当前文件下用vue init webpack firstVue 初始化一个项目：然后进行下一步：
10

在桌面有如下文件夹，表示建立成功：然后进行下一步：
11

打开项目中package.json 文件，如图，为需要的依赖：
12

安装所需依赖，进入文件路径，然后执行命令 cnpm install ，等待安装。然后进行下一步：
13

如图，依赖完成后，新增node_modules文件夹。然后进入下一步
14

至此，项目已经建立，执行npm run dev 运行项目，等待结果：然后进入下一步
15

打开浏览器，输入localhost:8080,出现如下，表示启动成功，就可以进行其他开发了。

赞 (0)

Myeclipse怎样创建并运行web项目

在myeclipse创建web项目是学习javaweb的基础,今天为大家介绍一下怎样创建web项目以及最简便的方法运行web项目,对于部署java项目其实也是相同的道理,大家喜欢的话可以尝试一下... ...
JCreator Pro怎么用？用JCreator Pro快速建立一个新项目教程

JCreator Pro怎么样?JCreator是一个Java程序开发工具,无论你是要开发Java应用程序或者网页上的Applet元件都难不倒它.在功能上与Sun公司所公布的JDK等文字模式程序工具相 ...
ZendStudio 13.5怎么运行web项目?

今天我们就来看看Zend Studio 13.5中运行web项目的两种方法,都很简单,喜欢的朋友可以进来参考一下. 首先新建一个或者使用之前创建的web项目 (我这里就使用之前创建的了) 方法一: 1 ...
怎么在电脑版pr中建立新的项目

电脑版pr软件被很多人使用,用来编辑视频等,有的用户在使用该软件时,想要建立一个新的项目,但是却不知道如何建立,那么小编就来为大家介绍一下吧.具体如下:1. 第一步,双击或者右击打开Premiere软 ...
Zend Studio怎么直接运行PHP项目

有时候我们在使用Zend Studio的时候,想直接运行PHP项目,怎么操作呢,下面来分享一下方法操作方法 01 第一步我们需要安装PHP集成环境,这里安装的是phpStudy,安装完成后,点击启动 ...
如何在Keil(MDK)中建立一个多项目的工程

前一篇为初学者介绍了如何用Keil建立一个项目,这次将进一步介绍如何建立一个多项目的工程,很多嵌入式系统都是由不同的项目共同组成的一个系统,即使是单核的项目也会因为对外和对内开放程度的不同而建立一个多 ...
IntelliJ IDEA如何运行web项目

接上篇,我们已经把项目导入到了工程中,那么如何运行web项目呢?下面小编将给大家展示下如何把web项目运行到tomcat里面. 操作方法 01 打开IntelliJ IDEA,点击菜单的"R ...
如何在vue项目中使用vue-router路由实现跳转

在vue.js项目中使用vue-router,可以使用路由进行界面或路径跳转.可以在项目创建一个组件,然后将组件引入到父组件中,利用超链接添加路径跳转.下面利用实例说明如何实现,操作如下: 操作方法 ...
eclipse建立springMVC 简单项目

如何通过eclipse建立springMVC的简单项目,现在简单介绍一下. 操作方法 01 新建一个动态web项目,选择 Dynamic Web Project 点击 NEXT 填写项目名称,点NE ...