如何使用vue-cli搭建项目?

1.安装nodejs
vue-cli中各种所需的依赖全部在npm中,所以我们需要安装nodejs用于支持npm。找到nodejs官网,https://nodejs.org/en/download/,根据需要下载所需的nodejs版本。
如何使用vue-cli搭建项目?
安装完成后可以使用,win+r,并使用node --version监测是否安装成功,成功后便可以使用node环境,以及可以使用npm工具下载你所需要的依赖。
2.安装cnpm
由于npm是一个国外的镜像,下载起来速度较慢,这时候我们可以下载cnpm,指定我们的下载源在国内,下载依赖包的速度回更快一点。
使用命令(win+r):

npm install -g cnpm --registry=https://registry.npm.taobao.org

3.安装vue-cli
使用下面命令全局安装vue,然后回车等待,安装好之后可以使用vue命令监测是否安装成功。

cnpm install vue-cli -g

4.创建自己的vue项目

vue init webpack demo      //创建一个名为demo的vue脚手架项目,按回车等待

如何使用vue-cli搭建项目?
如何使用vue-cli搭建项目?
按照屏幕要求的提示进行操作,需要设置项目名称,描述,作者,是否安装路由(建议安装),ESlint(不建议安装,用于代码格式化,为了快速开发代码,一般不装),unit test(单元测试,不建议安装),e2e(不建议安装)。
最后可以选择yes,直接安装依赖,也可以no,自己安装。需要执行:

cd demo          //切换到项目根目录
cnpm install     //安装项目所需依赖
cnpm run start //运行项目

生成下图所示项目结构,并可以在src目录下做开发:
如何使用vue-cli搭建项目?
启动后如图所示:
如何使用vue-cli搭建项目?
自此,一个基于vue-cli的项目便搭建完成,我们可以在src目录下开发项目了。