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

时间:2024-03-21 22:13:15

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

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

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

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

Vue 的现状

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

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

  • Chrome DevTool 插件 17.4 万日活

  • 国内用户:

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

  • 当然还有活跃的社区,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官网安装即可) 安装个稳定版就行  这个没什么可讲的一路下一步

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

  • 检查这步是否完成 可以打开命令行输入  node -v   -----这步的意思查看node的版本号,如果回车后你看到版本号那就OK了。go-下一步Vue2.0项目开发流程—通俗易懂

    这步完成的同时,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 大写)查看是否安装成功。
    
    
  • Vue2.0项目开发流程—通俗易懂
    3.安装好咱们的脚手架之后咱们就可以用它来搭咱们的项目了。同样一条命令


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

    3
    cd E:\VUE


    用命令来创建一个webpack项目。vue-cli就是基于webpack的。
  • 4
     vue init webpack my-project-name(项目名字)


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

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

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

  • 5
    cd one-vue-project   cd进刚才自动创建好的项目目录



    6
    npm install      这一步的意思呢官方解释是 安装项目所需依赖。换一个通俗的话就是刚才使用vue-cli创建的这个项目只是个方案 描述了这个项目需要什么插件,还没有实际的内容。 这就是来安装这个方案所需的插件

    7
     npm run dev       最后  看看终极效果吧 哈哈~~~~~~~~~大V


    Vue2.0项目开发流程—通俗易懂
同志们这只是个开篇,后续我会持续更新的,每一块都单独拿出来讲一下,如果你觉得我写的能够让你有所感悟,记得关注我哦,如果有问题可以随时提问,有问必答。

大家可以关注下我这个个人前端公众号,我也会第一时间在上面通知大家的。如果有可能我会出一个免费的vue视频放上面哦~~。。

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