记录第一次使用VScode创建Vue项目(完整过程,附带bug和解决)
发布日期:2021-10-13 12:43:57 浏览次数:1 分类:技术文章

本文共 2306 字,大约阅读时间需要 7 分钟。

由于第一次使用VScode创建Vue项目,很多步骤不熟悉,特此记录一下。(小编之前用的是HBuilderX,创建项目的时候超级轻松;也可以通过vue ui打开vue的可视化界面,操作超级方便)

进行下面的步骤之前,你的电脑上面需要是已经安装并配置好创建Vue项目所需的各种环境,包括nodejs环境、webpack环境、以及 vue cli4 环境。(安装过程可参考:)

文章目录

正确姿势

由于VScode没有提供创建项目的入口,因此创建项目需要通过以下步骤

step1、创建文件夹

在你打算创建项目的路径下面创建一个空文件夹

在这里插入图片描述

step2、在VScode中打开文件夹

在VScode工具栏中找到:文件 -> 打开文件夹 -> 选择文件夹,点击确定

然后就可以在VScode中看见一个新的工作区,里面有刚才创建的空文件夹。右侧有四个图标,分别表示:创建文件、创建文件夹、刷新、折叠

在这里插入图片描述

step3、在VScode终端中创建项目

在VScode工具栏中找到:终端 -> 新建中断。在下方就可以看到终端,如图所示

在这里插入图片描述
接下来就是执行创建项目的命令。不同版本的vue,命令不一样。由于本项目是 vue cli4 ,就执行vue cli4的创建命令,和vue cli3的命令一样。

注意,项目名为小写,不能包含大写

vue create 项目名

在这里插入图片描述

接下来便是项目中的配置选择,已经有过项目创建经验的人,对这部分应该比较熟悉,这里详细说明一下

step4、选择项目中需要安装的插件

下面出来这些,都是之前我在创建其他项目时,已经选择过的插件配置。如果你也有,可以选择已有的,也可以创建新的,选择最后一项,点击回车就可以

在这里插入图片描述
这里为了演示全部过程,小编选择了最后一项,Manually select features,然后进入插件选择部分。
在这里插入图片描述
vue提供了两个默认选中的插件,你可以根据自己的需要选择插件,由于只是一个测试项目,里面用不到很多东西,就选择基础的几个:Babel、Router,就可以

