通过命令行生成vue项目框架的方法


Posted in Javascript onJuly 12, 2017

本文介绍了通过命令行生成vue项目框架的方法,现在分享给大家

-- 安装nodejs

用命令行生成vue项目框架需要npm包管理器来安装,而npm又是在安装nodejs的时候同时安装的,

所以首先要安装nodejs,学习vue有必要了解下nodejs和npm的基本知识:

nodejs安装: https://3water.com/article/113457.htm

npm 介绍: https://3water.com/article/87893.htm

-- 安装命令行工具

npm install -g vue-cli

-g表示全局安装, vue-cli是模块,全局安装的模块可以在命令行直接使用.

通过命令行生成vue项目框架的方法

红框里是安装命令,由于npm网站在国内速度非常慢,所以在命令后面加上淘宝的镜像,很快就安装好了.也可以使用cnpm安装.

安装后在命令行输入 vue -version 能看到版本号表示全局安装成功,下面就可以使用命令行创建项目了.

通过命令行生成vue项目框架的方法

-- 创建项目框架

vue init webpack my-project

创建一个基于"webpack"的项目,后面是项目名,

通过命令行生成vue项目框架的方法

按照提示输入,项目名,项目描述,项目作者等等,看到最后这句项目就创建好了,

项目结构:这是安装了依赖以后的截图,没安装依赖以前是没有node_modules文件夹的

通过命令行生成vue项目框架的方法

刚我们命令行输入的东西就在package.json这个文件里,打开文件

通过命令行生成vue项目框架的方法

项目名字,版本,描述,作者等,后面还有运行项目命令,项目依赖,开发环境项目依赖等.

-- 安装依赖

生成了项目以后是不能直接运行的,现在很多项目都依赖许许多多的模块,需要逐一安装,

ctrl+c 停掉刚生成项目的命令,cd vue-project 进入项目跟目录, 用命令npm install 安装

通过命令行生成vue项目框架的方法

同样是使用淘宝镜像.

通过命令行生成vue项目框架的方法

当这个命令运行完成以后会多出一个node_modules文件夹,里面就是项目所需的所有依赖,可以看到有很多模块,这些模块都是在package.json文件里定义好了的.

通过命令行生成vue项目框架的方法

dependencies是项目依赖,

devDependencies是开发时项目依赖.

-- 运行测试

好了,依赖安装完成后就可以运行我们的项目了命令:

npm run dev

通过命令行生成vue项目框架的方法

看到这样的输入项目就运行起来了,然后打开浏览器,输入第二个红框的地址 localhost:8080,

浏览器截图.

通过命令行生成vue项目框架的方法

项目就运行起来了.命令行生成的vue项目,还支持热启动,当项目文件有改动的时候,页面会自动变化,<script>标签里的js代码修改后,还得手动刷新页面,不过已经非常棒了.

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
给moz-firefox下添加IE方法和属性
Apr 10 Javascript
初窥JQuery(二)事件机制(2)
Dec 06 Javascript
JavaScript生成随机数的4种自定义函数分享
Feb 28 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
Feb 15 Javascript
js剪切板应用clipboardData实例解析
May 29 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
Sep 05 Javascript
JS简单验证上传文件类型的方法
Apr 17 Javascript
Jquery EasyUI $.Parser
Jun 02 jQuery
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
Apr 01 Javascript
element-ui表格数据转换的示例代码
Aug 24 Javascript
详解vue路由篇(动态路由、路由嵌套)
Jan 27 Javascript
JQuery复选框全选效果如何实现
May 08 jQuery
微信小程序实现点击返回顶层的方法
Jul 12 #Javascript
使用AngularJS对表单提交内容进行验证的操作方法
Jul 12 #Javascript
JQuery EasyUI的一些常用组件
Jul 12 #jQuery
JavaScript严格模式下关于this的几种指向详解
Jul 12 #Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 #jQuery
详解如何用webpack打包一个网站应用项目
Jul 12 #Javascript
利用node.js实现自动生成前端项目组件的方法详解
Jul 12 #Javascript
You might like
如何隐藏你的.php文件
2007/01/04 PHP
第七章 php自定义函数实现代码
2011/12/30 PHP
php控制linux服务器常用功能 关机 重启 开新站点等
2012/09/05 PHP
调整PHP的性能
2013/10/30 PHP
PhpDocumentor 2安装以及生成API文档的方法
2014/05/21 PHP
PHP的foreach中使用引用时需要注意的一个问题和解决方法
2014/05/29 PHP
CI使用Tank Auth转移数据库导致密码用户错误的解决办法
2014/06/12 PHP
php实现四舍五入的方法小结
2015/03/03 PHP
js创建对象的几种常用方式小结(推荐)
2010/10/24 Javascript
关闭页面window.location事件未执行的原因及解决方法
2014/09/01 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
2018/03/22 Javascript
js限制输入框只能输入数字(onkeyup触发)
2018/09/28 Javascript
vue.js 2.0实现简单分页效果
2019/07/29 Javascript
解决layui动态加载复选框无法选中的问题
2019/09/20 Javascript
js实现多个标题吸顶效果
2020/01/08 Javascript
vue项目打包之开发环境和部署环境的实现
2020/04/23 Javascript
vue element-ul实现展开和收起功能的实例代码
2020/11/25 Vue.js
[04:14]从西雅图到上海——玩家自制DOTA2主题歌曲应援TI9
2019/07/11 DOTA
python实现感知器
2017/12/19 Python
python flask实现分页的示例代码
2018/08/02 Python
Python中栈、队列与优先级队列的实现方法
2019/06/30 Python
PyQt5基本控件使用之消息弹出、用户输入、文件对话框的使用方法
2019/08/06 Python
Django 查询数据库并返回页面的例子
2019/08/12 Python
解析python实现Lasso回归
2019/09/11 Python
HTML5调用手机摄像头拍照的实现思路及代码
2014/06/15 HTML / CSS
HTML5 拖放(Drag 和 Drop)详解与实例代码
2017/09/14 HTML / CSS
Canvas实现放大镜效果完整案例分析(附代码)
2020/11/26 HTML / CSS
伦敦剧院门票:From The Box Office
2018/06/30 全球购物
Stutterheim瑞典:瑞典高级外套时装品牌
2019/06/24 全球购物
优秀通讯员事迹材料
2014/01/28 职场文书
专题组织生活会方案
2014/06/15 职场文书
毕业生找工作求职信
2014/08/05 职场文书
企业介绍信范文
2015/01/30 职场文书
银行稽核岗位职责
2015/04/13 职场文书
评奖评优个人先进事迹材料
2015/11/04 职场文书
外出培训学习心得体会
2016/01/18 职场文书