如何运行一个Vue项目

 

一开始很多刚入手vue.js的人,会扒GitHub上的开源项目,但是发现不知如何运行GitHub上的开源项目,很尴尬。通过查阅网上教程,成功搭建好项目环境,同时对前段工程化有了朦朦胧胧的认知,因此将环境搭建过程分享给大家。

首先,列出来我们需要的东西:

node.js环境(npm包管理器)
vue-cli 脚手架构建工具
cnpm  npm的淘宝镜像

安装node.js

安装需要安装v10.15.3稳定版本,不要安装v12.0.0版本,目前使用最新的版本运行项目是会报错。

 

从node.js官网下载并安装node,安装过程很简单,一路“下一步”就可以了(傻瓜式安装)。
安装完成之后,打开命令行工具,输入 node -v,如下图,如果出现相应的版本号,则说明安装成功。

 

npm包管理器,是集成在node中的,所以,直接输入 npm -v就会如下图所示,显示出npm的版本信息。

 

OK!node环境已经安装完成,npm包管理器也有了。由于有些npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候失败,所有我还需要npm的国内镜像---cnpm。

安装cnpm

在命令行中输入 npm install -g cnpm --registry=http://registry.npm.taobao.org 然后等待,安装完成如下图。

 

完成之后,我们就可以用cnpm代替npm来安装依赖包了。如果想进一步了解cnpm的,查看淘宝npm镜像官网。

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

在命令行中运行命令 cnpm install -g vue-cli ,然后等待安装完成。(注意,这里使用cnpm来替代npm,不然速度超级慢,会导致卡在那)
通过以上三部,我们需要准备的环境和工具都准备好了,接下来就开始使用vue-cli来构建项目。

 

查看vue-cli版本: vue -V (大写的V)

用vue-cli构建项目

要创建项目,首先我们要选定目录,然后再命令行中把目录转到选定的目录。

在桌面目录下,在命令行中运行命令 vue init webpack firstVue 。解释一下这个命令,这个命令的意思是初始化一个项目,其中webpack是构建工具,也就是整个项目是基于webpack的。其中firstVue是整个项目文件夹的名称,这个文件夹会自动生成在你指定的目录中(我的实例中,会在桌面生成该文件夹),如下图。

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

打开firstVue文件夹,项目文件如下所示。

 

这就是整个项目的目录结构,其中,我们主要在src目录中做修改。这个项目现在还只是一个结构框架,整个项目需要的依赖资源都还没有安装,如下图。

 

安装项目所需的依赖

要安装依赖包,首先cd到项目文件夹(firstVue文件夹),然后运行命令 cnpm install ,等待安装。

 

安装完成之后,会在我们的项目目录firstVue文件夹中多出一个node_modules文件夹,这里边就是我们项目需要的依赖包资源。

 

安装完依赖包之后,就可以运行整个项目了。

运行项目

在项目目录中,运行命令 npm run dev ,会用热加载的方式运行我们的应用,热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。

这里简单介绍下 npm run dev 命令,其中的“run”对应的是package.json文件中,scripts字段中的dev,也就是 node build/dev-server.js命令的一个快捷方式。

项目运行成功后,浏览器会自动打开localhost:8080(如果浏览器没有自动打开,可以手动输入)。运行成功后,会看到如下所示的界面。

 

如果看到这个页面,说明项目运行成功了。

 

 

 

 

 

踩坑注意:

安装需要安装v10.15.3稳定版本,不要安装v12.0.0版本,目前使用最新的版本运行项目是会报错。

如果安装v12.0.0版本报了这个错误就卸载后重新安装v10.15.3版本就可以了。

 

 

查看版本:

查看node版本: node -v

查看npm版本:npm -v

查看cnpm版本:cnpm -v

查看vue-cli版本:vue -V (大写)   vue --version

查看webpack版本:webpack -v

 

 

 

vue-cli 3.+版本 

vue-cli 3.+版本使用新的命令构建项目,目录结构也和之前的有所不同

 

npm create my-app

cd my-app

npm sun serve

 

转载于:https://www.cnblogs.com/panchanggui/p/10783074.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/462748.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

用上Linux后收集变得山穷水尽

作者: ginceo 出自: http://www.linuxdiyf.com   没用Linux时上彀总得先开防火墙,然后再开杀毒软件把守,假如少了这些步骤我的机子将遭到史无前例的毁伤,有的时分换来的是硬盘继续事项一小时。遇到网友发来的音讯还是毛骨悚然,…

MySQL5.7 常用系统表大全

MySQL5.7 默认的模式有:information_schema, 具有 61个表; m ysqL, 具有31个表; performance_schema,具有87个表; sys, 具有1个表, 100个视图. Information_schema数据库是MySQL自带的,它提供了…

Hibernate初学之CURD

Hibernate初学之CURD 以前学过JDBC的增删改查,感觉挺方便的,用hibernate框架则会更加简便, 关于hibernate的增删改查模块,我感觉用代码解释再合适不过了; 首先是导包问题:应用hibernate需要导十个包&#x…

innobackupex备份工具

