使用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 相关文章推荐
Jqyery中同等与js中windows.onload的应用
May 10 Javascript
JS动态添加与删除select中的Option对象(示例代码)
Dec 25 Javascript
JavaScript中创建对象和继承示例解读
Feb 12 Javascript
AngularJS+Node.js实现在线聊天室
Aug 28 Javascript
js弹出对话框方式小结
Nov 17 Javascript
JavaScript瀑布流布局实现代码
May 06 Javascript
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
Sep 06 Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
Feb 22 Javascript
详解vuex之store源码简单解析
Jun 13 Javascript
javascript实现蒙版与禁止页面滚动
Jan 11 Javascript
vue下拉刷新组件的开发及slot的使用详解
Dec 23 Vue.js
JavaScript实现淘宝商品图切换效果
Apr 29 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
支持oicq头像的留言簿(一)
2006/10/09 PHP
php将数据库中的电话号码读取出来并生成图片
2008/08/31 PHP
基于wordpress主题制作的具体实现步骤
2013/05/10 PHP
php使用pack处理二进制文件的方法
2014/07/03 PHP
详解PHP中的外观模式facade pattern
2018/02/05 PHP
PHP通过GD库实现验证码功能示例
2019/02/23 PHP
用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1
2007/02/23 Javascript
JavaScript入门教程(12) js对象化编程
2009/01/31 Javascript
JavaScript 类似flash效果的立体图片浏览器
2010/02/08 Javascript
Dojo 学习要点
2010/09/03 Javascript
javascript错误的认识不用关心内存管理
2012/12/15 Javascript
JavaScript和jQuery制作光棒效果
2017/02/24 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
2018/05/05 Javascript
Vue中正确使用Element-UI组件的方法实例
2020/10/13 Javascript
Python中转换角度为弧度的radians()方法
2015/05/18 Python
Python字符串切片操作知识详解
2016/03/28 Python
python模块之sys模块和序列化模块(实例讲解)
2017/09/13 Python
浅谈python日志的配置文件路径问题
2018/04/28 Python
Python 面向对象之封装、继承、多态操作实例分析
2019/11/21 Python
简单了解python数组的基本操作
2019/11/26 Python
Python Flask框架实现简单加法工具过程解析
2020/06/03 Python
python批量合成bilibili的m4s缓存文件为MP4格式 ver2.5
2020/12/01 Python
python中numpy数组与list相互转换实例方法
2021/01/29 Python
Python中生成ndarray实例讲解
2021/02/22 Python
美国最大点评网站:Yelp
2018/02/14 全球购物
租租车:国际租车、美国租车、欧洲租车、特价预订国外租车(中文服务)
2018/03/28 全球购物
加拿大在线隐形眼镜和眼镜店:VisionPros
2019/10/06 全球购物
HashMap和Hashtable的区别
2013/05/18 面试题
校园招聘策划书
2014/01/09 职场文书
自荐信如何制作?
2014/02/21 职场文书
大学自主招生自荐信范文
2014/02/26 职场文书
党员承诺书格式
2014/05/21 职场文书
违纪检讨书范文
2015/01/27 职场文书
2016年企业先进员工事迹材料
2016/02/25 职场文书
Python insert() / append() 用法 Leetcode实战演示
2021/03/31 Python
用JS写一个发布订阅模式
2021/11/07 Javascript