vue-cli4.0详细讲解下我们搭建脚手架的步骤

前言:

        这个搭建脚手架的话实际是我们创建一个新项目的第一步,当然,现在脚手架4.0都出来了,经过使用后发现跟我们之前的3.0使用方法是答题一样的,其中用vue-cli3.0来搭建我们的项目的话又分为两种,一种是直接用3.0typescript的方法来创建使用项目,但是实际生活中我们会发现,这种语法应用还是比2.0那种语法来说难度更高一些,所以我们这里来说一说我们使用了vue3.0以后即想使用3.0的便捷和优点,又不想在对typescript掌握还不算特别充分的情况下就贸然的踏入这个领域。

实现步骤:

第一:安装全局脚手架,在这里安装的是4.0的脚手架,不用担心,他们的安装都是一样的

先卸载vue2.0的脚手架:npm  uninstall  vue-cli -g ,全局卸载

安装vue3.0的脚手架: npm  install  -g  @vue/cli ,全局安装

第二:打开cmd窗口,输入命令 vue create + 你的项目名

vue-cli4.0详细讲解下我们搭建脚手架的步骤_第1张图片

第二:选中我们需要的功能模块

vue-cli4.0详细讲解下我们搭建脚手架的步骤_第2张图片

第三:选中配置路由的yes,然后回车根据自己需要选择语言

vue-cli4.0详细讲解下我们搭建脚手架的步骤_第3张图片

vue-cli4.0详细讲解下我们搭建脚手架的步骤_第4张图片

第四:代码风格和eslint

vue-cli4.0详细讲解下我们搭建脚手架的步骤_第5张图片

第五:代码一保存就进行检查,不要选择提交,会被坑的

vue-cli4.0详细讲解下我们搭建脚手架的步骤_第6张图片

第六:选择lint的配置文件如何存放,这里我选了分别存到具体的config文件,而不是package,便于管理

vue-cli4.0详细讲解下我们搭建脚手架的步骤_第7张图片

第七:是否保存本次创建项目的配置项,用于下次快速创建项目,保存下次一开就是三个选择

vue-cli4.0详细讲解下我们搭建脚手架的步骤_第8张图片

第八:到这里就配置结束了,一路回车就行了,搭建项目到此结束

 

你可能感兴趣的:(vue)