Vue学习记录之一（介绍及脚手架的使用）

news2024/9/21 23:11:52

一、背景知识介绍

1、构建工具介绍

Vite, Webpack,Rollup, Parce

构建工具优点缺点
Vite- 快速启动，秒级热更新，更快的构建速度，更好的开发体验；
- 支持 Vue3 和 ES modules 的原生特性，轻松实现按需加载。
- 对于单页应用和小型项目的构建效率高
- 可以快速地启动开发服务器
- 能够快速实现 SSR
- 对于ESM的支持更加友好		- 对于大型项目构建效率不高
- 不支持IE11及以下浏览器
Webpack- 功能强大、可配置性高
- 支持各类资源的处理、打包和优化
- 支持热重载和模块热替换
- 社区支持广泛、插件丰富		- 学习成本较高，配置文件繁琐，构建速度慢；
- 初学者可能会遇到各种问题，需要不断深入学习和实践；
- 大型项目的构建成本可能较高。
- 初次构建时间长
- 构建速度较慢
Rollup- 构建速度快、效率高
- 生成的代码体积小
- 对代码进行静态分析和优化
- 支持Tree shaking等高级特性		- 对于需要动态加载的项目不太友好
- 配置较为复杂
- 处理HTML、CSS、图片等资源相对不太方便
Parce- 零配置、自动化高
- 开箱即用、易上手
- 支持多种资源的打包和优化
- 构建速度较快		- 对于一些高级需求不太友好
- 不支持Tree shaking
- 社区生态相对不够完善

2、包管理/依赖更新工具

  • npm, pnpm, yarn

  • npm: 安装Node.js 后就可以使用

  • pnpm: 即使没有Node.js，也可以直接安装pnpm,也可以使用npm安装，npm install -g pnpm

  • yarn: npm install -g yarn

3、框架的选择

脚手架（框架）:用于初始化，创建项目，选择性安装需要的插件，指定统一的风格，生成demo。

  • React是一个用于构建Web应用程序UI组件的JavaScript库，主要用于构建UI

  • Angular是一个由Google支持的基于TypeScript的JavaScript框架。这是一个非常受欢迎的前端开发框架。Angular是作为Angular 2或Angular发布的，它构成了AngularJS（框架的第一个版本）的重写。

  • Vue.js是讨论最多且发展最快的JavaScript框架之一

  • Vanilla 是一款以Openresty为基础的框架，它以简洁、高效的特性吸引了众多开发者的目光。Vanilla不仅仅是一个简单的工具集，更是一个完整的生态系统，提供了一系列组件，如Bootstrap、Router、Controllers、Models和Views，帮助开发者快速构建稳定且高性能的Web应用程序。

二、项目的部署

Vue2 的脚手架有一种：VueCli

Vue3 的脚手架有两种：VueCli + Vite

Vite: 是优化了rollup构建工具, VueCli 使用的Webpack构建工具。

推荐使用 Vue3 + Vite

# 1、构建项目
pnpm create vite@latest 项目名称 #npm create vite@latest 项目名称
# 2、选择大框架
    Vanilla
>   Vue
    React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Others
# 3、选择语言
    TypeScript
    JavaScript
>   Customize with create-vue ↗
    Nuxt ↗   #也是Vue的一个轻量级框架。可用来创建服务端渲染 (SSR) 应用，也可充当静态站点引擎生成静态站点应用。
#TypeScript 是 JavaScript 的超集，增加了静态类型检查。通过在代码中显式声明变量的类型，TypeScript 提供了更强的类型安全性，能在编译时捕获类型错误
# 4、    
√ 是否使用 TypeScript 语法？ ... 否 / 是
√ 是否启用 JSX 支持？ ... 否 / 是
√ 是否引入 Vue Router 进行单页面应用开发？ ... 否 / 是
√ 是否引入 Pinia 用于状态管理？ ... 否 / 是
√ 是否引入 Vitest 用于单元测试？ ... 否 / 是
√ 是否要引入一款端到端（End to End）测试工具？ » 不需要
√ 是否引入 ESLint 用于代码质量检测？ ... 否 / 是
√ 是否引入 Vue DevTools 7 扩展用于调试? (试验阶段) ... 否 / 是
正在初始化项目 C:\Users\Administrator\Desktop\dk-ruoyi\demo3...

项目初始化完成，可执行以下命令：

  cd demo3
  pnpm install
  pnpm dev

