使用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 相关文章推荐
js判读浏览器是否支持html5的canvas的代码
Nov 18 Javascript
js动态往表格的td中添加图片并注册事件
Jun 12 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
Mar 05 Javascript
js实现select下拉框菜单
Dec 08 Javascript
原生js的数组除重复简单实例
May 24 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
Jun 08 Javascript
jQuery如何解决IE输入框不能输入的问题
Oct 08 Javascript
JavaScript数组的5种迭代方法
Sep 29 Javascript
React实践之Tree组件的使用方法
Sep 30 Javascript
vue移动端城市三级联动组件使用详解
Jul 26 Javascript
layui 富文本编辑器和textarea值的相互传递方法
Sep 18 Javascript
jQuery操作事件完整实例分析
Jan 10 jQuery
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 变量结构体
2017/10/11 PHP
PHP实现时间日期友好显示实现代码
2019/09/08 PHP
js版本A*寻路算法
2006/12/22 Javascript
js三种排序算法分享
2012/08/16 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
2013/04/24 Javascript
javascript中数组的sort()方法的使用介绍
2013/12/18 Javascript
nodejs批量修改文件编码格式
2015/01/22 NodeJs
js的flv视频播放器插件使用方法
2015/06/23 Javascript
JavaScript事件代理和委托详解
2016/04/08 Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
2016/08/06 Javascript
AngularJS实践之使用NgModelController进行数据绑定
2016/10/08 Javascript
JavaScript表单验证完美代码
2017/03/02 Javascript
jQuery为某个div加入行样式
2017/06/09 jQuery
利用Decorator如何控制Koa路由详解
2018/06/26 Javascript
angular5 子组件监听父组件传入值的变化方法
2018/09/30 Javascript
详解vue如何使用rules对表单字段进行校验
2018/10/17 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
2019/04/16 Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
2020/01/20 Javascript
Python合并字典键值并去除重复元素的实例
2016/12/18 Python
Python实现复杂对象转JSON的方法示例
2017/06/22 Python
对python中大文件的导入与导出方法详解
2018/12/28 Python
调试Django时打印SQL语句的日志代码实例
2019/09/12 Python
Python3实现监控新型冠状病毒肺炎疫情的示例代码
2020/02/13 Python
你可能不熟练的十个前端HTML5经典面试题
2018/07/03 HTML / CSS
GoPro摄像机美国官网:美国运动相机厂商
2018/07/03 全球购物
大学校庆邀请函
2014/01/11 职场文书
平民服装店创业计划书
2014/01/17 职场文书
奶茶店创业计划书范文
2014/01/17 职场文书
特色冷饮店创业计划书
2014/01/28 职场文书
中式婚礼主持词
2014/03/13 职场文书
服务承诺书范文
2014/05/19 职场文书
基层干部个人对照检查及整改措施
2014/10/28 职场文书
2014年公路养护工作总结
2014/12/04 职场文书
2019大学生实习报告
2019/06/21 职场文书
三十年再续同学情倡议书
2019/11/27 职场文书
python flask开发的简单基金查询工具
2021/06/02 Python