美文网首页工作生活
VUE学习整理_004

VUE学习整理_004

作者: 猿自在 | 来源:发表于2019-07-01 15:11 被阅读0次

VUE创建一个项目

简单总结前三篇文章的准备工作:第一篇是要知道想要做什么,心之所向素履以往;第二篇是要明确做的是什么,牢记初心,才能在光明却又曲折的道路上不会迷失了自己;第三篇就是工欲善其事必先利其器,万事俱备,随时等待东风。

当然上面只是冠冕堂皇的言论,可以权当凑字数的。

纸上得来终觉浅,绝知此事要躬行,巴拉巴拉说一大串,终究还是要落到实处,现在就开始创建一个项目。

1、在本地创建一个文件夹,以下案例将创建在D:下的demoShow文件夹下,在此文件夹下点击右键,选择Git Bash Here,则在相应的文件夹下弹出相应的命令提示符,而这也是我们在003文章中安装git的一个原因,快速定位文件夹路径。

2、找到相应的文件夹位置,则可以跟踪进行项目创建工作,输入vue init webpack +项目名称(201907_demo),接地气一点的解释一下:vue是在创建vue -CLI的时候出现的,而同样介绍了说vue只需要安装一次即可,可以想象这就是一个鸟巢的模型或者图纸,而init webpack则代表了创建工程,这里大概的意思就是相应的文件夹下,创建一个命名为demo的vue前端工程,或者说在济南泰安或者任意一个随便一个地方,再创建一个和鸟巢一模一样的,把它叫做泉巢泰巢,这样听起来雀巢还是比较好听.....

工程开始建立的时候,程序会自动进入确认提示环节,是不是名字要叫泉巢呢,敲击回车,确认名字,然后系统反馈,您的名字是叫泉巢,然后进行下一步操作,请输入您的工程简介,等等等等

3、确认项目名称之后,确认项目介绍,然后回车确认,再进行提示您的项目介绍是这个,然后同时进行下一步操作,请输入您的名字或者昵称,这就是要记录原创权了,对原创的保护还是远远不够啊,各方面都要加强,然后输入确认回车提示,然后会提示要开始创建泉巢了,怎么滴怎么滴的,这里就随便敲一下就可以了,别比比了抓紧干活.....

4、系统受了您的敲击之后,立马变怂了,然后点头哈腰的说好的好的,荣幸为您服务,您看我这里有蒸羊羔蒸熊掌蒸鹿尾儿烧花鸭烧雏鸡烧子鹅,您看你来点啥...

vue-router您是否要安装路由,蒸羊羔要不要啊,扯犊子呢,抓紧盖泉巢,哦,对对对;

ESlint您是否要安装语法检测,开工礼仪要不要来一套,等你这套做完都喝西北风了,又贵又费事,要这个干嘛啊干;

unit tests是否要安装单元测试工具,每个屋子要不要给您体验一下,我们附带体验师哦,我小本小利的搞不起啊,快开始吧;

e2e tests是否安装e2e来进行用户行为模拟测试,不要不要,通通不要,快点快点;

vue开始像小二一样一声长号:来喽,客观您请稍等,泉巢马上开工,然后这是二维码,您可以选择微信还是支付宝支付,当然你需要做的只需要再来一次---爱的铁拳

5、铁拳招呼下,vue只能再次怂掉,只能一句轻言轻语,客官您先做,泉巢施工马上开始喽,vue -cli Generated “项目名称”,就这样项目开始热火朝天的施工了,只能眼看它起高楼宴宾客,然后最终系统来句“Project initialization finished”打完收工

同时在相应的文件夹下就会出现模拟鸟巢的雏形了,并且系统还附带了相应的使用说明,打开文件夹,执行npm run dev操作,泉巢将开始工作,非常现代化啊

6、按照使用说明执行操作,进入已经创建的泉巢,并输入npm run dev指令,泉巢的内部基本配套设备就配齐了,这是您再按下开关,也就是输入浏览器地址并确认,硬装终于成型了。

输入http://localhost:8080,然后启动

哈哈,一个闪亮闪亮的V啊,这是胜利的标志吧,不是hello world,不是你好世界,不是发现新大陆,是welcome,是vue对你我到来的欢迎,我们也开始是vue团队中的一员,算是找到组织了

相关文章

  • VUE学习整理_004

    VUE创建一个项目 简单总结前三篇文章的准备工作:第一篇是要知道想要做什么,心之所向素履以往;第二篇是要明确做的是...

  • Vue学习 Vue SSR + Vuex

    github 项目地址 预览 说明 vue学习整理 未严格按照Vue风格指南 旨在学习与交流vue语法以及基本入门...

  • vue语法基础xmind

    最近在学习vue,结合官方的手册,整理了vue基础语法xmind(不包括进阶部分)

  • VUE学习整理_001

    我为什么要学VUE? 济南这个城市是个很奇怪的城市,它总能敏锐的触摸到社会的发展动向,或许也不是那么敏锐,但总算是...

  • Vue学习整理(三)

    Vue 中的动画 需求:屏幕上有Hello World 文字,还有一个切换按钮,点击切换按钮,文字渐渐消失,再次点...

  • VUE学习整理_005

    Vue结构详解 在最开始做java的时候碰到过这么一种情况,当时公司是买的浪潮的loushang框架,然后代码自动...

  • VUE学习整理_003

    windows下VUE2.0环境搭建 前两篇记录了vue学习的一些大背景,现在开始回归到vue本身。 当然学习vu...

  • VUE学习整理_002

    前端工程化是什么 每一个作品的产生都是在所处的特殊环境下产生的,它能存活下来并发散光大的话,一定是真切的解决了某些...

  • vue学习理解整理

    [TOC] cookie localStorage SeeionStorage 区别 VUE基础知识 1、对于MV...

  • vue

    传送门---个人网站 Vue学习及参考总结整理 Vue对象解析 对象属性 data、el、options、watc...

网友评论

    本文标题:VUE学习整理_004

    本文链接:https://www.haomeiwen.com/subject/targcctx.html