使用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+iframe 实现无刷新载入整页的代码
Mar 17 Javascript
jquery怎样实现ajax联动框(二)
Mar 08 Javascript
用javascript读取xml文件读取节点数据
Aug 12 Javascript
推荐8款jQuery轻量级树形Tree插件
Nov 12 Javascript
jquery实现对联广告的方法
Feb 05 Javascript
JS右下角广告窗口代码(可收缩、展开及关闭)
Sep 04 Javascript
jQuery添加和删除指定标签的方法
Dec 16 Javascript
jQuery实现三级联动效果
Mar 02 Javascript
input file样式修改以及图片预览删除功能详细概括(推荐)
Aug 17 Javascript
微信小程序实现授权登录
May 15 Javascript
手把手15分钟搭一个企业级脚手架
Sep 16 Javascript
vue2.0实现列表数据增加和删除
Jun 17 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 a simple smtp class
2007/11/26 PHP
jquery下为Event handler传递动态参数的代码
2011/01/06 Javascript
JS控制一个DIV层在指定时间内消失的方法
2014/02/17 Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
2014/12/15 Javascript
使用javascript实现Iframe自适应高度
2014/12/24 Javascript
JQuery datepicker 用法详解
2015/12/25 Javascript
AngularJS基础 ng-focus 指令简单示例
2016/08/01 Javascript
Javascript实现图片懒加载插件的方法
2016/10/20 Javascript
完美实现js选项卡切换效果(二)
2017/03/08 Javascript
JavaScript验证知识整理
2017/03/24 Javascript
vue渲染时闪烁{{}}的问题及解决方法
2018/03/28 Javascript
vue中mint-ui的使用方法
2018/04/04 Javascript
layui 设置table 行的高度方法
2018/08/17 Javascript
使用validate.js实现表单数据提交前的验证方法
2018/09/04 Javascript
浅谈vue后台管理系统权限控制思考与实践
2018/12/19 Javascript
layui 弹出删除确认界面的实例
2019/09/06 Javascript
VUE项目初建和常见问题总结
2019/09/12 Javascript
关于Vue中axios的封装实例详解
2019/10/20 Javascript
用Python编写web API的教程
2015/04/30 Python
Python3处理文件中每个词的方法
2015/05/22 Python
Zabbix实现微信报警功能
2016/10/09 Python
python安装numpy&安装matplotlib& scipy的教程
2017/11/02 Python
Python3.6连接Oracle数据库的方法详解
2018/05/18 Python
numpy中矩阵合并的实例
2018/06/15 Python
Tensorflow 同时载入多个模型的实例讲解
2018/07/27 Python
75条笑死人的知乎神回复,用60行代码就爬完了
2019/05/06 Python
python实现对服务器脚本敏感信息的加密解密功能
2019/08/13 Python
HTML5调用手机摄像头拍照的实现思路及代码
2014/06/15 HTML / CSS
大学生涯自我鉴定
2014/01/16 职场文书
面试后感谢信
2014/02/01 职场文书
服装设计专业求职信
2014/06/16 职场文书
公务员学习习总书记“三严三实”思想汇报
2014/09/19 职场文书
单位考核聘任报告
2015/03/02 职场文书
简历中自我评价范文
2015/03/11 职场文书
教师节联欢会主持词
2015/07/04 职场文书
2019年作为一名实习生的述职报告
2019/09/29 职场文书