使用 Vue 官方脚手架初始化 Vue3 项目

Vite 官网:https://cn.vitejs.dev/

Vue 官网:https://vuejs.org/

Vue 官方文档:https://cn.vuejs.org/guide/introduction.html

Element Plus 官网:https://element-plus.org/

Tailwind CSS 官网:https://tailwindcss.com/

安装 Node 环境

首先,确保已经安装了 Node.js,可以在命令行中运行 node -vnpm -v 来检查它们是否已经正确安装:

image-20231210121140490

安装 Node.js 通常会自动附带安装 npm,所以你不需要单独安装 npm。只需确保 Node.js 版本符合要求即可。

切换 NPM 镜像源

使用 nrm 来管理 npm 镜像源可以帮助加速 npm 包的下载速度。

  1. 执行命令通过 npm 全局安装 nrm

    npm install -g nrm
    
  2. 使用 nrm ls 命令列出当前可用的镜像源,以及它们的地址和当前使用的镜像源:

    nrm ls
    
  3. 使用 nrm use 命令来切换想要使用的镜像源,例如,切换到淘宝镜像源:

    nrm use taobao
    
  4. 使用以下命令来验证切换是否成功:

    npm config get registry
    

安装 Pnpm 包管理工具

  1. 在命令行中执行以下命令全局安装 pnpm:

    npm install -g pnpm
    
  2. 安装完成后,可以使用 pnpm 来代替 npm 进行包管理。例如,使用以下命令来安装项目依赖:

    pnpm install
    

    这将使用 pnpm 来安装项目所需的包,而不是使用默认的 npm。

使用 Vue 官方脚手架初始化项目

  1. 切换到打算创建项目的目录,输入 cmd 打开命令行,之后在命令行中运行以下命令:

    pnpm create vue@latest
    
  2. 运行命令后使用方向键和回车键选择【否/是】开启或关闭某个功能:

    test

  3. 创建完项目之后,在命令行中继续输入以下命令运行项目:

    cd <your-project-name>
    pnpm i
    pnpm run dev --open
    

    test-1

认识 Vue 项目目录结构

Vue 3 项目的典型目录结构如下:

project-name/
├── public/                # 静态资源目录
│   └── favicon.ico        # 网站图标
├── src/                   # 源代码目录
│   ├── assets/            # 资源文件目录(图片、样式等)
│   ├── components/        # 组件目录
│   │   └── HelloWorld.vue # 示例组件
│   ├── router/            # 路由配置目录
│   │   └── index.ts       # 路由配置文件
│   ├── store/             # 状态管理目录
│   │   └── index.ts       # 状态管理配置文件(Pinia)
│   ├── views/             # 视图目录
│   │   └── Home.vue       # 示例视图组件
│   ├── App.vue            # 根组件
│   └── main.ts            # 项目入口文件(使用 TypeScript)
├── .eslintrc.js           # ESLint 配置文件
├── .gitignore             # Git 忽略文件配置
├── .prettierrc.json       # Prettier 配置文件
├── env.d.ts       		   # 声明文件,用于声明全局环境变量的类型
├── index.html       	   # 入口 HTML 文件
├── package.json           # 项目配置文件
├── README.md              # 项目说明文件
├── tsconfig.json          # TypeScript 配置文件
└── vite.config.js         # Vite 配置文件

安装 Element Plus

