全栈开发之路——前端篇(1)介绍、框架确定、ide设置与项目创建


前言

笔者还有一个小程序制作教材,是用小程序原生开发语言和原生开发ide的,那对于想要有更广适用性(不想局限于小程序)的开发者而言并不友好,所以在不停更的情况下,我们将再开一个全栈工程师之路系列,本系列会从前端讲到后端,对个人小体量想学习全栈开发的开发者更友好。
本系列前端将使用VUE,后端使用Python,ide选择VS Code。


提示:以下是本篇文章正文内容,下面案例可供参考

一、前端框架

我们都知道前端三件套,html、css、JavaScript,很多时候我们并不是只用一个,而是相互结合。如果我们有一个集成的框架,可以让我们在一个文件中完成,岂不美哉?于是我们就需要框架,主流框架有react、vue等,接下来我们分析为什么选择Vue。

React和Vue

作为个人中国开发者,在选择框架的时候,我们注重几个方面:好用吗?流行吗?移植性好吗?

React

1.灵活性和响应速度快。
2.丰富的JavaScript库
3.对大型应用程序更好。
4.Web或移动平台: React提供React Native平台,可通过相同的React组件模型为iOS和Android开发本机呈现的应用程序。

Vue

1.高效验证业务可行性,高效迭代。
2.易于使用: Vue.js包含基于HTML的标准模板,可以更轻松地使用和修改现有应用程序。
3.更顺畅的集成:无论是单页应用程序还是复杂的Web界面,Vue.js都可以更平滑地集成更小的部件,而不会对整个系统产生任何影响。
4.更好的性能,更小的尺寸:它占用更少的空间,并且往往比其他框架提供更好的性能。
5.它提供无障碍的迁移,简单有效的结构和可重用的模板。

我们在后续的开发中将选择Vue,人话来说,Vue更好学,集成度高,移植性好,而且中国人用的多,非常适合个人开发者,更适合独立完成项目的全栈工程师~。

二、编译器选择和配置

下载VS code就在百度上搜索下载即可。主要说说下载Vue和vscode配置。

1.传统的下载和使用

下载大家都一样,使用有传统方法和新方法,请大家先按照老文档下载所需要的文件,大家直接看我列出的两篇参考博客就行了,其中会遇到的问题我下面会说。
先安装node.js
安装链接
详细步骤可以参考这篇博客参考链接
再安装Vue3
参考这篇即可

2.你可能遇到的问题

1.ERR! syscall mkdir

在这里插入图片描述
遇到这个问题,说明你的vscode没权限新建路径,请你右键点开你保存node.js的文件夹的属性,点击上方安全
在这里插入图片描述
将每个组的权限全部拉满,就没有这个问题了。

2.vue : File C:\nodejs\node_global\vue.ps1 cannot be loaded because running scripts is disabled on

在这里插入图片描述
如果你遇到了这个问题,就是因为执行政策不对。请你关闭vsCode,重新用管理员模式打开,然后在终端中输入Set-ExecutionPolicy RemoteSigned
在这里插入图片描述
接着输入Get-ExecutionPolicy检查是否设置成功,显示RemoteSigned就是设置成功了,接下来就可以创建Vue文件了~

3.出现乱码问题

你试图运行代码,给你报错,里面一堆你看不懂的符号,那大概率就是你的路径里有中文字,换成英文路径就好了。

3.运行Vue

终端输入npm run serve,点开其给出的网络地址即可。
在这里插入图片描述

三、Vue的插件使用

我们选择CodeVS的原因就是因为它有全面的插件可以让我们更快速和舒服的开发,写下来,我们细致讲述需要安装哪些插件以及我们如何使用。
Vetur
在这里插入图片描述
这个插件可以提供语法高亮等视图上的便捷显示,防止你被各种标签搞瞎(狗头)
Live Server
在这里插入图片描述
可以实时反馈我们的修改,让我们更好的调试网页。
无脑入
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
这些插件都是要么自动帮你补全tag,要么做美化,open in browser可以快捷打开浏览器,后面要用会说,都是无脑入的好货~

四、Vue3的打开项目的新方式

你可以用二中提到的脚手架方式创建Vue项目,但是有更新更好用的方式。
我们在vscode中打开终端,

npm create vue@latest

在这里插入图片描述
请按照如下配置,这是我们学习需要的配置,真的做项目的时候不这么选,后面都会说,跟着这个系列学就好了。
在这里插入图片描述
左侧资源管理器中出现即为创建成功。
在这里插入图片描述
这个方法快捷方便自由,所以我们建议使用这个方法。

最近更新

  1. TCP协议是安全的吗?

    2024-05-01 20:02:01       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-05-01 20:02:01       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-05-01 20:02:01       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-05-01 20:02:01       18 阅读

热门阅读

  1. 【重识python day4】

    2024-05-01 20:02:01       10 阅读
  2. U427420 pow(A,2) Problem

    2024-05-01 20:02:01       10 阅读
  3. C++入门 #10 循环3(do-while)

    2024-05-01 20:02:01       10 阅读
  4. Spring Boot Actuator 模块,spring-boot-starter-actuator

    2024-05-01 20:02:01       9 阅读
  5. 精准农业:利用机器学习优化作物产量

    2024-05-01 20:02:01       10 阅读
  6. subject may not be empty | type may not be empty报错解决

    2024-05-01 20:02:01       9 阅读
  7. Ubuntu下vscode彻底卸载

    2024-05-01 20:02:01       10 阅读
  8. 自动化测试——selenium

    2024-05-01 20:02:01       8 阅读
  9. Docker Error log

    2024-05-01 20:02:01       9 阅读
  10. 每天学习一个Linux命令之dd

    2024-05-01 20:02:01       10 阅读