使用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同时提交多个Web表单的方法
Dec 26 Javascript
toString()一个会自动调用的方法
Feb 08 Javascript
基于PHP+Jquery制作的可编辑的表格的代码
Apr 10 Javascript
js实现addClass,removeClass,hasClass的函数代码
Jul 13 Javascript
js隐藏与显示回到顶部按钮及window.onscroll事件应用
Jan 25 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
May 27 Javascript
DOM基础教程之使用DOM控制表格
Jan 20 Javascript
JavaScript表单焦点自动切换代码
Jul 24 Javascript
jquery实现图片列表鼠标移入微动
Dec 01 Javascript
JavaScript之filter_动力节点Java学院整理
Jun 28 Javascript
JavaScript禁用右键单击优缺点分析
Jan 20 Javascript
JS面试题中深拷贝的实现讲解
May 07 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导出excel格式数据问题
2014/03/11 PHP
利用php-cli和任务计划实现订单同步功能的方法
2017/05/03 PHP
动态修改DOM 里面的 id 属性的弊端分析
2008/09/03 Javascript
JavaScript Perfection kill 测试及答案
2010/03/23 Javascript
jquery自定义类似$.ajax()的方法实现代码
2013/08/13 Javascript
js浮点数精确计算(加、减、乘、除)
2013/12/26 Javascript
jQuery判断当前点击的是第几个li的代码
2014/09/26 Javascript
javascript工厂方式定义对象
2014/12/26 Javascript
javascript通过元素id和name直接取得元素的方法
2015/04/28 Javascript
详解JavaScript的Polymer框架中的通知交互
2015/07/29 Javascript
基于bootstrap3和jquery的分页插件
2015/07/31 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
2015/09/22 Javascript
深入理解angularjs过滤器
2016/05/25 Javascript
jQuery中的ready函数与window.onload谁先执行
2016/06/21 Javascript
Javascript将双字节字符转换成单字节字符并计算长度
2016/06/22 Javascript
js enter键激发事件实例代码
2016/08/17 Javascript
浅谈jQuery before和insertBefore的区别
2016/12/04 Javascript
jQuery实现拖动剪裁图片作为头像
2016/12/28 Javascript
bootstrap table动态加载数据示例代码
2017/03/25 Javascript
详解JS数据类型的值拷贝函数(深拷贝)
2017/07/13 Javascript
angular2中Http请求原理与用法详解
2018/01/11 Javascript
javaScript产生随机数的用法小结
2018/04/21 Javascript
node.js Promise对象的使用方法实例分析
2019/12/26 Javascript
[00:56]跨越时空加入战场 全新祈求者身心“失落奇艺侍祭”展示
2019/07/20 DOTA
Python中的二叉树查找算法模块使用指南
2014/07/04 Python
Python的Flask框架应用程序实现使用QQ账号登录的方法
2016/06/07 Python
tensorflow实现简单的卷积神经网络
2018/05/24 Python
python使用selenium登录QQ邮箱(附带滑动解锁)
2019/01/23 Python
python3 assert 断言的使用详解 (区别于python2)
2019/11/27 Python
python隐藏类中属性的3种实现方法
2019/12/19 Python
Python获取对象属性的几种方式小结
2020/03/12 Python
python框架flask入门之路由及简单实现方法
2020/06/07 Python
定义一结构体数组表示分数,并求两个分数相加之和
2013/06/11 面试题
英语教育专业自荐信
2014/05/29 职场文书
订货会主持词
2015/07/01 职场文书
浅谈Redis的事件驱动模型
2022/05/30 Redis