通过命令行生成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 相关文章推荐
(function($){...})(jQuery)的意思
Jul 22 Javascript
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
Jun 26 Javascript
jQuery中first()方法用法实例
Jan 06 Javascript
javascript 动态创建表格的2种方法总结
Mar 04 Javascript
JavaScript中的fontsize()方法使用详解
Jun 08 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
Oct 26 Javascript
javascript模块化简单解析
Apr 07 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
Feb 15 Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
Jan 03 Javascript
详解Angular中通过$location获取地址栏的参数
Aug 02 Javascript
详解小程序rich-text对富文本支持方案
Nov 28 Javascript
JS获取当前时间戳方法解析
Aug 29 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
PHP面向对象——访问修饰符介绍
2012/11/08 PHP
php一维二维数组键排序方法实例总结
2014/11/13 PHP
PHP经典面试题集锦
2015/03/19 PHP
Yii CGridView用法实例详解
2016/07/12 PHP
用正则xmlHttp实现的偷(转)
2007/01/22 Javascript
javascript 学习笔记(六)浏览器类型及版本信息检测代码
2011/04/08 Javascript
详谈 Jquery Ajax异步处理Json数据.
2011/09/09 Javascript
清除div下面的所有标签的方法
2014/02/17 Javascript
jquery图片滚动放大代码分享(2)
2015/08/28 Javascript
使用angularjs创建简单表格
2016/01/21 Javascript
Angular.js与Bootstrap相结合实现手风琴菜单代码
2016/04/13 Javascript
AngularJs Dependency Injection(DI,依赖注入)
2016/09/02 Javascript
jQuery将表单序列化成一个Object对象的实例
2016/11/29 Javascript
提高JavaScript执行效率的23个实用技巧
2017/03/01 Javascript
vue.js中$set与数组更新方法
2018/03/08 Javascript
AngularJS上传文件的示例代码
2018/11/10 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
2018/12/21 Javascript
详解vue-router的导航钩子(导航守卫)
2020/11/02 Javascript
[53:23]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
Django如何自定义分页
2018/09/25 Python
python3下载抖音视频的完整代码
2019/06/05 Python
Python Scrapy框架:通用爬虫之CrawlSpider用法简单示例
2020/04/11 Python
python实现126邮箱发送邮件
2020/05/20 Python
Python+Dlib+Opencv实现人脸采集并表情判别功能的代码
2020/07/01 Python
python实现不同数据库间数据同步功能
2021/02/25 Python
html5本地存储_动力节点Java学院整理
2017/07/12 HTML / CSS
Under Armour澳大利亚官网:美国知名的高端功能性运动品牌
2018/02/22 全球购物
运动会广播稿300字
2014/01/10 职场文书
网上书店创业计划书
2014/01/12 职场文书
高中打架检讨书
2014/02/13 职场文书
代办委托书怎样写
2014/04/08 职场文书
千与千寻观后感
2015/06/04 职场文书
付款证明格式范文
2015/06/19 职场文书
干部作风纪律整顿心得体会
2016/01/23 职场文书
MySQL库表太大怎么办? 数据库分库分表项目实践
2022/04/11 MySQL
python三子棋游戏
2022/05/04 Python