从 0 搭建 Vite 3 + Vue 3 前端工程化项目

前言 Vue 3 正式版已经发布有一段时间了，随着 Vite 脚手架注定成为下一代前端工具链，许多用户都想基于 Vite 来构建 Vue 项目，如果想基于 Vite 构建 Vue 3 项目，社区模板完全满足您的需求 TypeScript 语言的用户不是很友好，因此接下来从 0 开始手把手带大家搭建一套规范的 Vite 3 + Vue 3 + JavaScript 前端工程化项目环境。 本文章篇幅较长，从以下几个方面展开： 基础搭建 代码规范 提交规范 自动部署 本项目完整代码托管在 GitHub 仓库[1]，欢迎点亮小星星 技术栈 ⚡️ Vite 3[2] - 构建工具（就是快！） + Vue3 + Vue Router + Pinia + Axios + Less 的前端项目开发环境搭建完毕。 文章总结 本文从技术选项到架构搭建、从代码规范约束到提交信息规范约束，一步一步带领大家如何从一个最简单的前端项目骨架到规范的前端工程化环境，基本涵盖前端项目开发的整个流程，特别适合刚接触前端工程化的同学学习

Web前端基础【3】--JavaScript基础

下面将从基本语法、数据类型和变量、运算符和操作符、条件判断、循环和函数六个方面介绍JavaScript基础，掌握这些基础就可以看懂简单的JavaScript代码。 var x = 2; var y = 1; if(x > y){ x = 3; y = 2; } 大括号{}内可以嵌套，形成层级结构。 上诉数组包含六个元素，数组用中括号[]表示，元素之间用逗号(,)分隔，还有一种创建数组的方式：通过Array()函数实现，例如： var array= new Array(1, 2, 3). 数组中的元素可以通过索引来访问，索引的起始值为0. 5：对象类型：JavaScript的对象是一组由键-值组成的无序集合，（与Python中的字典相似），例如： var person = {name: 暂举例for循环：计算1到100相加： var x = 0; var i; for ( i=1; i<=100; i++ ) { x = x+i; } 六：函数： 在JavaScript中，定义函数使用

前端项目从0到1的感悟

去年6月份左右，加入了一个创业公司，很幸运做了一个从零开始的项目，前端工程由我一手搭建起来，并不断迭代功能到现在，有许多的感悟心得，在这里写点总结 确定框架、技术点 一个项目的开始，特别是丰富多样的前端工程 ，对于日渐迭代版本越来越多的前端项目，如果没有一个好的目录结构会显得非常臃肿，难以维护，以下这个截图是我现在正使用的目录，也还有需要改进的地方，做一个参考： ? background: 0 0; } 3.媒体查询控制字体大小 /** 媒体查询 start */@media only screen and (min-width: 400px) { html important; } } 这是所有页面的基础样式控制，主要是在字体方面，用rem来解决移动开发中多屏适配，如果有UI框架引入的时候就要根据实际情况考虑是覆盖基础样式还是被覆盖来决定引入的先后顺序了 在项目开发协作中，特别是团队组建初期，特别是前后台交互、UI跟前端对接、产品经理跟开发沟通中，可能会存在很大的意见分歧，可可能有人会说你代码哪里哪里不好、没有注释、不可维护..

Vite前端项目搭建从0到1

安装完 Nodejs 之后，包管理器npm也会被自动安装，你可以执行下面的命令来验证:npm -v当然，在现代的前端项目中，我非常不推荐使用 npm 作为项目的包管理器，甚至也不再推荐yarn(npm 后续的交互流程梳理如下:输入项目名称；选择前端框架；选择开发语言。 首先是输入项目名称，这里你可以输入vite-project，然后按下回车，进入选择前端框架的部分:✔ Project name: vite-project? vanilla // 无前端框架 vue // 基于 Vue > react // 基于 React preact // 基于 Preact（一款精简版的类 React 框架 紧接着，我们立马去浏览器中打开http://localhost:3000页面至此，我们成功搭建起了一个 React 前端项目。怎么样？利用 Vite 来初始化一个前端项目是不是非常简单？

【0基础学Python】基础语法Part3

【Python】基础语法3 函数 创建函数/定义函数 def 函数名(形参列表) 函数体 return 返回值 调用函数 函数名(实参列表) # 不考虑返回值时 返回值 = 函数名 def calcSum(beg,end) sum = 0 for i in range(beg,end+1) sum += 1 print(sum) calcSum(1,100) calcSum def calcSum(beg, end): sum = 0 for i in range(beg, end + 1): sum += i print(sum) ] print(alist[2])# 下标从0开始，故这里打印3 print(alist[19])# 如果超出列表有效范围，则抛出异常 print(len(alist))# 获取列表长度 print(alist ] for i in range(0,len(alist)) print(alist(i)) 使用while控制 alist = [1, 2, 3, 4] i = 0 while i < len(alist

0基础深入理解指针（3）

0; int j = 0; for(i=0; i<r; i++) { for(j=0; j<c; j++) { printf("%d ", a[i][j]); } printf("\n") ; } } int main() { int arr[3][5] = {{1,2,3,4,5}, {2,3,4,5,6},{3,4,5,6,7}}; test(arr, 3, 5); return [3][5] = {{1,2,3,4,5}, {2,3,4,5,6},{3,4,5,6,7}}; test(arr, 3, 5); return 0; } 函数指针变量 什么是函数指针变量呢？ ; printf("%d\n", (*pf3)(2, 3)); printf("%d\n", pf3(3, 5)); return 0; } 函数指针数组 数组是⼀个存放相同类型数据的存储空间 **\n"); printf(" 1:add 2:sub \n"); printf(" 3:mul 4:div \n"); printf(" 0:exit \n"); printf("*****

