vue4.0脚手架,vue脚手架教程

　　本文介绍了使用vue-cli搭建脚手架的方法，对大家的学习或工作有一定的参考价值。有需要的朋友可以和边肖一起学习。

一、安装node.js

1、进入官网https://nodejs.org/en/download/

　　根据电脑操作系统，选择相应版本的文件进行下载。

2、下载文件后双击进行安装

　　安装完成后，进入node.js: D的安装目录：\Program Files\nodejs\(这里是我安装这台机器的目录，其他机器的目录可能不一样)，你会发现npm是自带的。直接用npm安装环境就行了。

二、安装cnpm

　　说明：npm(节点包管理器)是node.js的包管理器，用于节点插件的管理(包括安装、卸载、依赖管理等。).使用npm安装插件：命令提示符执行npm安装名称。选择cnpm。因为npm安装插件是从外地服务器下载的，受网络影响较大，可能会出现异常。要是npm的服务器在中国就好了，我们乐于分享的淘宝团队做到了这一点。来自官方网站：“这是npmjs.org的完整镜像。可以用它代替正式版(只读)。目前同步频率是10分钟一次。尽量保证与官方服务同步。”；命令：NPM install-g cnpm-registry=https://registry.npm.taobao.org。查看：输入cnpm-v查看当前版本的cnpm。注意：安装cnpm时，不是安装在node.js的地方，而是安装在创建的项目目录下。

三、安装vue-cli脚手架构建工具

　　Vue-cli提供了一个官方命令行工具，可用于快速构建大型单页面应用程序。该工具提供了构建工具的开箱即用配置，带来了现代化的前端开发流程。只需几分钟就可以创建并启动一个带有热重载、保存时静态检查和可用于构建环境的构建配置的项目。

1、安装命令

　　命令：$ cnpm安装vue-cli -g .如下图所示：

　　注：G表示全球安装。

　　以下界面显示安装完成：

2、检查是否安装成功

　　安装完成后输入vue -V(注意这里是大写的‘V’)，如下图所示。如果出现相应的版本号，则安装成功。

四、创建一个基于webpack模板的新项目

　　要创建一个项目，首先我们必须选择目录，然后在命令行中将目录更改为选定的目录。您可以使用以下命令：

　　$ vue init webpack my-app

　　注意：my-app是一个自定义项目名，不能包含大写字母。

　　输入命令后，直接按回车键执行：

　　运行初始化命令时，将要求用户输入几个基本选项，如项目名称、描述、作者和其他信息。例如：

　　项目名称(myvuedemo):项目的名称，这里是myvuedemo。

　　项目描述(一个vue.js项目):项目描述，这里是“我的第一个vue项目”。

　　作者：作者。

　　安装vue路由器？(Y/N):是否安装Vue路由，也就是以后的spa(但是页面应该需要的模块)。

　　用ESLint lint你的代码？(Y/N):在代码中使用ESLint。

　　选择一个eslint预设(使用箭头键):选择一个预设ESLint(使用箭头键)。

　　设置单元测试(y/n) y:设置单元测试。

　　用守夜人设置e2e测试？(是/否):设置端到端测试。

五、运行项目

　　输入以下命令：$ cnpm run dev。

　　操作成功后，根据提示，在浏览器中输入http://localhost:8080，浏览器显示如下页面：

　　注意：服务启动后，不能关闭。

　　至此，Vue.js的脚手架搭建完毕。

　　关于Vue2.0脚手架的这篇文章到此结束。希望对大家的学习有帮助，也希望大家多多支持。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。