通过命令行生成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 相关文章推荐
IE中jscript/javascript的条件编译
Sep 07 Javascript
JavaScript中的16进制字符(改进)
Nov 21 Javascript
简单方法判断JavaScript对象为null或者属性为空
Sep 26 Javascript
node.js中的http.get方法使用说明
Dec 14 Javascript
EasyUI中datagrid在ie下reload失败解决方案
Mar 09 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
Jun 30 Javascript
js实现四舍五入完全保留两位小数的方法
Aug 02 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
Dec 14 Javascript
jQuery Tree Multiselect使用详解
May 02 jQuery
Node.js Buffer用法解读
May 18 Javascript
vue把输入框的内容添加到页面的实例讲解
Nov 11 Javascript
vue 中的动态传参和query传参操作
Nov 09 Javascript
微信小程序实现点击返回顶层的方法
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
上海无线电三厂简史修改版
2021/03/01 无线电
Windows下PHP的任意文件执行漏洞
2006/10/09 PHP
PHP isset()与empty()的使用区别详解
2010/08/29 PHP
微信公众号点击菜单即可打开并登录微站的实现方法
2014/11/14 PHP
php模仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(中)
2017/06/11 PHP
ajaxControlToolkit AutoCompleteExtender的用法
2008/10/30 Javascript
js 刷新页面的代码小结 推荐
2010/04/02 Javascript
网站页面自动跳转实现方法PHP、JSP(下)
2010/08/01 Javascript
JavaScript学习历程和心得小结
2010/08/16 Javascript
从URL中提取参数与将对象转换为URL查询参数的实现代码
2012/01/12 Javascript
java与javascript之间json格式数据互转介绍
2013/10/29 Javascript
js读取被点击次数的简单实例(从数据库中读取)
2014/03/07 Javascript
javascript复制粘贴与clipboardData的使用
2014/10/16 Javascript
多种JQuery循环滚动文字图片效果代码
2020/06/23 Javascript
jQuery元素选择器实例代码
2017/02/06 Javascript
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
2017/02/19 Javascript
js css自定义分页效果
2017/02/24 Javascript
Angular2实现自定义双向绑定属性
2017/03/22 Javascript
如何使用JS在HTML中自定义字符串格式化
2017/07/20 Javascript
[01:16:12]完美世界DOTA2联赛PWL S2 FTD vs Inki 第一场 11.21
2020/11/23 DOTA
Python中的异常处理学习笔记
2015/01/28 Python
Python实现身份证号码解析
2015/09/01 Python
Go语言基于Socket编写服务器端与客户端通信的实例
2016/02/19 Python
Python实现Linux的find命令实例分享
2017/06/04 Python
终端命令查看TensorFlow版本号及路径的方法
2018/06/13 Python
python初学者,用python实现基本的学生管理系统(python3)代码实例
2019/04/10 Python
Django中间件拦截未登录url实例详解
2019/09/03 Python
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
2019/01/17 HTML / CSS
html5使用canvas画三角形
2014/12/15 HTML / CSS
德国知名健康零食网上商店:Seeberger
2017/07/27 全球购物
Monki官网:斯堪的纳维亚的独立时尚品牌
2020/11/09 全球购物
财务部副经理岗位职责范本
2014/06/17 职场文书
施工安全保证书
2015/05/09 职场文书
八月迷情观后感
2015/06/11 职场文书
java设计模式--原型模式详解
2021/07/21 Java/Android
Vertica集成Apache Hudi重磅使用指南
2022/03/31 Servers