使用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 相关文章推荐
dojo 之基础篇(二)之从服务器读取数据
Mar 24 Javascript
很棒的学习jQuery的12个网站推荐
Apr 28 Javascript
常用jQuery选择器总结
Jul 11 Javascript
jQuery检测返回值的数据类型
Jul 13 Javascript
JQuery标签页效果实例详解
Dec 24 Javascript
angularjs实现文字上下无缝滚动特效代码
Sep 04 Javascript
jQuery Chosen通用初始化
Mar 07 Javascript
利用node.js本地搭建HTTP服务器
Apr 19 Javascript
[js高手之路]寄生组合式继承的优势详解
Aug 28 Javascript
vue中各种通信传值方式总结
Feb 14 Javascript
vue移动端城市三级联动组件使用详解
Jul 26 Javascript
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
Jun 09 Vue.js
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+ajax登录跳转登录实现思路
2016/07/31 PHP
php读取XML的常见方法实例总结
2017/04/25 PHP
Javascript实现返回上一页面并刷新的小例子
2013/12/11 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
2014/09/04 Javascript
JavaScript语言对Unicode字符集的支持详解
2014/12/30 Javascript
浅谈Javascript的静态属性和原型属性
2015/05/07 Javascript
javascript中 try catch用法
2015/08/16 Javascript
详解javascript跨浏览器事件处理程序
2016/03/27 Javascript
基于javascript 显式转换与隐式转换(详解)
2017/12/15 Javascript
利用js给datalist或select动态添加option选项的方法
2018/01/25 Javascript
原生JS实现简单的倒计时功能示例
2018/08/30 Javascript
使用JavaScript解析URL的方法示例
2019/03/01 Javascript
解决layui表格内文本超出隐藏的问题
2019/09/12 Javascript
webpack5 联邦模块介绍详解
2020/07/08 Javascript
Python读写Redis数据库操作示例
2014/03/18 Python
11月编程语言排行榜 Python逆袭C#上升到第4
2017/11/15 Python
python3爬取淘宝信息代码分析
2018/02/10 Python
python实现教务管理系统
2018/03/12 Python
python的依赖管理的实现
2019/05/14 Python
Python操作SQLite/MySQL/LMDB数据库的方法
2019/11/07 Python
Python: tkinter窗口屏幕居中,设置窗口最大,最小尺寸实例
2020/03/04 Python
Python迭代器协议及for循环工作机制详解
2020/07/14 Python
CSS 3.0 结合video视频实现的创意开幕效果
2020/06/01 HTML / CSS
HTML5的结构和语义(4):语义性的内联元素
2008/10/17 HTML / CSS
详解HTML5将footer置于页面最底部的方法(CSS+JS)
2018/10/11 HTML / CSS
英国门把手公司:Door Handle Company
2019/05/12 全球购物
璀璨的珍珠、密钉和个性化珠宝:Lily & Roo
2021/01/21 全球购物
《学棋》教后反思
2014/04/14 职场文书
教师演讲稿大全
2014/05/16 职场文书
财务负责人任命书
2014/06/06 职场文书
暑假社会实践证明格式
2014/10/28 职场文书
2014年采购部工作总结
2014/11/20 职场文书
销售员自我评价
2015/03/11 职场文书
小学见习报告
2015/06/23 职场文书
追悼会悼词大全
2015/06/23 职场文书
2015秋季幼儿园开学通知
2015/07/16 职场文书