Vue脚手架搭建学习记录1

  • 时间:2018-12-26
  • 浏览量:
  • 分类:[ Vue]
  • 作者:池剑锋

Vue是一套用于构建用户界面的渐进式框架,当前国内最火的mvvm框架之一,利用它可以快速开发复杂的单页面应用。


优点:

易用: 已经会了HTML,CSS,JavaScript?即刻阅读指南即可开始构建应用!

灵活: 简单小巧的核心,渐进式技术栈,足以应付任何规模的应用。

高效: 16kb min+gzip 的运行大小,超快虚拟 DOM ,最省心的优化


这里主要记录如何安装vue-cli脚手架。



安装步骤:

1.安装node.js :

 可以直接去node.js官网下载,傻瓜式安装。安装完之后打开命令行输入命令 node -v,如果显示版本号,说明安装成功。npm包管理器是集成在node中的,直接输入npm -v命令可以查看版本号。


1.png


更新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的。

运行命令之后会让用户输入如下图的几个基本的选项,如果不想填直接回车默认就好。

2.png


打开demovue文件夹,可以看到已经初始化好了一个基本的项目,如图

3.jpg

       我的依赖包就已经安装好了(依赖包文件:node_modules)..........


4.安装依赖包(最后一个步骤):

先进入demovue目录,命令:cd demovue

安装命令:npm install

如果安装过慢或者安装失败,可以选择淘宝镜像的命令来安装。安装命令:cnpm install


走到这一步已经完成了vue-cli脚手架的搭建了



运行项目命令: npm run dev 

5.jpg


项目运行成功后,浏览器会自动打开localhost:8080(如果浏览器没有自动打开,可以手动输入)。运行成功后,会看到如下图所示的界面。


4.jpg


学习记录分享,是一种好习惯......

上一篇:使用vue实现多规格选择实例
下一篇:没有了
分享给好友