使用vue2.0创建的项目的步骤方法


Posted in Javascript onSeptember 25, 2018

1.由于vue项目依赖 node.js npm 需要先安装.   若没有请先安装,请按照此文章进行安装https://3water.com/article/138020.htm

//检查是否有node.js  npm vue

win+r   输入cmd  输入node -v  回车 会出现node,js的版本

 输入npm -v  回车 会出现npm的版本

输入vue -V 回车 会出现vue的版本

2.安装vue:

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

由于npm网站在国内速度非常慢,所以可以在命令后面加上淘宝的镜像

即:npm install -g vue-cli --registry=https://registry.npm.taobao.org

之后,可以vue --V查看vue是否安装好,出现版本号即安装成功。

3.接下来是创建项目框架

如果想放到指定的目录下,先进入这个目录在执行创建项目的命令

例如:     

e:回车   //进入E盘      cd test回车   //进入E盘的test文件夹

E:\test\vue init webpack my-vue    //创建一个基于"webpack"的项目,后面是项目名 

使用vue2.0创建的项目的步骤方法

依次按照提示输入,项目名、项目描述、项目作者等等,然后一路回车  看到最后这句项目就创建好了。

To get started:  就是告诉你接下来该做什么,依次完成下面3行命令就可以了。进入my-vue项目-----安装npm依赖-----运行项目

以下为此3步的详解

cd my-vue   在my-vue文件下看到项目结构:注:这是安装了依赖以后的截图,没安装依赖以前是没有node_modules文件夹的

使用vue2.0创建的项目的步骤方法

4.安装项目依赖

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

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

使用vue2.0创建的项目的步骤方法

若安装缓慢同样可以使用淘宝镜像

即输入命令:npm install --registry=https://registry.npm.taobao.org

当这个命令运行完成以后会多出一个node_modules文件夹,里面就是项目所需的所有依赖

可以看到有很多模块,这些模块都是在package.json文件里定义好了的.

5.运行测试

npm run dev 

出现如下红色框框表示启动完成,一般流览器会自动跳转出界面http://localhost:8080/,也可以手动打开流览器器输 入地址。

使用vue2.0创建的项目的步骤方法

浏览器界面截图:

使用vue2.0创建的项目的步骤方法

这样项目就搭建完成了。

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

Javascript 相关文章推荐
csdn 博客的css样式 v3
Feb 24 Javascript
DWR Ext 加载数据
Mar 22 Javascript
js 单击式的下拉菜单效果实例
Aug 13 Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
Dec 16 Javascript
jquery插件qrcode在线生成二维码
Apr 26 Javascript
jquery中ready()函数执行的时机和window的load事件比较
Jun 22 Javascript
jQuery中队列queue()函数的实例教程
May 03 Javascript
JavaScript中变量提升与函数提升经典实例分析
Jul 26 Javascript
解决jquery有正确返回值但不执行success函数的问题
Aug 20 jQuery
vue添加axios,并且指定baseurl的方法
Sep 19 Javascript
vue+eslint+vscode配置教程
Aug 09 Javascript
javascript实现视频弹幕效果(两个版本)
Nov 28 Javascript
vue解决一个方法同时发送多个请求的问题
Sep 25 #Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
Sep 25 #Javascript
在vue中多次调用同一个定义全局变量的实例
Sep 25 #Javascript
vue观察模式浅析
Sep 25 #Javascript
详解搭建es6+devServer简单开发环境
Sep 25 #Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
Sep 25 #Javascript
在axios中使用params传参的时候传入数组的方法
Sep 25 #Javascript
You might like
用php获取本周,上周,本月,上月,本季度日期的代码
2009/08/05 PHP
php使用curl下载指定大小的文件实例代码
2017/09/30 PHP
use jscript Create a SQL Server database
2007/06/16 Javascript
jquery插件 cluetip 关键词注释
2010/01/12 Javascript
jquery下实现overlay遮罩层代码
2010/08/25 Javascript
基于jQuery的获取标签名的代码
2012/07/16 Javascript
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
2013/07/09 Javascript
jquery实现瀑布流效果分享
2014/03/26 Javascript
jQuery.holdReady()方法用法实例
2014/12/27 Javascript
JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端
2016/10/08 Javascript
利用vue实现模态框组件
2016/12/19 Javascript
js生成随机数方法和实例
2017/01/17 Javascript
微信小程序搜索功能(附:小程序前端+PHP后端)
2019/02/28 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
2019/04/16 Javascript
Openlayers学习之加载鹰眼控件
2020/09/28 Javascript
js实现验证码干扰(静态)
2021/02/22 Javascript
python处理二进制数据的方法
2015/06/03 Python
Python 删除连续出现的指定字符的实例
2018/06/29 Python
Python supervisor强大的进程管理工具的使用
2019/04/24 Python
python写入数据到csv或xlsx文件的3种方法
2019/08/23 Python
pygame实现俄罗斯方块游戏(基础篇3)
2019/10/29 Python
装上这 14 个插件后,PyCharm 真的是无敌的存在
2021/01/11 Python
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
2013/01/06 HTML / CSS
html5教你做炫酷的碎片式图片切换 (canvas)
2017/07/28 HTML / CSS
美国杂志订阅折扣与优惠网站:Magazines.com
2016/08/31 全球购物
生物技术研究生自荐信
2013/11/12 职场文书
高中毕业自我鉴定
2013/12/22 职场文书
男方父母证婚词
2014/01/12 职场文书
贷款委托书范本
2014/04/08 职场文书
民事赔偿协议书
2014/11/02 职场文书
2016年安全月活动总结
2016/04/06 职场文书
2019大学生预备党员转正思想汇报
2019/06/21 职场文书
2019各种保证书范文
2019/06/24 职场文书
PL350与SW11的比较
2021/04/22 无线电
详解Redis集群搭建的三种方式
2021/05/31 Redis
Python Flask请求扩展与中间件相关知识总结
2021/06/11 Python