各个插件的作用如下:(原文链接:https://blog.csdn.net/AI_U20/article/details/88424354)

Babel : 将ES6编译成ES5,方便在开发中使用ES6语法

TypeScript : javascript类型的超集(可以学一下)
Progressive Web App (PWA) Support : 支持渐进式的网页应用程序
Router : vue-router
Vuex : 状态管理,适用于大项目
CSS Pre-processors : CSS预处理
Linter / Formatter : 开发规范
Unit Testing : 单元测试
E2E Testing : 端到端测试

实际上,这里选择了哪些插件并不重要,后面需要的时候,可以随时安装和删除

按照提示,Press <space> to select, <a> to toggle all, <i> to invert selection,点击空格选中插件,点击 i 更换选中,点击回车完成选择并进入下一步

step4、选择ESlint的配置

ESlint主要是对代码进行规范用的,是一个很严谨很严谨的一款插件(严谨到一个空格都会报错,使用在开发时,还是关掉好一点,或者在上一步直接不选择,不然你就会因为ESlint的报错提示搞得十分繁忙)

在这里插入图片描述
下面的一些步骤,直接安装默认的就行

step5、是否保存当前方案

到了这里的时候,Save this as a preset for future project?(y/N),意思是,你是否想要把上面所选的插件作为一个方案保存,这样方便以后直接选用,无需再次手动配置(就像step4中截图里面,我已经创建的那些方案一样)

在这里插入图片描述
Save present as:如果你想要把此次创建所选插件作为一个方案保存,那么就给它起个名字

step6、选择安装方式

我已经安装了yarn和npm,二者都可以选择,区别在于,yarn更快。因为npm的镜像在国外,会更慢一点,也可能会出现网络问题(回想起第一次安装vue的时候,年幼无知,使用的 npm,可真是吃够了苦,后来还是用的 cnpm 解决的)

在这里插入图片描述
点击回车,就开始安装了,这是一个漫长的过程,耐心等待就好

step7、安装完成

出现下图所示,就是成功安装了。在工作区下面,可以看到过程新创建的项目

在这里插入图片描述
同时,本地也会出现项目,如下
在这里插入图片描述

step8、运行项目

按照提示,输入并执行命令,即可

在这里插入图片描述
启动完成,复制地址,浏览器打开,或者Ctrl+单击
在这里插入图片描述
在这里插入图片描述
完成了
———————————————————— 分割线 ————————————————————

bug和解决

1、问题一:无法加载npm\vue.ps1,系统禁止脚本运行

在这里插入图片描述

解决参照:

2、问题二:命令不对应

咳咳,不管做什么事情都需要带脑子呀,请看我的错误演示

在这里插入图片描述
可以看到,执行的vue init webpack myProjectOne是vue cli2的创建命令(然而一心想要赶紧创建项目的我没有注意到,哈哈哈),vue cli4中并不支持。按照提示,安装 yarn global add @vue/cli-init,本来应该是可以成功的,但是不知道为何问题循环了,或许是需要重启??(这个问题我没有去追究,因为就在此时,我发现了版本问题,为时不晚)
在这里插入图片描述
那么,就用对应版本的命令去执行吧,vue create myProjectOne。然而,有报错,原来是项目名只能小写,不允许有大写
在这里插入图片描述
调整,重新来,OK了
在这里插入图片描述

转载地址:https://blog.csdn.net/qq_41956139/article/details/105309048 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:码云之 仓库迁移地址修改
下一篇:VScode创建Vue项目,报错:vue : 无法加载文件 C:\Users\xxx\AppData\Roaming\npm\vue.ps1

发表评论

最新留言

网站不错 人气很旺了 加油
[***.192.178.218]2024年03月14日 08时57分41秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

mysql里可以用cube吗_sql server的cube操作符使用详解_mysql 2019-04-21
php mysql 图书_使用PHP+MySQL来对图书管理系统进行构建 2019-04-21
单片机c语言 int1,51单片机into、int1中断计数c语言源程序.doc 2019-04-21
c语言课程设计工资管理建库,C语言课程设计工资管理系统参考.doc 2019-04-21
c语言case中途跳出,break语句在switch结构语句中的作用是终止某个case,并跳出switch结构语句。... 2019-04-21
c51写c语言外部ram头文件,C51中访问外部RAM的方法 2019-04-21
51c语言产生随机证书,基于51单片机的随机数产生器设计-LCD1602-KEY-(电路图+程序源码)... 2019-04-21
C语言编写程序计算高考倒计时天数,基于51单片机LCD12864大字符校时万年历带高考倒计时程序... 2019-04-21
c语言打开一个html文件路径,C语言文件处理-C语言文件的打开和关闭 2019-04-21
普职融通信息技术课本C语言,“三步走”扎实推进“普职融通”办学新模式 2019-04-21
Android多个签名,【Android】Android批量重签名 2019-04-21
html unicode编码转换,JS实现的Unicode编码转换操作示例 2019-04-21
html页面角落放动漫人物,L2Dwidget.js L2D网页动画人物添加 2019-04-21
html图片水平居中,CSS制作图片水平垂直居中 2019-04-21
水滴pin安卓版apk_财务报销管理系统 2019-04-21
平面设计师okr_设计团队的KPI/OKR如何制定? 2019-04-21
仪表盘故障图像识别_仪表显示的图像识别算法研究 2019-04-21
c#背单词小程序视频_C#用timer实现背单词小程序 2019-04-21
24v开关电源维修技巧_【电视技术】液晶电视电源板十个维修经验分享 2019-04-21
laravel comment显示到页面最上面了_使用 Laravel 快速开发API接口,新手必读 2021-06-24