怎么创建vue-cli项目,使用vue-cli快速搭建vue项目
本文主要介绍如何使用vue-cli3在五分钟内创建一个项目。文章通过示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
:
目录
1.构建vue环境2。Vue脚手架工具3。创建项目4。选择手动选择(回车确认并进入下一步)5。选择完成后输入。在这里，我们选择3.x 6。完成后，进入如下界面7。进入如下界面8。进入如下界面9。进入如下界面10。进入如下界面11。进入如下界面
一、搭建vue环境
安装Nodejs官网，下载Nodejs。如果你想要一个稳定的开发环境，下载LTS(长期支持)长期支持版本，这是稳定的。
我是一点进入node官网的。
安装完成后，cmd输入node -v查询安装是否成功，以下版本号为成功。
二、Vue脚手架工具
安装全局vue-cli，并输入：
npm安装- g vue-cli
在中国直接使用npm的官方形象是非常慢的。这里推荐淘宝图片或者纱线。
淘宝镜安装如下
NPM install-g cnpm-registry=https://registry . NPM . Taobao . org
//安装成功后使用cnpm i xxx代替npm install xxx
三、创建项目
创建项目名称
e .创建code//其中code是您的项目目录的名称(回车确认并转到下一步)
在回车开始时，将出现以下两项
默认(vue3) ([vue3] babel，eslint)(默认配置提供babel或ESLINT支持)
手动选择功能(手动选择项目功能)
我们可以通过上下键和空格来选择我们需要的东西。一般我们会选择手动配置。
四、选择manually select (enter键确认，并进入下一步)
对于每一项的功能，王同学做一个简单的描述：
Babel主要将es6语法转换成兼容的js(可选)
TypeScript支持使用TypeScript语法编写代码。
渐进式网络应用(PWA)支持[使网页更像本地应用]
路由器支持vue路由配置插件(通常选择)
Vue ex支持Vue程序状态管理模式(通常选择)
Css预处理器支持CSS预处理器(通常选择)
L/formatter支持代码样式检查和格式化(已选择)
单元测试
E2E测试E2E测试
常见的项目选择如下
五、选择完成之后回车 这里我们选择3.x的
六、完成之后回车 出现以下界面
意思是问你这个项目是否采用历史模式。如果选择Y，需要后台配置。详见vueRouter官网的解释。这里，我们选择n。
七、回车 出现以下界面
我这里的意思是问你选择哪种CSS预处理语言。我通常在我的项目中使用SCSS，所以我选择第一个。
八、回车出现以下界面
选择一种格式化代码的方式：我一般选择ESLINT PRETTER。
九、回车出现以下界面
你什么时候检查代码规则？我一般选择保存后检查，也就是保存时Lint。
十、回车出现以下界面
这意味着配置文件Babel、PostCSS、ESLint ESLINT放在哪里。通常我们会选择把它们放在一个独立的位置，让package.json文件干净，所以我们选择第一个。
十一、回车出现以下界面
这里会询问您是否记录该配置选择。选择后，您将获得该配置的名称，以便您下次可以直接快速地配置选择。最后，在您按enter键后，项目将被初始化。完成后，如下图所示：
十二、根据提示，启动项目
按照说明，提示我们先执行cd代码，然后npm运行serve。
十三。当我们需要自定义webpack的相关配置时，需要在项目的根目录下创建vue.config.js文件，它会由@vue/cli-server自动加载。相关配置内容官网会有详细介绍，大家可以自己去官网看看。今天到此为止。本期结束后我们下期再见！
这就是这篇文章的全部内容，大约五分钟，教你如何用vue-cli3(初学者级别)创建一个项目。有关使用vue-cli3创建项目的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。