前端学习之路-项目实战(1)

每日吐槽:有一个奇怪的问题,怎么一眼看出一个求职者是否是培训班出来的,有的求职上写着,希望大家坦诚一点,but,你这艘诚实的泰坦尼克号终究还是撞上了社会阴暗面的冰山,OMG,不让包装简历,他还不要无经验,那不上班经验从哪里来啊,梦里来嘛?真的是靠北了;


用vite创建项目

1,在cmd或者VS Code终端中输入命令

npm init vite@latest

第一次使用vite的话会提示:需要安装以下软件包 create-vite@latest,输入y同意

同意之后等待安装,完成后根据提示填入项目名称,项目类型,是否使用TS

2,项目文件夹现在就创建好了,接下来根据跳出的命令,项目就可以运行起来了

cd XXX(项目文件夹)
npm install 或者yarn install
npm run dev

点击弹出的链接就可以在浏览器看到用vite创建的项目了 

项目文件结构

project-name/

├── public/
│   ├── index.html   # 主页模板
│   └── favicon.ico  # Favicon图标

├── src/
│   ├── assets/      # 资源目录,用于存放静态资源
│   ├── components/  # 组件目录,存放小的UI组件
│   ├── views/       # 视图组件,存放页面级组件
│   ├── store/       # 状态管理目录(如果使用Vuex)
│   ├── styles/      # 样式或CSS目录,可以是SASS/LESS/Stylus等
│   ├── types/       # TypeScript类型定义
│   ├── utils/       # 工具函数目录
│   ├── router/      # 路由配置目录
│   └── App.vue      # 应用根组件
│   └── main.ts      # 入口文件,加载根实例组件及配置

├── tests/          # 单元测试目录(如果使用单元测试)

├── .env            # 环境变量配置文件
├── .eslintrc.js    # ESLint配置文件
├── .gitignore      # Git忽略文件列表
├── babel.config.js # Babel配置文件
├── package.json    # 项目依赖和配置文件
├── README.md       # 项目说明文件
├── tsconfig.json   # TypeScript配置文件(如果使用TypeScript)
└── vue.config.js   # Vue CLI配置文件

这是一个简单的项目结构示例,但您可以根据项目的规模和需求进行定制和调整。下面是对各个文件夹和文件的简要说明:

public 文件夹包含了应用程序的入口HTML文件,以及其他不需要经过编译的静态文件。

src 文件夹是项目的主要源码目录。您可以将各个功能模块的代码组织在不同的文件夹中,如 assets 用于存放静态资源文件、components 用于存放全局和局部组件、views 用于存放页面视图组件、router 用于存放路由配置、store 用于存放Vuex状态管理的相关文件、services 用于存放网络请求相关的服务文件、utils 用于存放工具函数等。App.vue 是根组件,main.js 是应用程序的入口文件。

tests 文件夹用于存放测试文件,您可以使用不同的测试框架编写单元测试或端到端测试。

.gitignore 是Git版本控制系统的忽略文件配置,用于指定哪些文件和文件夹不需要纳入版本控制。

babel.config.js 是Babel的配置文件,用于配置Babel的编译规则和插件。

package.json 是项目的配置文件,包含了项目的元数据、依赖项和脚本等信息。

README.md 是项目的说明文件,通常包含项目的介绍、安装和运行说明以及其他相关信息

参考文章:文章链接

文件初始化和新建文件

文件初始化

根据提示命令运行项目后。回到VS Code中,Ctrl+C停止终端,根据自己的需求把项目初始化。删除无用的页面。

app.vue 页面初始化

<script setup></script><template><router-view/>
</template><style scoped></style>

main.js初始化

import { createApp } from 'vue'
import App from './App.vue'const app = createApp(App)app.use(router)
app.mount('#app')

删除components中的欢迎页面,asset中的图片

引入element-plus和vue-router

element-plus官方文档

一,打开element官方 文档,根据文档提示,下载所需的依赖,引入文件

1,在终端输入命令下载依赖

npm install element-plus --save

2,根据官方提示下载插件,按需引入

npm install -D unplugin-vue-components unplugin-auto-import

3,配置按需引入

根据官方文件提示在vite.config.js中配置

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'// https://vitejs.dev/config/
export default defineConfig({plugins: [....,AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],
})

二,下载vue-router

1,在终端中输入命令下载router

npm install -S vue-router

2,配置文件,在src下新建router文件,在文件中新建index.js,在配置路由页面的同时新建view文件

src/router/index.js


