使用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 相关文章推荐
Javascript 日期对象Date扩展方法
May 30 Javascript
Extjs NumberField后面加单位实现思路
Jul 30 Javascript
将查询条件的input、select清空
Jan 14 Javascript
百度移动版的url编码解码示例
Apr 29 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
Aug 24 Javascript
简介alert()与console.log()的不同
Aug 26 Javascript
Javascript+CSS3实现进度条效果
Oct 28 Javascript
JavaScript中的call和apply的用途以及区别
Jan 11 Javascript
vue获取DOM元素并设置属性的两种实现方法
Sep 30 Javascript
VUE.CLI4.0配置多页面入口的实现
Nov 25 Javascript
javascript实现视频弹幕效果(两个版本)
Nov 28 Javascript
JavaScript数组排序功能简单实现
May 14 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服务器实现多session并发运行
2006/10/09 PHP
解析PHP跳出循环的方法以及continue、break、exit的区别介绍
2013/07/01 PHP
PHP输出九九乘法表代码实例
2015/03/27 PHP
PHP错误和异常处理功能模块示例
2016/11/12 PHP
php字符串过滤strip_tags()函数用法实例分析
2019/06/24 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
php数组函数array_push()、array_pop()及array_shift()简单用法示例
2020/01/26 PHP
添加到收藏夹代码(兼容几乎所有的浏览器)
2007/01/09 Javascript
JS删除数组元素的函数介绍
2013/03/27 Javascript
javascript实现左右控制无缝滚动
2014/12/31 Javascript
javascript 动态修改css样式方法汇总(四种方法)
2015/08/27 Javascript
简单实现js浮动框
2016/12/13 Javascript
vue过渡和animate.css结合使用详解
2017/06/14 Javascript
bootstrap多层模态框滚动条消失的问题
2017/07/21 Javascript
基于vue配置axios的方法步骤
2017/11/09 Javascript
vue2 router 动态传参,多个参数的实例
2017/11/10 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
2018/04/28 Javascript
Vue中的vue-resource示例详解
2018/11/02 Javascript
JS call()及apply()方法使用实例汇总
2020/07/11 Javascript
SpringBoot+Vue 前后端合并部署的配置方法
2020/12/30 Vue.js
关于javascript中的promise的用法和注意事项(推荐)
2021/01/15 Javascript
[01:39:42]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python对html代码进行escape编码的方法
2015/05/04 Python
pytorch查看torch.Tensor和model是否在CUDA上的实例
2020/01/03 Python
python GUI库图形界面开发之PyQt5浏览器控件QWebEngineView详细使用方法
2020/02/26 Python
Python sorted排序方法如何实现
2020/03/31 Python
中国海淘族值得信赖的海淘返利网站:55海淘
2017/01/16 全球购物
Vinatis德国:法国领先的葡萄酒邮购公司
2020/09/07 全球购物
毕业自我评价
2014/02/05 职场文书
篮球兴趣小组活动总结
2014/07/07 职场文书
村支部书记群众路线对照检查材料思想汇报
2014/10/08 职场文书
2014年学校总务处工作总结
2014/12/08 职场文书
高考升学宴答谢词
2015/01/20 职场文书
运动会新闻报道稿
2015/07/22 职场文书
导游词之徐州云龙湖
2019/11/19 职场文书
教你使用Ubuntu搭建DNS服务器
2022/09/23 Servers