一开始很多刚入手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

如何运行一个Vue项目的更多相关文章

  1. Vue系列——如何运行一个Vue项目

    声明 本文转自:如何运行一个Vue项目 正文 一开始很多刚入手vue.js的人,会扒GitHub上的开源项目,但是发现不知如何运行GitHub上的开源项目,很尴尬.通过查阅网上教程,成功搭建好项目环境 ...

  2. 1.如何运行一个Vue项目

    如何运行一个Vue项目 需要的环境: node.js环境(npm包管理器) vue-cli 脚手架构建工具 cnpm npm的淘宝镜像 1. 安装node.js 从node.js官网下载并安装node ...

  3. 下载一个vue项目执行npm install 后运行项目npm run dev后出错 - 问题解决

    在SVN上拉下来一个vue项目,上面没有提交项目里面的node_modules文件夹,所以要自己执行 npm install 安装,但安装完后运行项目后却报错了: $ npm run dev > ...

  4. 创建一个vue项目的过程

    创建一个vue项目: 1.首先从UI手上拿到PSD设计图,然后看设计搞的内容,需要做个大概的页面布局 2.做vue之前不许安装node,因为做vue项目要和node结合使用 3.然后安装vue脚手架: ...

  5. VUE系列一:VUE入门:搭建脚手架CLI(新建自己的一个VUE项目)

    一.VUE脚手架介绍 官方说明:Vue 提供了一个官方的 CLI,为单页面应用快速搭建 (SPA) 繁杂的脚手架.它为现代前端工作流提供了 batteries-included 的构建设置.只需要几分 ...

  6. 构建一个Vue项目

    一 我们需要安装vue.js Vue.js官网 当我们已经安装了vue-cli,那么我们需要更新Vue-cli. vue-cli3.0使用及配置 二 安装好了之后: 我们可以直接使用命令:mkdir ...

  7. vue-用Vue-cli从零开始搭建一个Vue项目

    Vue是近两年来比较火的一个前端框架(渐进式框架吧). Vue两大核心思想:组件化和数据驱动.组件化就是将一个整体合理拆分为一个一个小块(组件),组件可重复使用:数据驱动是前端的未来发展方向,释放了对 ...

  8. 一、vue:如何新建一个vue项目

    比较好用的一个脚手架:https://a1029563229.gitbooks.io/vue/content/cooking-cli.html 创建一个vue项目的流程: 1.安装node,版本号必须 ...

  9. 如何搭建一个vue项目(完整步骤)

    参考资料 一.安装node环境 1.下载地址为:https://nodejs.org/en/ 2.检查是否安装成功:如果输出版本号,说明我们安装node环境成功 3.为了提高我们的效率,可以使用淘宝的 ...

随机推荐

  1. Qt QSpinBox 和 QDoubleSpinBox

    展示一个效果: QDoubleSpinBox跟QSpinBox类似,只是多了一个decimal.

  2. Rsync数据同步工具

                                        Rsync数据同步工具 什么是Rsync? Rsync是一款开源的.快速的.多功能的,可以实现全量及增量的本地或原程数据同步备份 ...

  3. 华为AR-111S路由器GRE协议设置

    一.GRE的定义: gre(generic routing encapsulation,通用路由封装)协议是对某些网络层协议(如ip 和ipx)的数据报进行封装,使这些被封装的数据报能够在另一个网络层 ...

  4. 微信公众平台开发教程(三)_OAuth2.0认证

    一.微信授权认证 如果用户在微信客户端中访问第三方网页,公众号可以通过微信网页授权机制,来获取用户基本信息,进而实现业务逻辑. 关于网页授权的两种scope的区别说明 1.以snsapi_base为s ...

  5. hdu 2838 Cow Sorting

    题意: 给出一个数组,要求把他们排成升序,两个数字交换的代价是x + y,求代价的总和. 思路: 简单的逆序对变形,树状数组维护小于的cnt和sum即可. 代码: #include <stdio ...

  6. Android-Gradle(四)

    当你在开发一个app,通常你会有几个版本.大多数情况是你需要一个开发版本,用来测试app和弄清它的质量,然后还需要一个生产版本.这些版本通常有不同的设置,例如不同的URL地址.更可能的是你可能需要一个 ...

  7. rabbitMQ Management http://localhost:15672/ 打不开

    C:\RabbitMQ Server\rabbitmq_server-3.7.7\sbin>rabbitmq-plugins enable rabbitmq_management 安装rabbi ...

  8. 配置React Native 安卓开发环境

    配置主要分为以下几步: 安装node.js 安装AndroidStudio 安装React Native命令行工具 搭建React Native版本的Hello World,修改代码查看效果 第一步 ...

  9. webServices接口开发过程中项目启动遇到的错误org.xml.sax.SAXParseException; lineNumber: 20; columnNumber: 422; schema_reference.4: Failed to read schema document 'http://www.springframework.org/schema/beans/spring-bean

    org.xml.sax.SAXParseException; lineNumber: 20; columnNumber: 422; schema_reference.4: Failed to read ...

  10. 如何在页面上同时使用 jQuery 和其他框架?

    Query 和其他 JavaScript 框架 正如您已经了解到的,jQuery 使用 $ 符号作为 jQuery 的简写. 如果其他 JavaScript 框架也使用 $ 符号作为简写怎么办? 其他 ...