vue3项目搭建并配置element-plus

这篇具有很好参考价值的文章主要介绍了vue3项目搭建并配置element-plus。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

第一步:安装node.js,并配置环境变量

第二步:安装vue内部命令

npm install -g vue
// 卸载vue-cli
npm uninstall vue-cli -g
// 安装vue-cli
npm install -g @vue/cli

安装完成后,输入如下指令查看vue的版本:

vue -V

第三步:创建vue项目

选择一个要存放项目的目录,打开小黑窗输入如下命令:

npm init vue

一开始输入项目名称或者默认vue-project,然后根据需求选择Yes/No

第四步:安装element-ui

生成完项目后,输入如下指令:

cd 项目名
npm install
npm i -s element-plus

src/main.js里引入

import ElementPlus from 'element-plus'; import 'element-plus/theme-chalk/index.css';

index.css的文件位置根据实际情况写,也有可能是

import 'element-plus/lib/theme-chalk/index.css'

const app后面加上.use(ElementPlus),如下

const app = createApp(App).use(router).use(ElementPlus)

第五步:启动vue项目

安装完成后,输入如下命令:

npm run dev

输入后启动需一会,就会有对应的IP可以访问项目啦文章来源地址https://www.toymoban.com/news/detail-646077.html

到了这里,关于vue3项目搭建并配置element-plus的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 从0开始搭建一个vue3+vite+ts+pinia+element-plus的项目

    前言:vue3+ts+vite大家已经都开始用了,最近也在学习,基本上是零基础开始ts的学习,很多语法知识是边写边查,没有系统的学习ts。此处展示从零开始,搭建的一个框架,方便拿来即用! 其中框架选择vue,语言选择typeScript 项目启动成功以后如下所示: 为了方便日常工作中

    2024年02月06日
    浏览(65)
  • 二、搭建前后端分离的自动化测试平台的前端Vue3+Element-plus前端项目

    1、Node获取地址 https://nodejs.org/en/download 一直默认选项安装,安装好了之后,在环境变量中会自动配置Node的地址,可以在cmd中使用 node -v/npm -v命令验证是否下载成功 2、设置Node的配置内容 (1)在安装目录下新建两个文件夹命名为node_cache,和node_global: 其中 node_cache 是作为 缓

    2024年02月06日
    浏览(58)
  • Vue3+Vite项目引入Element-plus并配置按需自动导入

    我使用的是 pnpm ,并且顺便将 element-plus/icons 一起引入 如果您使用 Volar,请在根目录下 tsconfig.json 中通过 compilerOptions.type 指定全局组件类型 3.1 首先你需要安装 unplugin-vue-components 和 unplugin-auto-import 这两款插件 3.2 然后把下列代码插入到根目录下 vite.config.ts 文件中 Element-lus官

    2024年02月13日
    浏览(65)
  • 超级详细 最新 vite4+vue3+ts+element-plus+eslint-prettier 项目搭建流程

    系列文章目录 【element-plus】 table表格每行圆角解决方案 element也通用 【Vue3+Vite+Ts+element-plus】使用tsx实现左侧栏菜单无限层级封装 超级详细GitBook和GitLab集成步骤【linux环境】 1.1、项目创建 执行以下代码将vite将会自动生成初始的 vite4+vue3+ts的项目模板,pnpm、npm、yarn 选择一种执

    2024年02月04日
    浏览(77)
  • Vue cli创建项目时键盘操作无效;vue3.0项目搭建自定义配置

    在创建vue3.0项目时,在建好的文件夹,鼠标右键 git bash 使用 vue create my-vue3.0创建新项目时,键盘方向键失效,无法选中对应的选项(交互提示符不工作) 方案一 使用电脑自带的 cmd 运行 vue create my-vue3.0。 方案一 在 git bash 窗口中用 winpty vue.cmd create demo 命令创建项目。只是换

    2024年04月09日
    浏览(43)
  • vite搭建vue3项目本地环境自定义域名及端口配置

    本blog讲述的是vite直接创建的vue3的项目的本地环境自定义域名配置。 windows 首先配置本地的一个域名代理指向。 在windows环境下host文件的位置是 C:WindowsSystem32driversetc 我们需要打开目录下的hosts文件然后在 其中找到127.0.0.1然后在后面追加一行 Mac 在mac系统中我们需要打开终

    2024年02月06日
    浏览(129)
  • 【前端Vue】Vue3+Pinia小兔鲜电商项目第4篇:静态结构搭建和路由配置,1. 准备分类组件【附代码文档】

    Vue3+ElementPlus+Pinia开发小兔鲜电商项目完整教程(附代码资料)主要内容讲述:认识Vue3,使用create-vue搭建Vue3项目1. Vue3组合式API体验,2. Vue3更多的优势,1. 认识create-vue,2. 使用create-vue创建项目,1. setup选项的写法和执行时机,2. setup中写代码的特点。什么是pinia,创建空Vue项目并安装

    2024年04月11日
    浏览(50)
  • VSCODE VUE3 element-ui plaus 环境搭建

        目录 一、VUE 1、安装VUE 2、创建项目  二、Element Plus 1、在项目目录中安装 Element Plus,执行 2、引入element 三、vscode 中运行 1、打开项目文件夹 2、点击debug,运行 1)、首次lanch  chrome时 2)、lanch node.js   3)、加入elementui 看看起作用不 最近学习针灸,突然想搭建一个针灸

    2024年02月12日
    浏览(63)
  • 通过Vscode 简单创建一个vue3+element的项目

    确保你安装了最新版本的 Node.js,并且你的当前工作目录正是打算创建项目的目录。在命令行中运行以下命令 输入构建项目命令,个人推荐如果有cnpm使用cnpm 创建成功之后 完整引入 在 main.js 中写入以下内容: 以上代码便完成了 Element 的引入。需要注意的是,样式文件需要单

    2024年02月02日
    浏览(81)
  • Vue3 + Element-UI 搭建一个后台管理系统框架模板

    本文将介绍如何基于Vue3和element-ui搭建一个后台管理系统框架模板。我们将详细讲解代码流程,并提供详细的说明。 Vue3 Element-ui Axios 本文假设读者已经熟悉Vue3和Element-ui的基本使用方法,并且对Axios有一定的了解。 步骤1:创建Vue3项目 我们可以使用Vue CLI来创建一个Vue3项目,

    2023年04月26日
    浏览(122)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包