使用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开发包大全整理
Dec 22 Javascript
发布一个高效的JavaScript分析、压缩工具 JavaScript Analyser
Nov 30 Javascript
javaScript 读取和设置文档元素的样式属性
Apr 14 Javascript
关于javascript DOM事件模型的两件事
Jul 22 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
Mar 18 Javascript
select标签模拟/美化方法采用JS外挂式插件
Apr 01 Javascript
使用jQuery内容过滤选择器选择元素实例讲解
Apr 18 Javascript
js hover 定时器(实例代码)
Nov 12 Javascript
window.location不跳转的问题解决方法
Apr 17 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
Jan 27 Javascript
微信小程序textarea层级过高的解决方法
Mar 04 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
Nov 15 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
mysql 搜索之简单应用
2007/04/27 PHP
php实例分享之mysql数据备份
2014/05/19 PHP
php判断数组元素中是否存在某个字符串的方法
2014/06/14 PHP
php三种实现多线程类似的方法
2015/10/30 PHP
关于WordPress的SEO优化相关的一些PHP页面脚本技巧
2015/12/10 PHP
详解PHP实现定时任务的五种方法
2016/07/25 PHP
PHP 以POST方式提交XML、获取XML,解析XML详解及实例
2016/10/26 PHP
从JavaScript 到 JQuery (1)学习小结
2009/02/12 Javascript
JavaScript 组件之旅(三):用 Ant 构建组件
2009/10/28 Javascript
UpdatePanel和Jquery冲突的解决方法
2013/04/01 Javascript
Extjs4 关于Store的一些操作(加载/回调/添加)
2013/04/18 Javascript
JQuery表单验证插件EasyValidator用法分析
2014/11/15 Javascript
javascript实现简单的进度条
2015/07/02 Javascript
javascript基础知识
2016/06/07 Javascript
Bootstrap源码解读按钮(5)
2016/12/23 Javascript
jQuery 实现双击编辑表格功能
2017/06/19 jQuery
解决ie img标签内存泄漏的问题
2017/10/13 Javascript
vue项目中的webpack-dev-sever配置方法
2017/12/14 Javascript
使用FileReader API创建Vue文件阅读器组件
2018/04/03 Javascript
Mint-UI时间组件起始时间问题及时间插件使用
2018/08/20 Javascript
openlayers4实现点动态扩散
2020/08/17 Javascript
[01:07:15]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第二场 1月25日
2021/03/11 DOTA
Django 导出 Excel 代码的实例详解
2017/08/11 Python
Django中STATIC_ROOT和STATIC_URL及STATICFILES_DIRS浅析
2018/05/08 Python
python调用百度地图WEB服务API获取地点对应坐标值
2019/01/16 Python
keras.utils.to_categorical和one hot格式解析
2020/07/02 Python
python+requests实现接口测试的完整步骤
2020/10/27 Python
保加利亚手表、香水、化妆品和珠宝购物网站:Brasty.bg
2020/04/22 全球购物
金融专业推荐信
2013/11/14 职场文书
金属材料工程毕业生个人的自我评价
2013/11/28 职场文书
个人合作协议书范本
2014/04/18 职场文书
生产助理岗位职责
2014/06/18 职场文书
军训阅兵新闻稿
2015/07/17 职场文书
2016年政治理论学习心得体会
2016/01/25 职场文书
pytorch 中nn.Dropout的使用说明
2021/05/20 Python
PostgreSQL通过oracle_fdw访问Oracle数据的实现步骤
2021/05/21 PostgreSQL