构建vue.js手脚vue-cli项目的步骤

什么是脚手架？

众所周知，前端项目的开发越来越多，我们前端程序员从0开始构建一个完整的项目是很费时间的，所以前端项目的手脚就在这个时候出现了。

我使用vue-cli作为其中之一，我不能告诉你其他任何事情。我就说说这个我接触比较多的vue-cli。

然而，所有手脚支架的核心是快速构建一个完整的项目结构。开发人员只需要在生成的项目结构基础上进行开发，非常简单高效。

其次，vue-cli的脚手架项目模板包括browserify和webpack，vue-lic将预定义的模板(存储在不同的服务器上)本地复制作为项目的初始结构。官网给出了两个模板：webpack-simple和webpack。

两者的区别在于webpack-simple不包含Eslint check等功能。使用webpack就足够了——对于普通项目来说很简单。

我在用wbpack。

至于能不能打造一套手脚，这是肯定的。你只能写一个模板放在github上。在以后的项目中，可以用自己的手脚架。

使用vue-cli

这里因为我用的代码编辑器是vs代码，所以我会按照vs代码的界面来显示；

下面提到的其他命令也可以用在带有终端的其他代码编辑器中

步骤1:安装虚拟命令行界面

npm安装-g vue-CLI

安装完成后，您可以使用命令

Vue列表，查看哪些模板可以调用；

步骤2:建立项目目录

命令格式：vue init模板-名称项目-名称

模板名称：指上面的很多模板；

项目名称：指你自己项目的名称；

例如，我使用模板webpack: vue init webpack vuetest

步骤3:安装依赖项

输入新创建的文件夹：

命令格式：cd vuetest

在文件夹中安装依赖项

命令格式：npm安装

注意：

不需要用cnpm淘宝包管理器安装依赖项，这样会少很多东西；

虽然用npm下载依赖很慢，毕竟是和国外链接连接的；

以下是你此后的经历：

第四步：直接跑

命令格式：npm运行开发

可以直接在终端输入这个命令；

默认为本地端口8080:

这里没问题！

使用网页模板搭建的vue项目目录还可以；

注意：

当运行npm run dev时，可以改为使用Cnpm run dev。

在…之中

安装cnpm

npminstall-gcnpm-registry=https://registry.npm.taobao.org命令。

其他用法不如npm。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。