使用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操作xml
Nov 04 Javascript
javascript之函数直接量(function(){})()
Jun 29 Javascript
jQuery之Deferred对象详解
Sep 04 Javascript
简介alert()与console.log()的不同
Aug 26 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
Apr 14 Javascript
浅析JavaScript中浏览器的兼容问题
Apr 19 Javascript
javascript轮播图算法
Oct 21 Javascript
JS+H5 Canvas实现时钟效果
Jul 20 Javascript
vue.js编译时给生成的文件增加版本号
Sep 17 Javascript
JS实现的贪吃蛇游戏完整实例
Jan 18 Javascript
vuex实现数据状态持久化
Nov 11 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
Nov 20 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 mysql数据库操作类
2008/06/04 PHP
通过php删除xml文档内容的方法
2015/01/23 PHP
PHP实现简单的新闻发布系统实例
2015/07/28 PHP
CodeIgniter连贯操作的底层原理分析
2016/05/17 PHP
PHP getDocNamespaces()函数讲解
2019/02/03 PHP
如何在JavaScript中实现私有属性的写类方式(二)
2013/12/04 Javascript
javascript 数字格式化输出的实现代码
2013/12/10 Javascript
让人蛋疼的JavaScript语法特性
2014/09/30 Javascript
js阻止事件追加的具体实现
2014/10/15 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
2014/10/22 Javascript
Angular 路由route实例代码
2016/07/12 Javascript
微信小程序 Record API详解及实例代码
2016/09/30 Javascript
Yarn的安装与使用详细介绍
2016/10/25 Javascript
Vue发布项目实例讲解
2019/07/17 Javascript
[49:02]KG vs Infamous 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
python处理cookie详解
2014/02/07 Python
简单介绍使用Python解析并修改XML文档的方法
2015/10/15 Python
Python简单实现TCP包发送十六进制数据的方法
2016/04/16 Python
Python实现的简单模板引擎功能示例
2017/09/02 Python
基于Django的python验证码(实例讲解)
2017/10/23 Python
5分钟 Pipenv 上手指南
2018/12/20 Python
python字符串查找函数的用法详解
2019/07/08 Python
TensorFlow实现简单的CNN的方法
2019/07/18 Python
python破解bilibili滑动验证码登录功能
2019/09/11 Python
Django通过设置CORS解决跨域问题
2020/11/26 Python
纯css3实现宠物小鸡实例代码
2018/10/08 HTML / CSS
使用HTML5和CSS3制作一个模态框的示例
2018/03/07 HTML / CSS
大学毕业生通用求职信
2013/09/28 职场文书
如何写好升职自荐信
2014/01/06 职场文书
书法比赛获奖感言
2014/02/10 职场文书
机关保密承诺书
2014/06/03 职场文书
诉讼代理人授权委托书
2014/10/11 职场文书
2014年民主评议党员工作总结
2014/12/02 职场文书
幼儿园教师师德承诺书
2015/04/28 职场文书
对领导班子的意见和建议
2015/06/08 职场文书
Python实现老照片修复之上色小技巧
2021/10/16 Python