在这里插入图片描述
目录介绍

project-name
│
├── public                  # 静态资源
│   ├── index.html          # HTML 模板
│   └── favicon.ico         # Favicon
│
├── src
│   ├── assets              # 资源文件
│   ├── components          # 组件
│   ├── router              # 路由
│   ├── views               # 页面
│   ├── store               # 状态管理
│   ├── styles              # CSS/SCSS/SASS/LESS 样式
│   ├── utils               # 工具函数
│   ├── directives          # 自定义指令
│   ├── mixins              # 混入
│   ├── types               # TypeScript 类型定义
│   ├── App.vue             # 主组件
│   ├── main.ts             # 入口文件
│   └── vite-env.d.ts       # Vite 类型定义
│
├── tests                   # 单元测试
│   └── *.test.ts           # 测试文件
│
├── .env                    # 环境变量
├── .eslintrc.js            # ESLint 配置
├── .gitignore              # Git 忽略文件
├── index.html              # 入口 HTML
├── package.json            # 依赖配置
├── tsconfig.json           # TypeScript 配置
├── vite.config.ts          # Vite 配置
└── yarn.lock               # 依赖锁文件（如果使用 yarn）

如果上面没有选择路由，也可以单独安装

pnpm install vue-router@4

然后在src中建立router文件夹，文件夹中建立index.ts文件。内容如下：

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',name: 'home',component: HomeView
    },
    {
      path: '/about', name: 'about', component: () => import('../views/AboutView.vue')
    }
  ]
})

export default router

然后在main.ts中加入

import router from './router'

在app.vue中加入 ：

三、安装EelementUI及使用

1、安装

在package.json中同时存在dependencies 和 devDependencies。

dependencies中的模块将在生产环境中使用，而devDependencies中的模块仅在开发过程中使用

npm install <module> --save       #或yarn add <module>或  pnpm install <modulue>模块将被添加到dependencies。
npm install <module> --save-dev   #yarn add <module> --dev，模块将被添加到devDependencies
pnpm install element-plus

2、引入

1、全部引入
// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'  //新增
import 'element-plus/dist/index.css'    //新增
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)                    //新增
app.mount('#app')
2、按需引入

需要安装2个插件, 如果是使用pnpm构建的项目，则在项目中不可以npm, 均由pnpm代替。

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

