houxianzhou 2020-09-22 09:40 原文
前言:
这个搭建脚手架的话实际是我们创建一个新项目的第一步,当然,现在脚手架4.0都出来了,经过使用后发现跟我们之前的3.0使用方法是答题一样的,其中用vue-cli3.0来搭建我们的项目的话又分为两种,一种是直接用3.0的typescript的方法来创建使用项目,但是实际生活中我们会发现,这种语法应用还是比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 + 你的项目名
-
![](https://img2020.cnblogs.com/blog/1161361/202009/1161361-20200922093755581-1601725987.png)
第三:选中我们需要的功能模块
![](https://img-blog.csdnimg.cn/20191111204439185.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjE5Nzk2,size_16,color_FFFFFF,t_70)
第四:选中配置路由的yes,然后回车根据自己需要选择语言
![](https://img-blog.csdnimg.cn/20191111204520573.png)
![](https://img-blog.csdnimg.cn/20191111204614368.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjE5Nzk2,size_16,color_FFFFFF,t_70)
第五:代码风格和eslint
![](https://img-blog.csdnimg.cn/20191111204812245.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjE5Nzk2,size_16,color_FFFFFF,t_70)
第六:代码一保存就进行检查,不要选择提交,会被坑的
![](https://img-blog.csdnimg.cn/20191111204828891.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjE5Nzk2,size_16,color_FFFFFF,t_70)
第七:选择lint的配置文件如何存放,这里我选了分别存到具体的config文件,而不是package,便于管理
![](https://img-blog.csdnimg.cn/20191111204849914.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjE5Nzk2,size_16,color_FFFFFF,t_70)
第八:是否保存本次创建项目的配置项,用于下次快速创建项目,保存下次一开就是三个选择
![](https://img-blog.csdnimg.cn/20191111204912842.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjE5Nzk2,size_16,color_FFFFFF,t_70)
到这里就配置结束了,一路回车就行了,搭建项目到此结束
推荐阅读