使用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 相关文章推荐
通过正则格式化url查询字符串实现代码
Dec 28 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
Oct 20 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
Oct 11 Javascript
分分钟玩转Vue.js组件
Oct 25 Javascript
DropDownList控件绑定数据源的三种方法
Dec 24 Javascript
Form表单上传文件(type="file")的使用
Aug 03 Javascript
angularjs中$http异步上传Excel文件方法
Feb 23 Javascript
vue2.0模拟锚点的实例
Mar 14 Javascript
vue iview组件表格 render函数的使用方法详解
Mar 15 Javascript
uni-app实现点赞评论功能
Nov 25 Javascript
node 版本切换的实现
Feb 02 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
Mar 02 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/09/30 PHP
分享PHP函数实现数字与文字分页代码
2015/07/28 PHP
php+mysql实现简单登录注册修改密码网页
2016/11/30 PHP
php使用自定义函数实现汉字分割替换功能示例
2017/01/30 PHP
Yii2中hasOne、hasMany及多对多关联查询的用法详解
2017/02/15 PHP
PHP抽象类与接口的区别实例详解
2019/05/09 PHP
PHP基于session.upload_progress 实现文件上传进度显示功能详解
2019/08/09 PHP
用cookies实现的可记忆的样式切换效果代码下载
2007/12/24 Javascript
JavaScript 常用函数
2009/12/30 Javascript
提示$ is not defined错误分析及解决
2013/04/09 Javascript
js获取当前页面路径示例讲解
2014/01/08 Javascript
利用VUE框架,实现列表分页功能示例代码
2017/01/12 Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
2017/03/10 Javascript
js实现一个简单的数字时钟效果
2017/03/29 Javascript
使用vs code开发Nodejs程序的使用方法
2017/09/21 NodeJs
vue使用pdfjs显示PDF可复制的实现方法
2018/12/14 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
2019/03/19 Javascript
vue.js中ref及$refs的使用方法解析
2019/10/08 Javascript
Python常见文件操作的函数示例代码
2011/11/15 Python
最大K个数问题的Python版解法总结
2016/06/16 Python
Python实现识别手写数字大纲
2018/01/29 Python
对numpy Array [: ,] 的取值方法详解
2018/07/02 Python
python 循环数据赋值实例
2019/12/02 Python
使用pygame写一个古诗词填空通关游戏
2019/12/03 Python
pycharm通过anaconda安装pyqt5的教程
2020/03/24 Python
Python openpyxl模块实现excel读写操作
2020/06/30 Python
美国饼干礼物和美食甜点购买网站:Cheryl’s
2020/05/28 全球购物
某个公司的Java笔面试题
2016/03/11 面试题
网络编程中设计并发服务器,使用多进程与多线程,请问有什么区别?
2016/03/27 面试题
Linux如何命名文件--使用文件名时应注意
2012/01/22 面试题
秋季运动会广播稿
2014/02/22 职场文书
公务员党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
申报材料格式
2014/12/30 职场文书
致运动员加油稿
2015/07/21 职场文书
CSS 制作波浪效果的思路
2021/05/18 HTML / CSS
vue+echarts实现多条折线图
2022/03/21 Vue.js