vue-cli项目搭建,创建一个vuecli项目

　　本文主要介绍如何使用vue-cli创建模板项目，帮助您更好地理解和学习vue框架的知识。感兴趣的朋友可以了解一下。

　　场景

　　我这一代只是Java后端开发者。本来我们对前端的了解大致只有HTML/CSS/JavaScript/JQuery级别，后来接触到了nodejs。不仅是工作需要，我们个人也很想了解现代前端技术。然而遗憾的是，我们刚开始做nodejs的时候，什么都没发现，却发现构建一个项目需要太多的前端工具链。配置文件的数量甚至远远超过了后端。

　　因此，为了快速开发和入门后解决问题，我们选择使用nodejs npm vuejs webpack vscode组合和vue-cli快速构建一个基于现代前端工具链的前端项目。

　　对于那些想了解前端却上不了门的后端开发者来说，第一步入门是最重要/最难的。

　　步骤

　　前置要求

　　如果您想继续阅读，请确保nodejs/npm已正确安装在您的PC上。如果没有，请参考nodejs官网安装。

　　默认情况下，Npm已经包含在nodejs中。

　　第一步：全局安装 vue-cli

　　打开命令行并安装vue-cli。

　　npm安装-g @vue/cli

　　安装完成后，在命令行输入vue，您应该会得到类似如下的输出

　　第二步：使用模板初始化一个项目

　　命令格式

　　# option是一个选项，template是使用的模板，app-name是要初始化的项目的名称。

　　vue init[选项]模板应用程序名称

　　例如，我们使用Vue init webpack Vue-web pack-example来初始化web pack模板项目。我们还不需要大部分组件，所以我们选择vue-router并使用npm来构建它。

　　初始化之后，我们在命令行上输入文件夹vue-webpack-example。现在，我们可以通过npm run dev启动开发服务器模式，并将npm run build项目打包为静态文件。

　　尝试使用npm run dev运行项目，最后您应该会得到以下输出

　　在浏览器中打开链接http://localhost:8080。

　　第三步：初始化模板的一些坑

　　当您使用npm run build将静态文件打包到dist目录中时，您直接从文件管理器中运行它们，却发现浏览器是空白的。

　　这是vue-cli默认模板的问题。具体原因和解决方法请参考Vue打包的静态文件，不能直接运行。

　　这就是使用vue-cli的简单构建项目。希望所有后端开发者都可以尝试一下有趣的现代前端-(#)

　　这就是如何用vue-cli创建模板项目的细节。关于使用vue-cli创建模板项目的更多信息，请关注我们的其他相关文章！

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