import {createRouter,createWebHashHistory} from "vue-router"const routes = [{path:'/',component:()=>import('../views/Main.vue'),children:[{path:'/',name:'home',component:() => import('../views/home/home.vue')}]}
]const router = createRouter({history:createWebHashHistory(),routes
})export default router

3,在main.js中引入路由并使用

//引入
import router from "./router"//使用
app.use(router)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/305455.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PDF文件内容可以转成word版本吗?答案是肯定的 PDF转word的方法

一&#xff0c;PDF转Word的必要性 随着信息技术的飞速发展&#xff0c;文档的格式和转换成为了我们日常生活和工作中不可避免的一部分。其中&#xff0c;PDF转Word的需求尤为突出。PDF作为一种跨平台的文档格式&#xff0c;具有阅读效果好、不易被篡改等优点&#xff0c;但在编…

【阿里淘天笔试题汇总】2024-04-10-阿里淘天春招笔试题-三语言题解(CPP/Python/Java)

&#x1f36d; 大家好这里是KK爱Coding &#xff0c;一枚热爱算法的程序员 ✨ 本系列打算持续跟新淘天近期的春秋招笔试题汇总&#xff5e; &#x1f4bb; ACM银牌&#x1f948;| 多次AK大厂笔试 &#xff5c; 编程一对一辅导 &#x1f44f; 感谢大家的订阅➕ 和 喜欢&#x1f…

Flutter学习11 - Future 与 FutureBuilder