然后在vite.config.ts中添加配置

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import AutoImport from 'unplugin-auto-import/vite'     //新增1
import Components from 'unplugin-vue-components/vite'  //新增2
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'  //新增3

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    AutoImport({  //新增4
      resolvers: [ElementPlusResolver()],
    }),
    Components({  //新增5
      resolvers: [ElementPlusResolver()],
    }),
  ],
  // 可以修改主机地址端口号等
  server:{
    host: "127.0.0.1",
    port: 3001
    open: true   //自动打开浏览器
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

然后在页面中直接使用样式即可。有时候会出现错误提示，可以修改tsconfig.json的include项中添加“* * / *.d.ts”, 中间没有空格，这里的空格是防止typora。

3、Icon图标的安装

Element Plus中如果想使用Icon图标，不能直接使用，需要单独安装才能用。

pnpm install @element-plus/icons-vue

如果使用PyCharm中terminal中安装，先使用ctrl+c 退出。

全局注册, 在main.ts

import './assets/main.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'   //新增
const app = createApp(App)
//新增for语句
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
app.use(createPinia())
app.use(router)
app.mount('#app')

然后在页面中直接使用即可。
最后在工具中启动运行
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

项目实现：云备份②（文件操作、Json等工具类的实现）

项目实现：云备份②（文件操作、Json等工具类的实现）

云备份 前言文件操作实用工具类设计文件属性的获取文件的读写操作文件压缩与解压缩的实现文件目录操作 Json 实用工具类设计编译优化 前言 如果有老铁不知道当前项目实现的功能是什么的话&#xff0c;可以先移步这篇文章内容&#xff1a; 云备份项目的介绍 其中介绍了云备份项…
阅读更多...
【吊打面试官系列-MySQL面试题】简述在 MySQL 数据库中 MyISAM 和 InnoDB 的区别？

【吊打面试官系列-MySQL面试题】简述在 MySQL 数据库中 MyISAM 和 InnoDB 的区别？

大家好&#xff0c;我是锋哥。今天分享关于【简述在 MySQL 数据库中 MyISAM 和 InnoDB 的区别&#xff1f;】面试题&#xff0c;希望对大家有帮助&#xff1b; 简述在 MySQL 数据库中 MyISAM 和 InnoDB 的区别&#xff1f; MyISAM&#xff1a; 不支持事务&#xff0c;但是每次查…
阅读更多...
跳出大厂圈子——普通程序员如何开启逆袭之路

跳出大厂圈子——普通程序员如何开启逆袭之路

时间&#xff1a;2024年09月16日 作者&#xff1a;小蒋聊技术 邮箱&#xff1a;wei_wei10163.com 微信&#xff1a;wei_wei10 音频&#xff1a;喜马拉雅 大家好&#xff0c;欢迎来到“小蒋聊技术”&#xff01;今天咱们聊点特别现实的事儿——普通程序员的出路。互联网时代…
阅读更多...
化学实验室器具识别系统源码分享

化学实验室器具识别系统源码分享

化学实验室器具识别检测系统源码分享 [一条龙教学YOLOV8标注好的数据集一键训练_70全套改进创新点发刊_Web前端展示] 1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 项目来源AACV Association for the Advancement of Comput…
阅读更多...
android设置实现广告倒计时功能

android设置实现广告倒计时功能

文章目录 CountDownTimer基本使用增加基础BaseActivity增加固定活动 在Android中&#xff0c;CountDownTimer 是一个用于计时的类&#xff0c;它允许你在指定的时间段内执行某些操作。通常用于倒计时功能&#xff0c;例如显示一个倒计时进度条或者在倒计时结束后执行某个动作。…
阅读更多...
采用qt做一个命令行终端

采用qt做一个命令行终端

qt做一个类似系统命令行终端的工具&#xff0c;方便集成到自己的软件里使用&#xff0c;这样能保证软件的整体性&#xff0c;而且是真正的做到和系统命令行终端一样的交互方式&#xff0c;而不是单独搞个编辑框的方式输入命令&#xff08;大部分博客都是做成这个样子&#xff0…
阅读更多...
不善言辞的程序员适合做项目经理吗？

不善言辞的程序员适合做项目经理吗？

项目经理的角色需要承担多重任务&#xff0c;包括团队协调、资源调配、风险管理、沟通与汇报等。因此&#xff0c;很多人认为项目经理需要较强的沟通能力和外向性格。然而&#xff0c;不善言辞的程序员是否适合这一职位&#xff0c;实际上取决于多个因素。以下从不同角度进行分…
阅读更多...
程序设计题（25-32）

程序设计题（25-32）

第二十五题 题目 请编写函数fun&#xff0c;其功能是:在一个含有11个四位数的数组中&#xff0c;统计出这些数的奇数、偶数个数&#xff0c;然后计算出个数多的那些数的算数平均值并由函数返回&#xff0c;个数通过yy传回。 例如&#xff0c;若11个数据为:1101, 1202, 1303,…
阅读更多...
AI+RPA 实战揭秘：DrissionPage 助力 CSDN 热榜数据抓取与 AI 结合

AI+RPA 实战揭秘：DrissionPage 助力 CSDN 热榜数据抓取与 AI 结合

在前一篇文章《AIRPA&#xff1a;开启智能自动化新时代》 发布之后&#xff0c;今天我们将以实战的方式深入介绍数据分析中的RPA究竟是怎样抓取数据的&#xff0c;以及它与 AI 又是如何紧密结合的。首先&#xff0c;让我们来认识一个重要的工具包 ——DrissionPage。 一、Dris…
阅读更多...
【例题】lanqiao301 实现基数排序

【例题】lanqiao301 实现基数排序

输入输出样例 输入 6 7 1 4 8 5 2输出 1 2 4 5 7 8解题思路 翻译&#xff1a;就是从个位到十位、……比较大小。 代码 nint(input()) alist(map(int,input().split())) a.sort() print( .join(map(str,a)))
阅读更多...
Linux: network: delay and burst

Linux: network: delay and burst

最近遇到一个false-network的问题&#xff0c;抓到的网络包的特征是&#xff0c;有十几秒的延迟&#xff0c;然后来了一个burst。这个现象说明这个包肯定是缓存在了一个地方&#xff0c;但是具体是什么地方&#xff0c;就需要抓包确定。 这次的缓存的地方是虚拟机内部。由于一…
阅读更多...
【刷题】Day5--数字在升序数组中出现的次数

【刷题】Day5--数字在升序数组中出现的次数

Hi! 今日份刷题~ 数字在升序数组中出现的次数_牛客题霸_牛客网 我感觉题目简单&#xff0c;我的解答也很简单&#xff0c;二分法遗忘&#xff0c;有时间复习一下尝试新的解法。 /*** 代码中的类名、方法名、参数名已经指定&#xff0c;请勿修改&#xff0c;直接返回方法规定的…
阅读更多...
轻松上手Cursor，体验丝滑编程

轻松上手Cursor，体验丝滑编程

最近Cursor大火。 作为一名程序员&#xff0c;理应接触接触&#xff0c;了解了解。 好吧&#xff01;这一了解&#xff0c;我直接用Cursor替换了用了好几年的vscode了。 下面我把体验Cursor的过程总结了一下。你看看。 Cursor是啥 Cursor是一款革命性的AI驱动代码编辑器&a…
阅读更多...
rocky Linux 9.4系统配置zabbix监控MySQL主从复制状态与配置钉钉告警

rocky Linux 9.4系统配置zabbix监控MySQL主从复制状态与配置钉钉告警

MySQL主从复制原理&#xff1a; 1. 主从复制的基本概念 主服务器&#xff08;Master&#xff09;&#xff1a;负责处理所有的写操作&#xff08;INSERT、UPDATE、DELETE&#xff09;&#xff0c;并将这些操作记录到二进制日志&#xff08;binary log&#xff09;中。 从服务器…
阅读更多...
深度揭秘：日志打印的艺术与实战技巧，让你的代码会说话！

深度揭秘：日志打印的艺术与实战技巧，让你的代码会说话！

&#x1f351;个人主页&#xff1a;Jupiter. &#x1f680; 所属专栏&#xff1a;Linux从入门到进阶 欢迎大家点赞收藏评论&#x1f60a; 目录 &#x1f341;日志&#x1f342;日志分模块实现讲解&#x1f343;日志等级的实现&#x1f965;日志时间*时间的获取* &#x1f308;文…
阅读更多...
Nginx搭建直播服务器，并用rtmp，http-flv,hls三种模式拉流观看直播的流程

Nginx搭建直播服务器，并用rtmp，http-flv,hls三种模式拉流观看直播的流程

一、首先搭建直播服务器 环境widows&#xff0c;并且已经集成了 &#xff1a;nginx-http-flv-module模块 nginx.conf配置如下&#xff1a; worker_processes 1;#error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; #error…
阅读更多...
Vue3中集成高德地图并实现平移缩放功能

Vue3中集成高德地图并实现平移缩放功能

大家好&#xff0c;随着前端技术的不断发展&#xff0c;地图应用在我们的项目中越来越常见。本文将介绍如何在Vue3项目中集成高德地图&#xff0c;并通过简单的配置实现地图的平移和缩放功能。 实现步骤 1、申请高德地图密钥&#xff08;Key&#xff09;&#xff08;已有key可…
阅读更多...
Git使用详解：从安装到精通

Git使用详解：从安装到精通

前言 什么是Git Git是一个分布式版本控制工具&#xff0c;主要用于管理开发过程中的源代码文件&#xff08;Java类、xml文件、html页面等&#xff09;&#xff0c;在软件开发过程中被广泛使用。 可以理解&#xff1a; git是一个管理源代码的工具&#xff0c;主要用于企业团队开…
阅读更多...
openwrt wsdd模块介绍

openwrt wsdd模块介绍

wsdd简介 wsdd是一个实现Web服务发现主机守护进程的工具。这使得&#xff08;如Samba&#xff09;主机&#xff0c;像你的本地网络存储设备&#xff0c;能够被Windows这样的Web服务发现客户端找到。 目的 由于Windows不再支持NetBIOS发现&#xff0c;wsdd使用Web服务发现方法使…
阅读更多...
密码学---easy_hash

密码学---easy_hash

题目出处&#xff1a;首页 - Bugku CTF ✨打开题目有两个文件 ✨打开flag.py后开始分析所给的代码 import hashlib # 导入 hashlib 模块&#xff0c;用于计算哈希值 from multiprocessing import Pool # 从 multiprocessing 模块导入 Pool 类&#xff0c;用于多进程处理d…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023