Top NSD DBA1 DAY07 innobackupex备份工具1 innobackupex备份工具 1.1 问题 安装percona软件包innobackupex完整备份、增量备份操作。恢复数据1.2 步骤 实现此案例需要按照如下步骤进行。 步骤一:安装XtraBackup软件包 1)了解软件包描述信息 [rootdbsvr1…

计算机网络读书笔记(1)

传输控制协议TCP最主要特点: 1、 面向连接的传输层协议,类似于打电话 2、 点对点(一对一),每一条TCP只能有两个端点 3、 提供可靠交付的服务 4、 全双工通信 5、 面向字节流(所谓流:流入到…

网卡驱动收发包过程图解

网卡 网卡工作在物理层和数据链路层,主要由PHY/MAC芯片、Tx/Rx FIFO、DMA等组成,其中网线通过变压器接PHY芯片、PHY芯片通过MII接MAC芯片、MAC芯片接PCI总线 PHY芯片主要负责:CSMA/CD、模数转换、编解码、串并转换 MAC芯片主要负责&#x…

Cisco路由器全局、接口、协议调试指南

全局调试 在配置Cisco路由器时,全局和接口命令的界限是十分明显的。在这种情况下,我们使用“全局”来标识那些不能用于接口调试或者特定的传输介质类型 和协议调试的命令。例如,在2500系列路由器中,就可以使用调试命令分析Cisco发…

发送带颜色的MSG

作者:深渊野鱼 来源:博客园 发布时间:2008-01-09 15:04 阅读:245 次 原文链接 [收藏] 用户经常发送MESSAGE,MESSAGE的颜色往往是绿色的,其实是可以发送彩色的MESSAGE的。解答 1.创建SNDCOLMSG CLP程序。SNDCOL…

在c++中,如果派生类没有重写基类中对应virtual函数会怎样?

在c中&#xff0c;如果一个派生类没有重写基类中对应的虚函数&#xff0c;那么在派生类的构造函数中依然会创建虚指针&#xff0c;但是该虚指针指向的是基类的虚表。 #include <iostream> #include <string>class Base { public:virtual void foo() {std::cout &l…

哪些类继承了Collection接口

Collection集合的基本结构&#xff1a; 1、Collection接口 Collection是最基本集合接口&#xff0c;它定义了一组允许重复的对象。Collection接口派生了两个子接口Set和List&#xff0c;分别定义了两种不同的存储方式&#xff0c;如下&#xff1a; 2、 Set接口 Set接口继承于Co…

陶哲轩实分析 定理 13.1.5

设 $(X,d_X)$ 是度量空间,并设 $(Y,d_Y)$ 是另一个度量空间.设 $f:X\to Y$是函数,那么 $f$ 是连续的可以推出 (c)只要 $V$ 是 $Y$ 中的开集,集合 $f^{-1}(V):\{x\in X:f(x)\in V\}$ 就 是 $X$ 中的开集.\begin{proof} 为了证明 $f^{-1}(V)$ 是开集,我们只用证明对于 $f^{-1}(V)…

安装Orchard错误

直接使用Visual Studio2010运行没有任何问题&#xff0c;但是配置到IIS就报如下的错误&#xff1a; 错误摘要 HTTP 错误 500.19 - Internal Server Error 无法访问请求的页面&#xff0c;因为该页的相关配置数据无效。 模块 IIS Web Core 通知 BeginRequest 处理程序 尚未确定 …

在c++中一个空类占用的字节数

结论&#xff1a; 在c中一个空类占用&#xff1a;1Byte。 有的同学认为一个空类占0Byte&#xff0c;那么定义一个空类时&#xff0c;他存放到哪里呢&#xff1f;为此&#xff0c;在c编译器中&#xff0c;为空类设置了占用1Byte内存。 #include <iostream> // std::c…

SpringBoot整合Mybatis-plus实现增删查改

今天给大家分享一下SpringBoot整合Mybatis-plus的增删查改案例。 pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance&qu…

Web Service security UserNameToken 使用

一: Web Service security UserNameToken 概念 原理&#xff1a;用户在发送请求的时候&#xff0c;在Soap head中加入自己的用户名以及密码&#xff0c;接受请求的Service通过之前与Client建立的共享密码来验证密码的合法性从而实现鉴别用户的功能。 <wsse:UsernameToken>…

使用Mule ESB与Groovy编排RESTful服务【转】很适合我们当前的架构

http://www.infoq.com/cn/articles/restful-services-mule 在过去几年中&#xff0c;REST风格的软件架构获得了越来越多的认可&#xff0c;这主要是因为它减少了系统对动件的需求、同时使系统耦合性更低&#xff0c;弹性更好。 目前越来越多的REST资源出现在企业应用中&#xf…

《领域驱动设计》第二部分:模型驱动设计的构造块 第四章:分离领域 阅读笔记...

内容概述 将领域对象与系统中的其他功能分离 第一小节 介绍了分离领域的技术&#xff1a;Layered Architecture。 第二小节 指出大部分软件系统都会采用分层的架构&#xff0c;但是分层方案有很多种。领域驱动设计只要求领域层存在即可&#xff0c;并且领域模型在领域层中表现不…

Starling框架帮助手册中文版(PDF下载)

什么是Statling&#xff1f;Starling 是一个基于Stage3D&#xff08;这是Flash Player11及Adobe AIR 3中新增的为3D加速功能所提供的API&#xff09;所开发的一个能够使用GPU来加速的2D Flash应用程序的ActionScript3框架。Starling主要是为游戏开发而设计的, 但是它的用途不仅…

在X32与X64下,每种数据类型占用的字节数

在X32与X64下&#xff0c;每种数据类型占用的字节数分别如下&#xff1a; X32 X64 指针 4Byte 8Byte char 1Byte …

一个Setup Factory的Lua脚本

需求是把安装路径中的反斜杠转义成斜杠并写入到配置文件特定的地方去。 读取配置文件 由于配置文件不大 一次性的读入到内存中 local f io.input(SessionVar.Expand("%AppFolder%\\Common\\conf.xml"), "r");local r f:read("*all");io.close()…