Element Plus 官网:https://element-plus.org/

  1. 使用包管理器 pnpm 安装 Element Plus:

    pnpm install element-plus
    
  2. main.ts 文件中引入 Element Plus:

    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')
    
  3. tsconfig.json 中通过 compilerOptions.type 指定全局组件类型:

    {"compilerOptions": {// ..."types": ["element-plus/global"]}
    }
    
  4. App.vue 中添加 Element Plus 按钮组件:

    <template><div class="mb-4"><el-button>Default</el-button><el-button type="primary">Primary</el-button><el-button type="success">Success</el-button><el-button type="info">Info</el-button><el-button type="warning">Warning</el-button><el-button type="danger">Danger</el-button></div>
    </template>
    
  5. 执行命令启动项目:

    pnpm run dev
    

    image-20240609193421586

安装 Tailwind CSS

  1. 打开 Tailwind CSS 官网【https://tailwindcss.com/】,点击【Docs】查看文档:

    image-20240609113814168

  2. 点击【Framework Guides】查看框架指南,我们的项目是使用 Vite 构建,所以点击【Vite】:

    image-20240609114049866

  3. 点击【Using Vue】查看安装步骤:

    image-20240609115121127

  4. 执行命令安装 Tailwind CSS:

    pnpm i -D tailwindcss postcss autoprefixer
    

    image-20240609115408956

  5. 运行命令生成 Tailwind CSS 配置文件:tailwind.config.js``postcss.config.js

    npx tailwindcss init -p
    

    image-20240609115511670

  6. tailwind.config.js配置文件中添加模板文件路径:

    content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}']
    
  7. 创建src\assets\styles\tailwind.scss文件, 添加 Tailwind CSS 提供的用于导入基础样式、组件和实用工具的特殊指令:

    @tailwind base;
    @tailwind components;
    @tailwind utilities;
    
  8. 在项目中使用 Tailwind.css 设置内容样式:

    <template><h1 class="text-3xl font-bold underline">Hello world!</h1>
    </template>
    
  9. 执行命令启动项目:

    pnpm run dev
    

    image-20240609190157155

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

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

相关文章

LocalDate和Date有什么区别?两者如何转换?

LocalDate与Date 在Java中&#xff0c;LocalDate和Date是用来处理日期的两种不同的类。 区别&#xff1a; Date是Java早期的日期类&#xff0c;它包含了日期和时间的信息。但是在Java 8之后&#xff0c;Date类被标记为过时的&#xff0c;推荐使用新的日期时间API&#xff0c;…

Codeforces Round 951 (Div. 2)C. Earning on Bets

Problem - C - Codeforces 合理的答案&#xff1a; 求出 k1 ~ kn 的最小公倍数lcm&#xff0c;如果 lcm/k1 lcm/k2 ... lcm/kn < lcm 即符合题意。 左边之和为我们付的总钱数&#xff0c;右边才是每次选择得到的钱数(都为lcm)。 直接拿1e9检查是否可以分即可&#xff…

基于Django+MySQL的智慧校园系统

此项目基于Django MySQL HTML CSS JS jQuery bootstrap实现的功能有 学生管理部门管理代办清单管理校园论坛校园医疗服务校园看点校园生活助手常用功能入口 1. 一些注意点 1. 页面body会自动有一些边界距&#xff0c;处理方法&#xff1a; <head><style>b…

你还在纠结U盘怎么选吗?小白带你来看

前言 2024年的618活动已经开始了&#xff0c;这个活动买电子产品着实是比其他时间要便宜很多。 前几天小白的一个好朋友问我&#xff1a;U盘该怎么选&#xff1f; 呃&#xff0c;本来是想写“老朋友”的&#xff0c;结果她愣是要我改成“好朋友”。 行吧&#xff0c;那就好朋…

kmp算法c++

kmp算法通过next数组使查找失败时减少跳转后比较的次数来优化字符串查找&#xff0c;next数组存储了前缀和后缀相同的位置信息&#xff0c;类似动规&#xff0c;可以存储查找数组的信息来防止重复查找&#xff0c;最终复杂度可以达到O&#xff08;nm&#xff09;。 以t“abcab…

车载电子电气架构 --- 车载信息安全

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 屏蔽力是信息过载时代一个人的特殊竞争力,任何消耗你的人和事,多看一眼都是你的不对。非必要不费力证明自己,无利益不试图说服别人,是精神上的节…

Vite - 开发初体验,以及按需导入配置

目录 开始 创建一个 Vite 项目 项目结构 /src/main.js index.html package.json vite.config.js Vite 项目中使用 vue-router Vite 组件的“按需引入” 传统的方式引入一个组件 传统方式引入带来的问题 解决办法&#xff08;配置 按需引入 插件&#xff09; 示例&…

嵌入式学习——Linux高级编程复习(线程)——day40

1. 线程 1.1 定义 线程是一个轻量级的进程 是一个任务被创建、调度、消亡的过程 1.2 线程和进程的区别与联系 1. 线程是CPU任务调度的最小单元 2. 进程是操作系统资源分配的最小单元 3. 线程&#xff08;Thread&#xff09;是操作系统能够进行运算调度的最小单位…

OpenFeign远程接口调用使用公共模块出现的错误

