Vue学习入门之脚手架开发环境搭建

1、安装Vue.js脚手架

所谓“脚手架”就是为了快速搭建应用程序开发框架而设计开发的自动构建工具。在当前各种Web开发框架流行的今天，大部分前端开发工具和框架都设计了自己的“脚手架”工具，而Vue.js框架的脚手架就是vue-cli命令行工具。

Vue.js框架自身的迭代速度很快，目前主流的是Vue 2版本和Vue 3+版本。相比较而言，Vue 3+版本在Vue 2版本的基础上增加了不少新特性和新功能。因此，也造成了Vue 3+版本与Vue 2版本在使用上多少有些差异。

在Vue.js脚手架（vue-cli）的使用上，Vue 3+版本与Vue 2版本也存在着不同，下面主要以Vue 3+版本进行介绍。安装vue-cli需要使用node的npm，如果没有安装node，可以参照博主《Windows11下安装压缩版的Node.js16.7.0》这篇博文进行安装。

（1）安装vue-cli

npm install -g @vue/cli

在cmd中输入以上的命令，安装效果如图所示：

（2）查看vue-cli版本

如果想验证一下vue-cli命令行工具是否安装成功了，可以通过如下命令查看vue-cli的版本号来进行验证：

vue -V

如图所示，显示对应的vue-cli的版本号，说明vue-cli命令行工具安装成功了。

2、通过Vue.js脚手架创建应用

Vue.js脚手架功能十分强大，通过vue-cli命令行工具的“vue create”命令，可以直接创建Vue.js应用项目，该应用项目会自动生成若干必要的框架文件，以及一个默认的Vue单文件页面。同时，这个默认的Vue单文件页面已经是一个最基本的Vue.js应用了，通过“npm run”命令就可以直接运行测试该应用项目。下面具体介绍一下通过Vue.js脚手架创建应用项目及进行运行测试的过程。

（1）选定好打算创建Vue.js应用项目的目录，进入该目录的命令行控制台，通过“vue create”命令创建指定的项目名称（createvue），具体命令如下：

vue create vue_demo

（2）在命令行控制台中执行上面的命令，效果如下图所示：

（3）通过键盘上下键，继续选择默认的“Default (Vue 3) ([Vue 3] babel, eslint)”项后确认回车，vue-cli命令行工具将会创建刚刚指定的vue_demo项目，并安装项目所需的相关插件，如下图所示：

（4）安装过程需要一段时间，此时需要耐心等待一会儿，等到安装过程全部完成后，命令行控制台会提示如图所示的信息：

命令行控制台中的提示信息告诉我们，进入项目目录后通过输入“npm run serve”命令就可以启动运行项目了。

（5）接下来，我们就按照上面的提示信息测试一下，效果如下图所示：

cd vue_demo npm run serve

（6）上图命令行控制台中的提示信息告知我们，通过在浏览器中输入“http://localhost:8080/”地址就可以运行项目了，效果如下图所示：

浏览器中运行效果如上图，说明这个Vue.js项目创建成功了。现在，到这一步基本就完成了一个Vue.js项目的构建、测试和运行任务，设计人员就可以在这个Vue.js项目的骨架上按照自己项目的需求进行开发了。

3、打包Vue项目

（1）在项目开发完成后，还有很重要的一步就是项目的打包和发布，可以通过vue-cli命令行工具的npm run build命令对vue项目进行打包（运行vue项目时，最后也有对应的提示，如下图）：

（2）根据命令行控制台中的提示信息，进入项目目录后通过输入“npm run build”命令就可以对项目执行打包发布操作，效果如下图所示：

npm run build

（3）打开项目路径，会发现路径下生成了一个dist文件夹，该文件夹就是打包后的项目内容，可以将该文件夹直接部署到Tomcat或者Nginx中进行使用。

至此使用vue脚手架搭建开发环境完成。

JavaScript Node.js npm Vue

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。