0基础菜鸟学前端之Vue.js

　　简介：0基础前端菜鸟，啃了将近半月前端VUE框架，对前端知识有了初步的了解。下面总结一下这段时间的学习心得。 文章结构 前端基础 Vue.js简介 Vue.js常用指令 Vue.js组件 Vue.js之vue-router插件 Vue.js实战 一、前端基础 　　前端发展历史和趋势 什么是前端？ >Web 2.0（动态网页，富交互，前端数据处理，前后端分离） 前端 MVC 框架 前端通过 Ajax 得到数据，因此也有了处理数据的需求。 React， Facebook开发的一个前端框架。 Vue.js是近几年一个很热门的前端MVVM框架。 webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50

前端-part3-基础css样式

1{ text-align: center; } .c3_2{ text-align: right; } .c3_3{ text-align: left; } /*text-align

我是一段居中的文字

我是一段居右的文字

我是一段居左的文字

前端入门3-CSS基础声明正文-CSS基础

dasu_Android（大苏）独家发布 声明 本系列文章内容全部梳理自以下四个来源： 《HTML5权威指南》 《JavaScript权威指南》 MDN web docs Github:smyhvae/web 作为一个前端小白 ，入门跟着这四个来源学习，感谢作者的分享，在其基础上，通过自己的理解，梳理出的知识点，或许有遗漏，或许有些理解是错误的，如有发现，欢迎指点下。 这些在第一篇前端入门1-基础概念中已经介绍过了，这里不就详细说了。 3.层叠算法 由于一个元素通常会被多个选择器命中，而这些选择器又有可能是通过不同方式作用到元素上，因此这里存在了两种场景下的优先级问题，但请记住，只有当作用到同一个元素上的样式属性起了冲突时才会存在优先级问题 比如，上面三个优先级的选择器中，1优先级的表示100，2优先级的表示10，3优先级的表示1，以此来计算一个组合选择器的数值大小。

：第十七章 - 优化 Vue CLI 3 构建的前端项目模板（1）- 基础项目模板介绍

一、前言 　　在上一章中，我们开始通过 Vue CLI 去搭建属于自己的前端 Vue 项目模板，就像我们 .NET 程序员在使用 asp.net core 时一样，我们更多的会在框架基础上按照自己的开发习惯进行调整 1、原始代码结构了解 1.1、webpack 的基础概念 　　因为很多这个系列的读者童鞋可能和我一样，就是传统意义上的后端开发，在之前完全没有接触过这种进行前端工程化的开发模式，所以这里我会针对项目的基础模板进行一个简单的说明 1.2、Vue 的单文件组件 　　当我们简单了解了项目的框架基础后，我们可以从一些之前我们没有接触过的文件去入手，去逐渐了解整个前端项目。 原来，因为 Vue CLI 3 的设计思想是 0 配置，所以通过 Vue CLI 3 构建的 Vue 项目已经帮开发者已经解决绝大部分情形下的 webpack 配置，如果你有需要做一些自定义的设置，则可以去创建一个 四、参考 　　1、从0到1搭建Element的后台框架 　　2、vue-cli3 项目从搭建优化到docker部署 　　3、一张图教你快速玩转vue-cli3 　　4、手摸手，带你用vue撸后台 系列四

《前端小白逆袭记：0 基础也能轻松学会》

随着互联网的快速发展，前端开发成为了一个备受关注的领域。对于零基础的学习者来说，可能会感到无从下手。但不必担心，本文将为你详细介绍 0 基础如何学习前端。 一、学习前端的基础知识 HTML（超文本标记语言）是网页的基础，它用于定义网页的结构。 CSS（层叠样式表）用于美化网页，实现各种样式效果。 书籍：系统地学习前端知识。 视频课程：直观地演示代码的编写和运行过程。 三、实践是关键 动手搭建简单的网页，将所学知识应用到实际中。 参与开源项目，提升实践能力。 五、构建项目 确定项目主题。 规划项目结构。 逐步实现功能。 六、加入社区 交流技术问题。 了解行业动态。 获取学习资源。 七、不断学习和提升 关注新的技术趋势。 深入学习框架和库。 学习前端需要耐心和坚持。通过逐步学习基础知识，不断实践，参与社区，你将逐渐掌握前端开发技能。开启你的前端之旅吧，相信你一定能够取得成功！

laravel 集成 vue3 的前端项目

现在大多项目都是前后端分离的，但是如果前后端都是一个人做，前后端来回切也挺不方便的。 好在 laravel 给我们提供了 Vite，下面我以一个纯前端的项目企业展示型小程序 - 管理员端 为例，介绍一下如何把 vue3 项目集成到 laravel 准备 创建一个laravel的项目 composer /resources/js', import.meta.url)) } }, }); 集成 Vue3 项目 web路由 vi routes/web.php Route::get( main.js']})]--}} @vite('resources/js/main.js') </head> <body>

21.多端项目上线部署（3）部署前端项目newpc

1.上传项目newpc 1.打包 在newpc目录下，将node_modules目录删除，然后将newpc项目打包为zip包 ?  2.上传newpc.zip到云服务器上 ? ?   3.解压newpc.zip unzip newpc ls ?   npm install cnpm -g --registry=HTTPS://registry.npm.taobao.org; cnpm -v 2.安装依赖包 cd newpc cnpm install 3. 项目打包 1.修改项目的host cd src/api/ ls vim api.js i#进入编辑模式，将host的127.0.0.1，修改为公网IP，然后点击【Esc】键，输入：wq，保存退出 2.打包项目 cd ../.. npm run build 4.安装Nginx 建立软链接 （在部署后端项目的时候已经安装过了） 5.修改nginx配置文件 cd /etc/nginx/sites-available

0基础Python最快的入门方法与实战项目!

0基础小白怎么学Python？这是老生常谈的问题了。也许你看了很多书还不知所云，也许你看了无数视频一脸懵逼。 学习Python的好方式是： 一，学完基础语法后，通过做项目来巩固自己所学的知识；只有当我们要去做项目的时候，才会真正去调动自己的思维，通过各种办法去实现自己的想法； 二，编程书、编程课程是学习的一个捷径 2 学完基础做什么项目？ 那么我们学完基础知识之后，可以尝试着做哪些方面的项目呢？ 其中，做数据爬虫项目是很好的巩固Python基础知识的方法。 一是数据爬虫项目不需要很长的代码，基本上100行以内的代码就可以实现。 二是富有逻辑性，可以锻炼代码思维。 学完基础知识之后大家可以去GitHub上面找些爬虫项目来实践练手。也可以跟着入门书籍上的项目进行练手，比如《Python入门：从0基础到实践》这本书。

介绍如何0基础做出单片机项目实物

一、前言 这篇文章主要介绍零基础 如何做出项目实物。 目前在CSDN博客、微信公众号、陆续分享了上千个完整项目案例。 在B站也同步分享了对应项目的功能展示讲解视频。 三、自己如何复刻项目？ 3.1 复刻概念 复刻的意思: 就是根据提供的资料，做出文档和视频里一样的单片机项目实物。 很多同学担心 自己没有编程基础、担心自己做不出来实物。 简单来说： 项目资料包里是提供了完整的项目源码、原理图、设计文档、有APP的也都提供的完整的APP源码，也有编译好的安装包。 大家复刻项目所做的事情就是3个步骤： 买模块、接线、下载代码。 --正常显示; //OLED清屏黑色 OLED_Clear(0); 这段代码展示了系统初始化部分的代码，主要完成了硬件的基础配置和必要外设的初始化，具体功能如下： （1）释放PA15引脚供按键使用 JTAG_Set （2）项目模板选择QT Widgets Application （3）设置项目名称和存放路径 注意：QT项目路径和名称不能出现中文字符。

【从0做项目】Java搜索引擎（3）

 文章导读 阿华将发布项目复盘系列的文章，旨在： 1：手把手细致带大家从0到1做一个完整的项目，保证每2~3行代码都有详细的注解 2：通过文字+画图的方式，对项目进行整个复盘，更好的理解以及优化项目 3 ：总结自己的优缺点，扎实java相关技术栈，增强文档编写能力 零：项目结果展示 简述：在我的搜索引擎网站，用户进行关键字搜索，就可以查询到与这个关键字相关的java在线文档，（包含标题，关键字附近的简述 doc_searcher_index/";//鲁棒性~序列化后索引文件放的地方 private ObjectMapper objectMapper = new ObjectMapper(); 3： （3）文件File类 这里new File(path)对象其实是指定路径，抽象出来的一种文件表示，我们在idea中可以通过它对操作系统中的文件进行操作，比如创建目录，检查路径是否存在，删除文件 //4 消耗时间为：" + (endFor - endEnumFile) + "ms"); //3：把在内存中构造好的索引数据结构，保存到指定的文件中 index.save()

Nuxt3 项目基础配置超详细 and 项目模板

配置构建工具 渲染模式 - 通用渲染（服务器端渲染和水化渲染） - 客户端渲染 - 完整的静态站点生成 - 混合渲染（每个路由的缓存策略） PS：虽然很便捷，但是很多坑 Nuxt基础配置模板地址 https://github.com/Seven7v/Nuxt3-vue3-project git clone https://github.com/Seven7v/Nuxt3-vue3-project.git 首先安装一个Nuxt项目 npx nuxi@latest init may-app // my-app你的项目名称 安装成功 就是我们的基本运行项目工作 cd my-app npm i npm run dev package.json 命令 生成的项目中，package.json中自动生成了几个命令 npm run build生成的是/.mjs文件，不是之前vue项目生成的静态文件，需要将生成的sever node服务来运行生成的文件 "postinstall": "nuxt prepare" }, Nutx的自动化 入口文件为app.vue pages 首先手动创建一个pages文件夹，用来存放项目页面

【前端开发】创建Vue3项目

步骤3：运行安装程序找到已下载的.msi文件，双击开始安装。安装向导启动后，按照提示进行操作：点击【Next】按钮继续安装。 your-project-name>...Done.根据自己需求选择yes or no通过一下步骤安装，启动服务器cd <your-project-name>npm installnpm run dev运行之后会显示如下界面说明创建项目成功 3.项目目录结构创建完项目之后会有一些文件被创建：.vscode vscode配置文件夹node__modules Vue项目的运行和依赖文件public资源文件.gitignoregit忽略文件index.htmlHTML

6本Python入门书籍推荐：0基础到项目实践

0基础入门Python有哪些好书？ Python简单易如门，但是具体怎么入门？第一步就是要找一本书籍先学一些基础知识，今天小编为大家推荐几本浅显易懂的基础入门书籍，希望对你有所帮助。 第一部分介绍了Python编程的基本概念，包括matplotlib、NumPy和Pygal等强大的Python库和工具介绍，以及列表、字典、if语句、类、文件与异常、代码测试等内容； 第二部分通过三个项目 3 《Python基础教程 第3版》，作者：[挪]Magnus Lie Hetland，译者：袁国忠 ? 这本书专门针对Python 3进行讲解，包括了Python程序设计的方方面面：从列表、元组等基础概念，到抽象、异常等相对高级的话题，再到将Python与数据库、网络、C语言等工具结合使用，Python程序的测试 最后，这本书按照实际项目开发的步骤向读者介绍了10个具有实际意义的Python项目的开发过程，供读者练习并体会代码功能。

从0到1搭建前端监控平台，面试必备的亮点项目

前言 常常会苦恼，平常做的项目很普通，没啥亮点；面试中也经常会被问到：做过哪些亮点项目吗？ 前端监控就是一个很有亮点的项目，各个大厂都有自己的内部实现，没有监控的项目好比是在裸奔 文章分成以下六部分来介绍： 自研监控平台解决了哪些痛点，实现了什么亮点功能？ 过多的长任务会造成页面丢帧、卡顿；过大的内存可能会造成低端机器的卡死、崩溃 4、统计资源缓存率，来判断项目的缓存策略是否合理，提升缓存率可以减少服务器压力，也可以提升页面的打开速度 设计思路 一个完整的前端监控平台包括三个部分 出现的页面是哪些，包括页面、对应的设备信息 Why，错误的原因是为什么，包括错误堆栈、⾏列、SourceMap、异常录屏 How，如何定位还原问题，如何异常报警，避免类似的错误发生 错误数据采集 错误信息是最基础也是最重要的数据 从基础的理论知识到实现一个可用的监控平台，收获还是挺多的 有兴趣的小伙伴可以结合git仓库的源码玩一玩，再结合本文一起阅读，帮助加深理解 后续 下一篇会继续讨论前端监控，讲解具体如何实现：定位源码、播放录屏等功能