今天讲述的前端软件的使用情况,是因为在制作h5页面的学习过程中,我发现了非常多好用的前端软件。当然,最常用的是webstorm和HbuilderX和记事本。当然,使用viscode和myeclipse也是可以的。像我在大学课程中学的经常是基于tomcat+vue+node.js+idea+Hb写一个项目,在这个过程中就需要配置非常多的环境和前后端分离,或者Axious网络交互等情况。在学习的过程中,说实话是把我绕晕了的。所以,博主开始摸索其他的前端软件的使用方法,选出了一个我认为简单的一个来。那就是WebStorm!
那现在就开始演示一下使用这个软件创建一个项目的过程吧。
(1)首先,我们需要在桌面创建一个新建文件夹
(2)打开管理员的cmd,去给我们的项目进行配置,如果说没有配置的话,提示如下:
当遇到这种情况,我们可以按照以下步骤(这里我选用的是下载pnpm方法)具体可查看vite官网中文文档。
一.全局安装:使用管理员cmd输入:npm install pnpm -g
右键单击开始按键,按 A 键进行控制台,输入npm install pnpm -g 命令进行安装。参数 g 表过全局安装。
看到搭建的命令行
二、设置下载源
1. 查看下载源:
pnpm config get registry
2. 切换淘宝源,可以加快下载速度
pnpm config set registry https://registry.npmmirror.com/
3. 还原:
pnpm config set registry https://registry.npmjs.org
三.进行新建文件夹的位置,打开cmd,输入pmnp命令行创建文件
这里的名字输入项目名称,博主的是hongmeng
这是第一个选择自动生成框架的位置,我们目前已学了vue,react和svelte,但是该项目需要用的是vue框架,所以直接选择vue
同理,这里可以选择ts和js的需求,博主选用了ts,当出现下列的提示时,显示文件项目搭建成功,文件夹内可自动生成文件
但是!!!!我们查看文件夹的时候会发现缺少了一个node_modules作为项目依赖。所以我们需要在该文件夹内cmd输入pnpm i的命令,建立项目依赖。
建立完成,自动生成依赖
接着,我们将这个vue项目运行在本地电脑,在cmd中输入 pnpm run dev
将local的地址复制到浏览器中即可查看当前搭建的架构
最后,当我们要进行网页设计的时候,可以将文件夹hongmeng拖进webstorm或者viscode中进行!当然,在这里我要重点的提示一下,因为,ts的版本问题是基于node.js的基础上去运行的,所以,建议大家下载node.js的时候选择版本16+的,大家可以先使用cmd输入node -v查看自己电脑中是否下载过node.js的版本。
好啦!到这里,vite基于vue来初始化工具创建一个项目文件就到此结束啦!
程序员们请到自己习惯使用的软件中的src部分继续完成自己的代码吧!
问题:
1.使用这种方式,一定要先安装pnpm方式,另外还有两种方式,如npm类可在vite官网中文文档中查看,如果没有安装,直接输入pnpm create vite会显示报错!
2.修改vue文件时,不能删除App.vue文件,这个是根组件。不然容易出现报错,如main.ts中找不到app.vue的文件的情况