详解如何运行vue项目


Posted in Javascript onApril 15, 2019

在师兄的推荐下入坑vue.js ,发现不知如何运行GitHub上的开源项目,很尴尬。通过查阅网上教程,成功搭建好项目环境,同时对前段工程化有了朦朦胧胧的认知,因此将环境搭建过程分享给大家。

可以看下我的github:https://github.com/padipata ,里面有我学习、工作写的一些vue项目。

言归正传~~

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

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

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

详解如何运行vue项目

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

详解如何运行vue项目

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

安装cnpm

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

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

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

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

用vue-cli构建项目

用vue-cli构建项目要创建项目,首先我们要选定目录,然后再命令行中把目录转到选定的目录。在这里,我选择桌面来存放新建的项目,则我们需要先把目录cd到桌面,如下图

详解如何运行vue项目

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

详解如何运行vue项目

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

详解如何运行vue项目

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

详解如何运行vue项目

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

详解如何运行vue项目

安装项目所需的依赖

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

详解如何运行vue项目

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

详解如何运行vue项目

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

运行项目

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

详解如何运行vue项目

这里简单介绍下npm run dev命令,其中的“run”对应的是package.json文件中,scripts字段中的dev,也就是node build/dev-server.js命令的一个快捷方式。项目运行成功后,浏览器会自动打开localhost:8080(如果浏览器没有自动打开,可以手动输入)。运行成功后,会看到如下所示的界面。

详解如何运行vue项目

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

以上所述是小编给大家介绍的如何运行vue项目详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
ext form 表单提交数据的方法小结
Aug 08 Javascript
javascript事件冒泡和事件捕获详解
May 26 Javascript
JS实现双击编辑可修改状态的方法
Aug 14 Javascript
JavaScript 性能优化小结
Oct 12 Javascript
Node.js中路径处理模块path详解
Nov 14 Javascript
Bootstrap文件上传组件之bootstrap fileinput
Nov 25 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
Jan 04 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
Feb 27 Javascript
AngularJS读取JSON及XML文件的方法示例
May 25 Javascript
js中url对象化管理分析
Dec 29 Javascript
超详细小程序定位地图模块全系列开发教学
Nov 24 Javascript
js作用域及作用域链工作引擎
Jul 07 Javascript
vue单页面在微信下只能分享落地页的解决方案
Apr 15 #Javascript
vue--vuex详解
Apr 15 #Javascript
详解如何模拟实现node中的Events模块(通俗易懂版)
Apr 15 #Javascript
小程序数据通信方法大全(推荐)
Apr 15 #Javascript
前端面试知识点目录一览
Apr 15 #Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
Apr 15 #Javascript
vue-cli项目使用mock数据的方法(借助express)
Apr 15 #Javascript
You might like
基于php设计模式中单例模式的应用分析
2013/05/15 PHP
PHP获取路径和目录的方法总结【必看篇】
2017/03/04 PHP
Javascript valueOf 使用方法
2008/12/28 Javascript
JQuery 1.4 中的Ajax问题
2010/01/23 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
2014/08/22 Javascript
深入理解JS addLoadEvent函数
2016/05/20 Javascript
基于jQuery实现点击列表加载更多效果
2016/05/31 Javascript
JS碰撞运动实现方法详解
2016/12/15 Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
2016/12/23 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
2017/02/11 Javascript
基于JavaScript定位当前的地理位置
2017/04/11 Javascript
Javascript实现页面滚动时导航智能定位
2017/05/06 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
2017/05/25 Javascript
JS数组操作中的经典算法实例讲解
2017/07/26 Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
2018/07/23 Javascript
js 递归json树实现根据子id查父id的方法分析
2019/11/08 Javascript
javascript严格模式详解(含严格模式与非严格模式的区别)
2019/11/12 Javascript
JavaScript canvas动画实现时钟效果
2020/02/10 Javascript
Vue 中使用 typescript的方法详解
2020/02/17 Javascript
[01:06:19]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第二场 1月8日
2021/03/11 DOTA
Python中的__SLOTS__属性使用示例
2015/02/18 Python
Python中用memcached来减少数据库查询次数的教程
2015/04/07 Python
用Python实现一个简单的能够上传下载的HTTP服务器
2015/05/05 Python
详解Python对JSON中的特殊类型进行Encoder
2019/07/15 Python
基于Django signals 信号作用及用法详解
2020/03/28 Python
keras小技巧——获取某一个网络层的输出方式
2020/05/23 Python
深入解析HTML5的IndexedDB索引数据库
2015/09/14 HTML / CSS
Craghoppers德国官网:户外和旅行服装
2020/02/14 全球购物
工作中个人的自我评价
2013/12/31 职场文书
2014年党的群众路线教育实践活动整改措施(个人版)
2014/09/25 职场文书
实习指导老师意见
2015/06/04 职场文书
保险公司增员口号
2015/12/25 职场文书
导游词之潮音寺
2019/09/26 职场文书
vue中利用mqtt服务端实现即时通讯的步骤记录
2021/07/01 Vue.js
mysql连接查询中and与where的区别浅析
2021/07/01 MySQL
clear 万能清除浮动(clearfix:after)
2023/05/21 HTML / CSS