Vue是一套用于构建用户界面的渐进式框架,当前国内最火的mvvm框架之一,利用它可以快速开发复杂的单页面应用。
优点:
易用: 已经会了HTML,CSS,JavaScript?即刻阅读指南即可开始构建应用!
灵活: 简单小巧的核心,渐进式技术栈,足以应付任何规模的应用。
高效: 16kb min+gzip 的运行大小,超快虚拟 DOM ,最省心的优化
这里主要记录如何安装vue-cli脚手架。
安装步骤:
1.安装node.js :
可以直接去node.js官网下载,傻瓜式安装。安装完之后打开命令行输入命令 node -v,如果显示版本号,说明安装成功。npm包管理器是集成在node中的,直接输入npm -v命令可以查看版本号。
更新npm版本的命令:npm install -g npm
注 :安装 vue-cli 脚手架目前需要node版本为 v4.0 以上。
2.全局安装vue-cli脚手架:
安装命令:npm install -g vue-cli 。
如果因为资源问题导致安装依赖包(下面的步骤要安装依赖包)速度很慢或者安装失败,可以使用淘宝镜像来安装。
安装命令:npm install -g cnpm --registry=http://registry.npm.taobao.org (cnpm -v 查看版本号)
注:cnpm跟npm用法完全一致,只是在执行命令时将npm改为cnpm
3.初始化项目:
安装命令:vue init webpack demovue
这个命令的意思是初始化一个项目,demovue是项目文件夹的名称,其中webpack是构建工具,也就是整个项目是基于webpack的。
运行命令之后会让用户输入如下图的几个基本的选项,如果不想填直接回车默认就好。
打开demovue文件夹,可以看到已经初始化好了一个基本的项目,如图
我的依赖包就已经安装好了(依赖包文件:node_modules)..........
4.安装依赖包(最后一个步骤):
先进入demovue目录,命令:cd demovue
安装命令:npm install
如果安装过慢或者安装失败,可以选择淘宝镜像的命令来安装。安装命令:cnpm install
走到这一步已经完成了vue-cli脚手架的搭建了
运行项目命令: npm run dev
项目运行成功后,浏览器会自动打开localhost:8080(如果浏览器没有自动打开,可以手动输入)。运行成功后,会看到如下图所示的界面。
学习记录分享,是一种好习惯......