使用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 跨浏览器开发经验总结(五) js 事件
May 19 Javascript
jQuery判断元素是否是隐藏的代码
Apr 24 Javascript
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
Jun 09 Javascript
jQuery判断当前点击的是第几个li的代码
Sep 26 Javascript
jquery实现兼容IE8的异步上传文件
Jun 15 Javascript
javascript实现倒计时(精确到秒)
Jun 26 Javascript
jquery实现清新实用的网页菜单效果
Aug 28 Javascript
jquery购物车结算功能实现方法
Oct 29 Javascript
浅析vue-router原理
Oct 19 Javascript
jquery实现点击弹出对话框
Feb 08 jQuery
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
Mar 29 Javascript
JavaScript 引用类型实例详解【数组、对象、严格模式等】
May 13 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许愿墙模块功能分析
2013/06/25 PHP
php中smarty模板条件判断用法实例
2015/06/11 PHP
浅谈mysql_query()函数的返回值问题
2016/09/05 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
2020/02/27 PHP
jquery radio 操作代码
2011/03/16 Javascript
js实现弹窗插件功能实例代码分享
2013/12/12 Javascript
JavaScript中的console.time()函数详细介绍
2014/12/29 Javascript
JS+CSS实现仿msn风格选项卡效果代码
2015/10/22 Javascript
JS中的eval 为什么加括号
2016/04/13 Javascript
Javascript类型系统之undefined和null浅析
2016/07/13 Javascript
js实现文字截断功能
2016/09/14 Javascript
微信小程序开发之toast等弹框提示使用教程
2017/06/08 Javascript
Js利用prototype自定义数组方法示例
2017/10/20 Javascript
使用element-ui table expand展开行实现手风琴效果
2019/03/15 Javascript
微信小程序导航栏跟随滑动效果的实现代码
2019/05/14 Javascript
微信小程序非跳转式组件授权登录的方法示例
2019/05/22 Javascript
js仿360开机效果
2019/12/26 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
2020/04/26 Javascript
详解Django框架中的视图级缓存
2015/07/23 Python
详解python 字符串和日期之间转换 StringAndDate
2017/05/04 Python
解决python爬虫中有中文的url问题
2018/05/11 Python
django 通过URL访问上传的文件方法
2019/07/28 Python
python return逻辑判断表达式实现解析
2019/12/02 Python
某公司的.net工程师面试题笔试题
2013/11/22 面试题
小学数学教学反思
2014/02/02 职场文书
《小蝌蚪找妈妈》教学反思
2014/02/21 职场文书
幼儿生日活动方案
2014/08/27 职场文书
2014办公室副主任四风对照检查材料思想汇报
2014/09/20 职场文书
2015年安全生产目标责任书
2015/01/29 职场文书
财务稽核岗位职责
2015/04/13 职场文书
幼儿园迎新生欢迎词
2015/09/30 职场文书
2016年大学生社会实践心得体会
2015/10/09 职场文书
2016年社区党支部公开承诺书
2016/03/25 职场文书
李清照的诗词赏析(20首)
2019/08/22 职场文书
SQL bool盲注和时间盲注详解
2022/07/23 SQL Server