如何搭建vue-cli脚手架?

我们在使用vue搭建项目的时候,经常要使用到vue-cli。

一、安装node.js

node官网下载并安装node,一直next就行。

等待安装完毕,输入node-v,如果输出版本号,那说明已经成功安装了。再输入命令行npm-v,输出npm的版本信息。那环境安装得基本就差不多了。

我们在开发的时候,为了能更方便快捷的运行,不用FQ,速度快,一般会安装淘宝的npm镜像cnpm。

二、安装cnpm

前往淘宝镜像cnpm查看详细安装步骤。

或者直接输入命令行:
image.png
等待安装完成之后,可以输入cnpm-v检查版本。将使用到npm的地方用cnpm来代替就可以了。

三、安装vue

输入命令行
image.png
如果你构建的是大型的项目,推荐使用npm安装,因为它能比较好配合webpack 或 browserify 模块打包器一起使用。

接下来安装脚手架
image.png
创建一个基于 webpack 模板的新项目
image.png
初始化项目
image.png
运行初始化命令的时候回让用户输入几个基本的选项,如项目名称,描述,作者等信息,填不填都可以,看你意愿。需要注意的是项目的名称不能大写,不然会报错。

刚初始化的项目是没有依赖的,如果运行会报类似这样的错误
image.png
所以要使用如下命令行安装依赖
image.png
使用如下命令行运行项目
image.png
能打开看到这个页面,说明你已经搭建成功啦!image

我是一名前端开发程序员,自己整理了一份2019最全面前端学习资料,从最基础的HTML+CSS+JS到移动端HTML5到各种框架都有整理,送给每一位前端小伙伴,这里是小白聚集地,欢迎初学和进阶中的小伙伴从最基础的HTML+CSS+JS到移动端HTML5到各种框架都有整理,送给每一位前端小伙伴,这里是小白聚集地,欢迎初学和进阶中的小伙伴:685910553
web前端资料分享

猜你喜欢

转载自blog.csdn.net/ZIYUSHUO/article/details/88911630