使用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 相关文章推荐
最新优化收藏到网摘代码(digg,diigo)
Feb 07 Javascript
Jquery 绑定时间实现代码
May 03 Javascript
javascript中eval函数用法分析
Apr 25 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
Dec 31 Javascript
微信小程序 地图map详解及简单实例
Jan 10 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
Mar 21 Javascript
AngularJS入门教程一:路由用法初探
May 27 Javascript
VueJs监听window.resize方法示例
Jan 17 Javascript
Vue 框架之动态绑定 css 样式实例分析
Nov 14 Javascript
微信小程序实现音乐播放器
Nov 20 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
Jun 05 Javascript
TypeScript 内置高级类型编程示例
Sep 23 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 读取文件乱码问题
2010/02/20 PHP
PHP中把数据库查询结果输出为json格式简单实例
2015/04/09 PHP
YII Framework框架教程之缓存用法详解
2016/03/14 PHP
Laravel4中的Validator验证扩展用法详解
2016/07/26 PHP
零基础学JavaScript最新动画教程+iso光盘下载
2008/01/22 Javascript
window.addeventjs事件驱动函数集合addEvent等
2008/02/19 Javascript
基于jQuery的ajax功能实现web service的json转化
2009/08/29 Javascript
HTML node相关的一些资料整理
2010/01/01 Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
2015/04/20 Javascript
js实现非常简单的焦点图切换特效实例
2015/05/07 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
2015/10/28 Javascript
jQuery选择器用法实例详解
2015/12/17 Javascript
JS添加删除DIV的简单实例
2016/07/08 Javascript
有趣的bootstrap走动进度条
2016/12/01 Javascript
微信小程序 数组中的push与concat的区别
2017/01/05 Javascript
js实现九宫格的随机颜色跳转
2017/02/19 Javascript
vue中将网页打印成pdf实例代码
2017/06/15 Javascript
Vue render函数实战之实现tabs选项卡组件
2019/04/22 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
2019/05/03 Javascript
node.js制作一个简单的登录拦截器
2020/02/10 Javascript
Python中的map、reduce和filter浅析
2014/04/26 Python
Python获取单个程序CPU使用情况趋势图
2015/03/10 Python
python虚拟环境virtualenv的安装与使用
2017/09/21 Python
10个Python面试常问的问题(小结)
2019/11/20 Python
Python任务调度利器之APScheduler详解
2020/04/02 Python
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
2013/01/30 HTML / CSS
女性时尚在线:IVRose
2019/02/23 全球购物
经理管理专业自荐信范文
2013/12/31 职场文书
银行员工辞职信范文
2014/01/20 职场文书
医科大学毕业生自荐信
2014/02/03 职场文书
清明节扫墓活动方案
2014/03/02 职场文书
市场拓展计划书
2014/05/03 职场文书
松材线虫病防治方案
2014/06/15 职场文书
学院党的群众路线教育实践活动整改方案
2014/10/04 职场文书
MySQL8.0的WITH查询详情
2021/08/30 MySQL
python利用while求100内的整数和方式
2021/11/07 Python