最新消息:看到那些跳动的图片、文字了吗?点击点击 O(∩_∩)O~~

快速上手Vue(一)

若思若想 onlyling 1157浏览 0评论

Vue是什么

渐进式 JavaScript 框架

这是 Vue 官网上的一句简介,没错,就是这样,既然会看到这篇文章,就应该知道它是干嘛的,至于渐进式以后再说吧,先学会如何用它。

快速搭建开发环境

Vue已有一个官方的脚手架vue-cli,很好用,适合SPA(单页应用)开发,当然,很多人也根据vue-cli改出了适合多页的项目。

不多说,开始干,先去vue-cli官网看看。

Prerequisites: Node.js (>=4.x, 6.x preferred), npm version 3+ and Git.

首选需要 Node.js、npm、Git,如果没有就先安装这一系工具。

安装Node.js,推荐LTS版本,简单说是稳定版,Current约等于体验版。几个比较大平台的系统都有对应的安装包,按照提示下一步就好了,安装好Node.js,npm应该也会相应的安装上。

在终端/CMD中查看版本号检验是否安装好。

node -v ##回车
npm -v ##回车

Node.js Node.js是一个基于Chrome JavaScript运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。简单说,可以用JavaScript写服务器端的应用,与PHP、JAVA相似了。

NPM的全称是Node Package Manager,是一个NodeJS包管理和分发工具,已经成为了非官方的发布Node模块(包)的标准。简单说,一个公共代码库,可以上传(发布)、下载。

Git 的安装方式和其他软件相差无几,到官网下载安装包,一步一步下去就好了。

必须的准备工作做好了,开始倒腾 vue-cli,打开终端/CMD

npm install -g vue-cli ##回车

通过npm安装vue-cli这个工具包,并且是全局安装。

终端/CMD通过命令进入某个文件夹,例如www文件夹

cd www ##回车

然后在新建一个文件夹作为你的项目文件夹,并且初始化它

vue init webpack my-project ##回车
## 各种提示确认
## 前期不推荐开启 linting、testing

执行这个命令,当前(www)文件夹下,会新建一个名为my-project的文件夹,并且会在文件夹内生成一些文件。假若已有同名文件夹,会提示是否合并。

vue init 模板类型 文件夹名称

vue-cli提供了大概五种模板,各有不同的玩法。

根据提示,进入my-project文件夹,开始安装依赖。

cd my-project ##回车
npm i ##回车
## 待各种依赖安装好后
npm run dev ##开启开发模式,浏览器会自动打开一个地址,修改文件就立马可以看见修改的东西。

大概的过程就是,通过命令确认使用哪种模板,在哪个文件夹下初始化,并且通过一步一步的命令确认配置信息,确认好后,通过Git把Github上的模板文件复制到文件夹。

Github偶尔被墙,所有初始化的时候不要着急哟。

不要开发环境直接撸

当然这样也是可以的,就如同以往开发方式一样,写好代码直接往浏览器里扔。

直接通过script标签或AMD加载器加载。

开始上手撸代码

没错,接下来就按照官网的教程撸就好了,都是各种简单的实例。

需要扩展延伸的知识点

  • 前端模块化
  • Node.js
  • webpack
  • es6

转载请注明:OnlyLing - Web 前端开发者 » 快速上手Vue(一)

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址