Vue2.0项目开发流程—通俗易懂

xiaoxiao2021-02-27  271

看具体内容之前,,想听听我的唠叨。没兴趣的朋友可以直接掠过。 其实早在去年就已经接触到Vue,但无奈,在一个二线城市。Vue这个东西大多人都是只闻其声,没有几个公司会在项目中具体用。而我也是出于兴趣就把文档大概的扫射了一遍,也就放下了。

我想大家应该知道今年对于Vue有件大事。520那天,咱们的尤大大在全球首届 VueConf 上,介绍了 Vue.js 2017 的现状,并对 Vue 的未来做了展望。当然了。。虽然很想亲临现场。。但是现实的种种(你们懂的)让我只能在会后的视频中去感受了。

别的不多说我们只来看看尤大公布的数据:

Vue 的现状

GitHub 超过 53,986 个 Star 数,已经是历史的 Top 10

每月 55 万 + 次 NPM 下载(不算阿里爸爸 CNPM 镜像)

Chrome DevTool 插件 17.4 万日活

国内用户:

当然还有活跃的社区,vue全家桶,与阿里爸爸合作的Weex。。。。。

看了这些,,我只能说,身为一个前端。。我得把它搞下来。于是我觉定先将一个公司的小项目转到vue上来。

好了,不闲扯那我们正式开始。

-------------------------------------------------------------------------华丽的分割线---------------------------------------------------------------------------、

还是那句老话。。文档文档文档(https://vuefe.cn/v2/guide/) 我知道很多人同我一样,不太喜欢看这玩意。但是对于Vue来说我强烈推荐在做项目之前大家必须去过一遍文档,或者说最起码也要了解到Vue的基础用法,基础API,生命周期这些东西。我说了。。是了解,所以不用急。

在我看来,Vue的用法无非就是俩种 

1.CDN(就如咱们之前引用jq一样的在官方稳定中下载直接引用到你的html <script src="*****">) 好处呢,就是方便-可以快速的使用。这边也推荐大家在初期看文档的时候就用CDN的方式去练DEMO。。莫不要一上来就NPM...Cli...WebPack...会把自己整懵逼的,原因很简单,全是新知识就一块一块去学,没有谁能一口吃成一个胖子。。。我就是吃过这个亏的人。 2.用官方提供一个官方的命令行接口工具--也就是我们所说的Vue-Cli(脚手架工具:快速建立一个Vue项目的工具),用于快速搭建大型单页面应用程序 当然我们实际中的项目当然要用第二种用法

一:开发环境(vue赖以开发和生存的环境) 1.安装node.js(win下前往node.js官网安装即可) 安装个稳定版就行  这个没什么可讲的一路下一步

检查这步是否完成 可以打开命令行输入  node -v   -----这步的意思查看node的版本号,如果回车后你看到版本号那就OK了。go-下一步 这步完成的同时,node中自带的  npm 一个nodejs的包管理器,用于node插件管理(包括安装、卸载、管理依赖等)的东西也安装到你电脑里了。以后我们要安装其他插件模块(比如 vue-cli  sass了什么的)都靠这个玩意。同样可以 npm -v 看一下它的版本号   友情提示,这块可以安装一个cnpm(这是淘宝npm镜像  就是中国版的npm  好处就是下载东西快推荐安装)

淘宝npm安装

1 npm install -g cnpm --registry= https://registry.npm.taobao.org

2.安装Vue脚手架-Vue-cli  ------为什么叫脚手架呢,其实就是和盖楼房一样,这个就是个基础设施,是万丈高楼平地起的重要工具。

2 npm install -g vue-cli   或者cnpm install -g vue-cli  安装完成后,可以使用 vue -V (注意 V 大写)查看是否安装成功。

3.安装好咱们的脚手架之后咱们就可以用它来搭咱们的项目了。同样一条命令

先 cd到你想要存放vue项目的目录

3 cd E:\VUE 用命令来创建一个webpack项目。vue-cli就是基于webpack的。

4 vue init webpack my-project-name(项目名字)

好了。见证奇迹的时刻就要到了

你会看到刚才的项目文件已经自动创建好了

5 cd one-vue-project   cd进刚才自动创建好的项目目录 6 npm install      这一步的意思呢官方解释是 安装项目所需依赖。换一个通俗的话就是刚才使用vue-cli创建的这个项目只是个方案 描述了这个项目需要什么插件,还没有实际的内容。 这就是来安装这个方案所需的插件 7 npm run dev 最后  看看终极效果吧 哈哈~~~~~~~~~大V

同志们这只是个开篇,后续我会持续更新的,每一块都单独拿出来讲一下,如果你觉得我写的能够让你有所感悟,记得关注我哦,如果有问题可以随时提问,有问必答。 大家可以关注下我这个个人前端公众号,我也会第一时间在上面通知大家的。如果有可能我会出一个免费的vue视频放上面哦~~。。
转载请注明原文地址: https://www.6miu.com/read-7297.html

最新回复(0)