1、Future 可以利用 Future 实现异步调用 1.1、Future 的两种形式 自定义一个结果类 class Response {String _data;Response(this._data); }自定义方法实现 Future Future<Response> testFuture() {var random Random();int randomNumber random.nextInt(10);if …

【STM32G431RBTx】备战蓝桥杯嵌入式→省赛试题→第十四届

文章目录 前言一、题目二、模块初始化三、代码实现interrupt.h:interrupt.c:main.h:main.c: 四、完成效果五、总结 前言 无 一、题目 二、模块初始化 1.LCD这里不用配置&#xff0c;直接使用提供的资源包就行 2.KEY, 四个按键IO口都要配置&#xff0c;分别是PB0, PB1,PB2,PA…

albef论文学习

首先要知道vit是啥东西。vit就是transformer模型在图像领域的运用。 transformer模型原本是用于自然语言的&#xff0c;encoder和decoder接受的都是文字。vit把图像分割成很多个小块&#xff0c;把各个小块拉长当成向量来用&#xff0c;接下来就是一样的。最后接一个全连接层做…

Qt | Qt 的重要文件简介(推荐)

一、项目文件(pro 文件)及其语法 1、项目文件(pro 文件)的作用是列举项目中的源文件, 2、pro 文件的语法形式为:“变量 操作符 值”,比如 QT += widgets,多个值之间使用空格分开。 3、pro 文件的注释:从“#”开始,直至本行结束。 4、pro 文件的操作符见下表 5、pro 文…

RAG应用开发实战(01)-RAG应用框架和解析器

1 开源解析和拆分文档 第三方的工具去对文件解析拆分&#xff0c;去将我们的文件内容给提取出来&#xff0c;并将我们的文档内容去拆分成一个小的chunk。常见的PDF word mark down, JSON、HTML。都可以有很好的一些模块去把这些文件去进行一个东西去提取。 优势 支持丰富的文…

Spring Boot 框架集成Knife4j

本次示例使用 Spring Boot 作为脚手架来快速集成 Knife4j,Spring Boot 版本2.3.5.RELEASE,Knife4j 版本2.0.7&#xff0c;完整代码可以去参考 knife4j-spring-boot-fast-demo pom.xml 完整文件代码如下 <?xml version"1.0" encoding"UTF-8"?> &l…

Meta宣布全新训推一体加速器:完全集成PyTorch 2,性能3倍提升

ChatGPT狂飙160天&#xff0c;世界已经不是之前的样子。 新建了免费的人工智能中文站https://ai.weoknow.com 新建了收费的人工智能中文站https://ai.hzytsoft.cn/ 更多资源欢迎关注 Meta 疯狂砸入数十亿美元&#xff0c;一部分招揽人才&#xff0c;一部分造芯片。 Meta 正在不…

HCIE考试第三题:业务容器化及割接

文章目录 业务容器化及割接题目和做题步骤如下3.1业务容器化及割接3.1创建CCE集群solo3.2创建NAT网关3.2.1申请EIP3.2.2创建NAT网关3.2.3添加SNAT规则3.3创建节点池3.3.1 创建namespace3.3.2创建节点池3.4 安装命令行工具kubectl3.4.1上传kubectl3.4.2上传kubeconfig配置文件3.…

批归一化(BN)在神经网络中的作用与原理

文章目录 1. 批归一化&#xff08;BN&#xff09;在神经网络中的作用与原理1.1 作用与优势1.2 原理与推导 2. 将BN应用于神经网络的方法2.1 训练时的BN 2. 将BN应用于神经网络的方法2.1 训练时的BN2.2 测试时的BN代码示例&#xff08;Python&#xff09;&#xff1a; 3. BN的优…

做微信商城需要注意的几点问题

在社交平台做电商&#xff0c;已经非常常见&#xff0c;其中&#xff0c;最受欢迎的莫过于微信商城&#xff0c;基于微信公众号开发&#xff0c;进行宣传及变现&#xff0c;与用户建立长期双向联系&#xff0c;让用户形成长期稳定的购物习惯。看起来&#xff0c;这是一个很不错…

C++算法 —— 位运算

一、基本的位运算操作 1.基础位运算操作符 << : 二进制位整体左移 >> : 二进制位整体右移 ~ : 按位取反 & &#xff1a; 按位与 | &#xff1a; 按位或 ^ : 按位异或 &#xff08;无进位相加&#xff09; 2.给一个数n&#xff0c;确定它的二进制表示中第…

基于昇思的大地电磁智能反演模型达到业界SOTA,助力地球物理勘探加速智能化

近日&#xff0c;华为AI4S Lab与清华大学李懋坤教授团队、华为先进计算与存储实验室合作&#xff0c;基于昇腾AI处理器与昇思MindSpore AI框架打造了大地电磁智能反演模型。该模型通过变分自编码器&#xff08;VAE&#xff09;灵活嵌入了多物理先验知识&#xff0c;达到了业界S…

三次 Bspline(B样条曲线) NURBS曲线的绘制 matlab

先来了解几个概念&#xff1a; 1.1 节点向量&#xff1a; B-Spline需要定义曲线的节点向量U&#xff0c;它可以对应到Bezier曲线的参数u。 其元素个数 (m1) 和曲线阶数 k 、控制点个数n满足&#xff1a;m1k1n1 如果U的每段的距离是相等&#xff0c;那么这个B-Spline就被称为均…

多级菜单Mysql数据库表设计与创建

1.还是以Vue实现学院官网为例 文章地址&#xff1a;http://t.csdnimg.cn/jrJhE Vue 实现学院官网“菜单”当时是使用静态数据&#xff0c;也就是在页面上写死了的。 今天我们需要将“菜单”数据在数据库中进行维护&#xff0c;我们使用的是Mysql数据库 2.数据库的设计 我们的…

文心一言 VS 讯飞星火 VS chatgpt (234)-- 算法导论17.2 2题

二、用核算法重做练习17.1-3。练习17.1-3的内容是&#xff1a;假定我们对一个数据结构执行一个由 n 个操作组成的操作序列&#xff0c;当 i 严格为 2 的幂时第 i 个操作的代价为 i &#xff0c;否则代价为1。使用聚合分析确定每个操作的摊还代价。 文心一言&#xff1a; 练习…

Vue的学习之旅-part4

Vue的学习之旅-part1 vue的自带指令v-if v-else-if v-else虚拟DOM的复用v-show 与 v-if 的不同之处&#xff1a;v-if v-show各自合适的使用位置&#xff1a; v-for 循环v-for 循环遍历 :key"item" 绑定key&#xff0c;区分循环的内容循环的应用&#xff1a; 前几篇博…

基于SpringBoot+Vue的公园管理系统(源码+文档+部署+讲解)

一.系统概述 近年来&#xff0c;科技飞速发展&#xff0c;在经济全球化的背景之下&#xff0c;互联网技术将进一步提高社会综合发展的效率和速度&#xff0c;互联网技术也会涉及到各个领域&#xff0c;而公园管理系统在网络背景下有着无法忽视的作用。信息管理系统的开发是一个…

React + three.js 3D模型骨骼绑定

系列文章目录 React 使用 three.js 加载 gltf 3D模型 | three.js 入门React three.js 3D模型骨骼绑定React three.js 3D模型面部表情控制 项目代码(github)&#xff1a;https://github.com/couchette/simple-react-three-skeleton-demo 项目代码(gitcode)&#xff1a;https:…