使用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 相关文章推荐
jquery 面包屑导航 具体实现
Jun 05 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战一)
Aug 21 Javascript
在JavaScript中实现类的方式探讨
Aug 28 Javascript
比较不错的JS/JQuery显示或隐藏文本的方法
Feb 13 Javascript
JavaScript中的操作符==与===介绍
Dec 31 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
Sep 27 Javascript
利用Javascript实现BMI计算器
Aug 16 Javascript
详解vue-router和vue-cli以及组件之间的传值
Jul 04 Javascript
使用Node.js实现RESTful API的示例
Aug 01 Javascript
基于vue2实现左滑删除功能
Nov 28 Javascript
node.js实现带进度条的多文件上传
Mar 27 Javascript
详解elementUI中input框无法输入的问题
Apr 27 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 date函数常用时间处理方法
2015/05/11 PHP
浅谈Laravel POST,PUT,PATCH 路由的区别
2019/10/15 PHP
关于二级域名下使用一级域名下的COOKIE的问题
2011/11/07 Javascript
封装html的select标签的js操作实例
2013/07/02 Javascript
用jQuery模拟select下拉框的简单示例代码
2014/01/26 Javascript
jquery仿搜索自动联想功能代码
2014/05/23 Javascript
JavaScript的各种常见函数定义方法
2014/09/16 Javascript
深入探密Javascript数组方法
2015/01/08 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
2016/08/30 Javascript
JavaScript reduce和reduceRight详解
2016/10/24 Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
2016/10/27 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
2016/10/27 Javascript
Node.js中process模块常用的属性和方法
2016/12/13 Javascript
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
2017/08/29 Javascript
bootstrap-table实现服务器分页的示例 (spring 后台)
2017/09/01 Javascript
详谈js原型继承的一些问题
2017/09/06 Javascript
js 取消页面可以选中文字的功能方法
2018/01/02 Javascript
ES6下子组件调用父组件的方法(推荐)
2018/02/23 Javascript
浅谈webpack 构建性能优化策略小结
2018/06/13 Javascript
说说如何在Vue.js中实现数字输入组件的方法
2019/01/08 Javascript
微信小程序常用赋值方法小结
2019/04/30 Javascript
原生js canvas实现鼠标跟随效果
2020/08/02 Javascript
[02:47]DOTA2亚洲邀请赛 HR战队出场宣传片
2015/02/07 DOTA
[47:08]OG vs INfamous 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python2.7实现复制大量文件及文件夹资料
2019/08/31 Python
深入浅析Python科学计算库Scipy及安装步骤
2019/10/12 Python
用python写PDF转换器的实现
2020/10/29 Python
解决HTML5中的audio在手机端和微信端的不能自动播放问题
2019/11/04 HTML / CSS
飞利浦法国官网:Philips法国
2019/07/10 全球购物
材料物理专业大学毕业生求职信
2013/10/15 职场文书
2014年驻村干部工作总结
2014/11/17 职场文书
2014年小学安全工作总结
2014/12/04 职场文书
幼儿园感恩节活动总结
2015/03/24 职场文书
css3实现背景图片颜色修改的多种方式
2021/04/13 HTML / CSS
Python绘制散点图之可视化神器pyecharts
2022/07/07 Python
微软发布Windows 11今年最大更新22H2(附 ISO 镜像官方下载)
2022/09/23 数码科技