如何运行一个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
如何运行一个Vue项目的更多相关文章
- Vue系列——如何运行一个Vue项目
声明 本文转自:如何运行一个Vue项目 正文 一开始很多刚入手vue.js的人,会扒GitHub上的开源项目,但是发现不知如何运行GitHub上的开源项目,很尴尬.通过查阅网上教程,成功搭建好项目环境 ...
- 1.如何运行一个Vue项目
如何运行一个Vue项目 需要的环境: node.js环境(npm包管理器) vue-cli 脚手架构建工具 cnpm npm的淘宝镜像 1. 安装node.js 从node.js官网下载并安装node ...
- 下载一个vue项目执行npm install 后运行项目npm run dev后出错 - 问题解决
在SVN上拉下来一个vue项目,上面没有提交项目里面的node_modules文件夹,所以要自己执行 npm install 安装,但安装完后运行项目后却报错了: $ npm run dev > ...
- 创建一个vue项目的过程
创建一个vue项目: 1.首先从UI手上拿到PSD设计图,然后看设计搞的内容,需要做个大概的页面布局 2.做vue之前不许安装node,因为做vue项目要和node结合使用 3.然后安装vue脚手架: ...
- VUE系列一:VUE入门:搭建脚手架CLI(新建自己的一个VUE项目)
一.VUE脚手架介绍 官方说明:Vue 提供了一个官方的 CLI,为单页面应用快速搭建 (SPA) 繁杂的脚手架.它为现代前端工作流提供了 batteries-included 的构建设置.只需要几分 ...
- 构建一个Vue项目
一 我们需要安装vue.js Vue.js官网 当我们已经安装了vue-cli,那么我们需要更新Vue-cli. vue-cli3.0使用及配置 二 安装好了之后: 我们可以直接使用命令:mkdir ...
- vue-用Vue-cli从零开始搭建一个Vue项目
Vue是近两年来比较火的一个前端框架(渐进式框架吧). Vue两大核心思想:组件化和数据驱动.组件化就是将一个整体合理拆分为一个一个小块(组件),组件可重复使用:数据驱动是前端的未来发展方向,释放了对 ...
- 一、vue:如何新建一个vue项目
比较好用的一个脚手架:https://a1029563229.gitbooks.io/vue/content/cooking-cli.html 创建一个vue项目的流程: 1.安装node,版本号必须 ...
- 如何搭建一个vue项目(完整步骤)
参考资料 一.安装node环境 1.下载地址为:https://nodejs.org/en/ 2.检查是否安装成功:如果输出版本号,说明我们安装node环境成功 3.为了提高我们的效率,可以使用淘宝的 ...
随机推荐
- 3#Java案例
以下内容引用Github地址https://github.com/DuGuQiuBai/Java/blob/master/day01/code/02_%E5%B8%A6%E6%B3%A8%E9%87% ...
- Zepto源码分析之一(代码结构及初始化)
关于读源码,读jQuery自然是不错,但太过于庞大不易解读,对于小白,最好从Zepto,Lodash这样的小库入手. 这里使用的是zepto1.1.6版本为例. 自执行函数 在阅读之前,先弄清楚闭包和 ...
- windows 下安装weblogic
下载weblogic安装文件 https://www.oracle.com/technetwork/middleware/weblogic/downloads/index.html 在目录下, 下载后 ...
- 华为AR-111S路由器GRE协议设置
一.GRE的定义: gre(generic routing encapsulation,通用路由封装)协议是对某些网络层协议(如ip 和ipx)的数据报进行封装,使这些被封装的数据报能够在另一个网络层 ...
- Nodejs使用robot操作鼠标键盘
1.安装robotjs库 前提是配置了cnpm cnpm i robotjs -g 2.如果报错VCBuild.exe,如下可以安装windows-tool MSBUILD : error MSB ...
- ASP.NET MVC案例教程(六)
ASP.NET六 一个小难题 我们继续完善“MVC公告发布系统”,这次,我们的需求是对公告发布功能添加日志记录能力,即在发布公告前,记录一次,在公告发布成功后,再记录一次.然后还要使得其具备异常处理, ...
- Linux 系统的启动过程
1.基本概念 BIOS 中文名 主板BIOS 外文名 Basic Input/Output System 全 称 基本输入输出系统(全称是ROM-BIOS,是只读存储器基本输入/输出 ...
- c#进阶之泛型
好久没用写博了,感觉工作的越久就越发的懒了,啦啦啦!德玛西亚! 感觉最近食欲不正,便想写写组织下自己的学习路程: 泛型,可能很多朋友在学习这个东西的时候都源于面向对象,当然我也不例外:从一个实体继承另 ...
- URLConnection类详解-转
转-http://www.cnblogs.com/shijiaqi1066/p/3753224.html 1. URLConnection概述 URLConnection是一个抽象类,表示指向URL指 ...
- maven配置国内阿里云镜像
<mirrors> <mirror> <id>alimaven</id> <mirrorOf>central</mirrorOf> ...