vue-cli3脚手架的配置和使用教程

这次给大家详细讲解一下vue-cli3.0的配置和使用，写给有需要的朋友。

Vue CLI是基于Vue.js快速开发的完整系统，提供：

通过@vue/cli设置交互式项目脚手架。通过@ vue/CLI @ vue/CLI-service-global快速启动零配置原型开发。一个运行时依赖项(@vue/cli-service)，它是一个官方插件的丰富集合，集成了前端生态中最好的工具。可升级；基于webpack构建，默认配置合理；可以通过项目中的配置文件进行配置；它可以通过插件进行扩展。一个完全图形化的用户界面，用于创建和管理Vue.js项目。Vue CLI致力于规范Vue生态系统中的工具库。它保证了基于智能缺省配置的各种构建工具能够顺利连接，让你可以专注于编写应用程序，而不用花几天时间担心配置问题。同时，它还为每个工具提供了在不弹出的情况下调整其配置的灵活性

vue-cli3的官方网站给了我们一个vue-cli3一些特性的概述。个人使用vue-cli3的经验表明，零配置和可升级性这两个特点确实不错。

如何安装vue-cli3？

首先，你必须有一个nodejs环境

节点版本要求

Vue CLI需要Node.js版本8.9或更高版本(建议使用8.11.0)。您可以使用nvm或nvm-windows在同一台计算机上管理多个版本的节点。

其次，如果您之前安装了旧版本的vue-cli，您应该执行以下操作

关于旧版本

Vue CLI的包名已从vue-cli更改为@vue/cli。如果您已经在全局范围内安装了旧版本的vue-cli(1.x或2.x)，则需要通过npm uninstall vue-cli -g或yarn global remove vue-cli将其卸载。

假设您有nodejs环境，您可以通过以下说明安装vue-cli3包

安装NPM install-g @ vue/CLI # oryard全局add @ vue/CLI后，您可以从命令行访问vue命令。只需运行vue，查看它是否显示所有可用命令的帮助消息，就可以验证vue是否安装成功。(例如vue版本)

下一步是使用以下命令创建vue项目：

vue创建hello-world

系统将提示您选择预设。您可以选择包含基本Babel ESLint设置的默认预设，或者选择“手动选择功能”来选择所需的功能。

当做出多个选择时，空格表示选择，回车表示输入下一个配置项

此外，您手动选择的配置项也将存储在~/。电脑的vuerc文件，所以下次创建vue项目的时候，可以选择之前手动配置的配置，通过vue cli3非常人性化！赞美！

选择上述配置后，成功创建了一个简单的vue项目。此时，您在命令行cd hello-world上输入hello-world项目的根路径，并在命令行上敲下npm run serve，项目开始运行。

让我们再次讨论创建项目后的目录层次结构，下一张图片：

一个接一个：

公共目录放置ico和你的index.html。我这个目录博主没有添加其他文档，让她活，让她活~ ~ ~；Src是一个不可思议的目录，它是我们开发vue项目的关键目录。一资产目录：

放置静态文件，如图片、js、svg的js等。此目录中的文件将被webpack copy2 .组件目录：Place public vue组件页面3 .样式目录：由博主添加，通过reset.css和Ali矢量图形字体iconfont.css重写4 .视图目录：博主作为放大模块。登录页面、主页、注册页面等。

不知道各位童鞋有没有发现，博主比你多了一个vue.config.js文件，这个文件更差。我们的前端独立开发存在跨领域的问题。vue-cli2的代理表配置在vue-cli3之前是在哪里配置的？

//vue。配置。js模块。导出={//选项.baseUrl: ' ./'，outputDir:'dist '，assetsDir:'assets '，indexPath:'index.html '，filenameHashing:true，pages:undefined，lintOnSave:true，runtimeCompiler:false，transpileDependencies:[]，productionSourceMap:false，crossorigin:undefined，integrity:false，devServer:)代理端口：8086,代理： ' http://192 ' } } 168 .168686868686总结

以上所述是小编给大家介绍的vue-cli3脚手架的配置及使用教程，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！