今天在使用openfeign和sentinel实现fallback服务降级时遇到找不到类型的异常 检查代码发现没有错误&#xff0c;EnableFeignClients也在启动类上标注了 错误信息&#xff1a;A component required a bean of type com.zxc.cloud.apis.PayFeignSentinelApi that could not be f…

《精通ChatGPT:从入门到大师的Prompt指南》第9章:实战练习

第9章&#xff1a;实战练习 9.1 Prompt练习题 在本节中&#xff0c;我们将提供一系列练习题&#xff0c;旨在帮助读者通过实际操作提升使用ChatGPT的能力。这些练习题涵盖了从基础到高级的不同难度级别&#xff0c;并针对各种应用场景设计&#xff0c;确保读者能够在实际使用…

基于Springboot + vue实现的火锅店管理系统

作者主页&#xff1a;Java码库 主营内容&#xff1a;SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app等设计与开发。 收藏点赞不迷路 关注作者有好处 文末获取源码 技术选型 【后端】&#xff1a;Java 【框架】&#xff1a;spring…

私有云和多云管理平台 | Cloudpods v3.11.4 正式发布

本次 3.11.4 更新亮点为&#xff1a;系统镜像引入社区镜像&#xff0c;用户可以一键导入各主流开源操作系统镜像&#xff0c;方便用户上手使用。持续迭代共享 LVM&#xff0c;支持快照&#xff0c;主备机等特性&#xff0c;修复迁移删除镜像缓存等 BUG。 功能优化 【费用】费…

【调度算法】Boltzmann选择

Boltzmann选择是一种基于Boltzmann分布的选择策略&#xff0c;主要用于进化算法中的个体选择过程。它通过模拟物理系统的热平衡状态来调节个体选择的概率&#xff0c;能够在进化初期保持种群多样性&#xff0c;并在进化后期集中选择适应度高的个体。 Boltzmann选择的表达式 B…

EON安装ASE Interface

安装 测试系统ubuntu。如果你python2和python3总是纠缠不清&#xff0c;可以sudo apt install python-is-python3直接解决。 经检查&#xff0c;我PC的 python地址为&#xff1a; /usr/include/python3.8/ pybind11地址为&#xff1a; /usr/include/pybind11/ 已确认python…

web前端的MySQL:跨领域之旅的探索与困惑

web前端的MySQL&#xff1a;跨领域之旅的探索与困惑 在数字化浪潮的推动下&#xff0c;web前端与MySQL数据库似乎成为了两个不可或缺的领域。然而&#xff0c;当我们将这两者放在一起&#xff0c;尝试探索web前端与MySQL之间的交互与关联时&#xff0c;却发现这是一次充满困惑…

AE电源pinnacle软件新款老款二款软件

AE电源pinnacle软件新款老款二款软件

C++从入门到精通(最详细教程,12万总结,带你掌握c++知识,涵盖大量知识点)

目录 一、面向对象的思想 二、类的使用 1.类的构成 2.类的设计 三、对象的基本使用 四、类的构造函数 1.构造函数的作用 2.构造函数的特点 3.默认构造函数 3.1.合成的默认构造函数 3.2.手动定义的默认构造函数 四、自定义的重载构造函数 五、拷贝构造函数 1.手动…

联合体和枚举<C语言>

导言 在C语言中除了结构体外&#xff0c;联合体和枚举也是自定义类型&#xff0c;联合体主要用于节省空间&#xff0c;在同一块内存存储多种类型的数据&#xff0c;而枚举可以提高代码的可读性、可维护性。 联合体&#xff08;union&#xff09; 它还有个更容易理解的名字&…

Rust-08-枚举和模式匹配

枚举类 结构体给予你将字段和数据聚合在一起的方法&#xff0c;像 Rectangle 结构体有 width 和 height 两 个字段。而枚举给予你将一个值成为一个集合之一的方法。比如&#xff0c;我们想让 Rectangle 是一 些形状的集合&#xff0c;包含 Circle 和 Triangle 。为了做到这个&…

硬件工程师需要掌握的工具

软件工具&#xff1a; 一、常用画图软件 1、AD/protel 简单好学&#xff0c;在低端市场使用的比较多。建议刚进入硬件工程师岗位或者大学生使用。 2、Candence/allegro Candence画复杂的板子相对更加有优势。但是学习难度比较高&#xff0c;但是如果学会AD后&#xff0c;可…