windows搭建VUE+Element环境

最新推荐文章于 2024-09-15 13:38:55 发布

原创

最新推荐文章于 2024-09-15 13:38:55 发布 · 802 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #windows #elementui #nodejs

本文介绍了如何在Windows操作系统中搭建Vue.js和ElementUI的开发环境。首先，详细讲述了Node.js的安装和环境配置过程，然后说明了如何全局安装Vue，最后指导如何在项目中安装并引入ElementUI，需在main.js中添加特定代码。

一、安装node

参考文章：Node.js安装及环境配置之Windows篇 - 周瑜周 - 博客园

二、全局安装vue

npm install -g vue-cli

cd进入你的项目后执行命令：

vue init webpack demo  //demo是你的项目名称，一路回车操作

三、安装Element-ui

cd进入到当前项目

npm i element-ui -S

安装完成后找到根目录的src文件夹下的main.js文件，添加以下代码

import ElementUI from 'element-ui';
import '../node_modules/element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

selflang

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

windows 下本地搭建vue+element UI 环境

wzk2329的博客

01-27

649

1、开始前确认有以下开发环境 node.js -v v14.7.0 npm -v 6.14.7 yarn -v 1.22.10 Vue -v 2.5.2 版本各不相同，根据自己的情况来。。 1、每次弄vue都会忘了了现在把它记录下来吧，需要的朋友也可以看下 2、部署之前要前安装好 npm工具，也可以是node.js这里就不多说了 3、cmd到需要安装到的目录执行vue init webpackmy-vue（项目名称）一直按回来直到出现这个： ? Use ES...

基于vue + element-ui的后台管理系统基于 vue + element-ui 的后台管理系统.zip

04-01

操作系统 (OS)：如Windows、macOS、Linux、Unix等，是管理和控制计算机硬件与软件资源、提供公共服务、协调计算机各部分工作的基础平台，是用户与计算机硬件之间的桥梁。驱动程序：为特定硬件设备提供接口，使...

参与评论您还未登录，请先登录后发表或查看评论

Windows 下安装 vue-element-admin

Doc_ACwhite的博客

07-15

259

转载的vue element ui 的操作

Vue2+Element项目初始化

weixin_45932704的博客

10-25

556

Vue2+Element项目初始化

Vue + elementui 实战（1）——项目初始化

wzsl66的博客

08-05

851

跟着b站黑马程序员的课程实践 vue + elementui 项目

（一）vue-cli初始化项目并引入ElementUI

澜岚伊人的博客

11-04

7191

摘要：写过了一个我们产品的后台管理系统，但做完项目都没有进行总结。感觉好多还是懵懂的感觉，所以想要重新走一遍，写一个自己的项目。让自己理清思路实现： 1、首先确认你的电脑中已经安装过Node.js了，如果没有可以百度安装配置 2、我们来说下安装vue，是用vue-cli来初始化项目吧（使用命令行工具来操作）（1）全局安装 vue-cli (在命令行工具中输入npm install...

以DonetCore+vue+Element搭建的简单框架

09-30

本文将详细介绍如何利用ASP.NET Core MVC、Vue.js 2.6.12版本和Element-UI搭建一个基础的CMS（内容管理系统）框架。一、.NET Core：新时代的Web开发框架 .NET Core是微软推出的新一代开源、跨平台的.NET框架，...

Vue+Element实现网页版个人简历系统(推荐)

10-15

Element UI是基于Vue 2.0的桌面端组件库，提供了丰富的组件以帮助开发者快速搭建美观的网页界面。它遵循Vue的官方风格，提供了覆盖PC和移动端各类场景的高质量组件，并且拥有详细的中文文档，使得新手也能较为容易地...

win11 Vue 安装，脚手架，生成项目

qq_34212381的博客

01-02

868

win11 小白笔记

【vue】创建第一个vue+element ui项目（全网最详细）

热门推荐

liuzhenhe1988的专栏

10-22

3万+

前言在之前的篇章中咱们一起搭建了vue开发环境，接下来开始创建第一个vue+element项目吧（vue：前端JavaScript框架 element：前端UI框架） vue开发环境搭建请参考【vue】在windows中搭建vue开发环境（全网最详细）创建vue项目一、开发工具vs code 1、创建一个存放项目的文件目录，如：C:\Project\VUE 2、在文件目录空白处，右键点击“通过code打开”（推荐使用vs code 开发） 3、通过以下截图打开终端，如下图

Vue环境搭建+VSCode+Win10的详细教程

11-19

一、安装Node.js（js的运行环境） 1.在Node.js官网https://nodejs.org/en/download/ 下载安装包。 2.下载后进行安装。 3.打开命令行，输入node -v可以查看到版本号。输入npm –v可看到npm版本号。新版的Node.js已自带npm（类似.net中的nuget包管理器），安装Node.js时会一起安装。（将来要更新npm可用这个命令npm intall npm@latest -g） 4.在我的win10系统中可以看到环境变量也已经自动配置好了。如下图同时也可年看到npm包管理器的默认下载目录，如下图 5.在命令行输入node回车，再

win10安装Element

zxc_3701的博客

07-18

302

win10安装Element 初学vue结合element使用! 安装element语法：npm i element-ui -S 然后安装安装 babel-plugin-component 语法：npm install babel-plugin-component -D // 结果报错了 npm ERR! code ENOENT npm ERR! syscall stat npm ERR! path C:\Users\Administrator\https:\registry.npm.taobao.org

window系统下安装element-ui：Vue下面安装Element 的详细步骤（附测试案例）

firestarwolf的博客

02-20

5666

找了很多文章今天才安装成功，汗颜！！！！！！因为其他人版本都比较老，我安装的版本比较新，操作上可能已经不一样了，附上截图，便于大家参考，一起学习交流新版的确实资料很少，再次提示大家要有耐心！！！！！前提：先安装nodejs，vue脚手架Vue-cli 我安装的nodejs是node-v10.15.1-x64.msi，相关nodejs安装步骤可以参考网上其他资料然后进入cmd界面安...

学习使用在windows系统上安装vue前端框架以及环境配置图文教程

徊忆羽菲

09-15

2255

学习使用在windows系统上安装vue前端框架以及环境配置图文教程

vue+element项目创建步骤

努力、拼搏、奋进

09-22

1577

vue+element项目创建步骤

手把手教你搭建VUE+VScode+elementUI开发环境

wdyan297的博客

05-16

1万+

通过详细的步骤描述和截图说明，手把手教前端新手搭建VUE+VScode+elementUI开发环境。

vue3+ElementUI-win10搭建

Aiken的自由世界

04-08

2115

文章目录1. 安装node.js1.1 下载和安装1.2 配置node.js1.3 安装cnpm1.4 设置环境变量（重要!!!）1.5 安装 vue 和 vue-cli2. 创建vite项目(vue-ts）1.1 创建vite-app (vue-ts）1.2 用vscode打开vite-app3. 创建vite项目(vue）3.1 创建 my-vue-app (vue）3.2 引入 Element Plus UI 组件库附录1.1 解决cmd乱码1.2 解决vscode中问题1.3 错误解决 1. 安装n

vue + element-UI 实现深色模式和主题色动态切换

weixin_44815852的博客

04-02

1万+

vue + element-UI 实现深色模式和主题色动态切换文章目录vue + element-UI 实现深色模式和主题色动态切换前言深色模式和主题色动态切换本地样式切换首先说明一下，我对前端了解的不多，最近因为报的项目问题才临时学的vue（之前也用过一次），然后就套用了ruoyi-vue的板子，这是ruoyi项目源码的地址和实现效果预览的地址前言我看了ruoyi项目之后，感觉被它的可以切换主题色惊艳到了（当然其他也是，如代码生成，动态路由等等），但是它虽然做了深色模式，但是深色模式只涉及了菜

vue element-ui 暗黑主题应用到若依框架

liora6的博客

04-11

5785

基于若依框架的element-ui，将主题更换为暗黑主题。

Vue+Element搭建进销存系统

最新发布

10-22

在构建进销存系统时，Vue 和 Element 框架的结合能高效地实现前端界面与交互。以下是关于使用它们搭建进销存系统的方法与教程相关信息： ### 环境准备运行环境方面，最好采用 Java JDK 1.8，这是目前最稳定且使用最多的 JDK 版本；IDE 环境可选择 IDEA 或 Eclipse，推荐使用 IDEA；Tomcat 环境可选用 Tomcat7、Tomcat8 或 Tomcat9 版本；硬件环境要求 Windows 7/8/10 且 1G 内存以上，或者 Mac OS；数据库使用 MySql 5.7 版本，且项目为 Maven 项目 [^3]。 ### 技术栈后端采用 Spring + SpringMVC + Mybatis + Springboot，前端使用 Vue + CSS + JavaScript + jQuery + elementui [^3]。 ### 搭建步骤示例 1. **创建项目**：使用 Vue CLI 创建一个新的 Vue 项目，命令如下： ```bash vue create inventory-system cd inventory-system ``` 2. **安装 Element 框架**：在项目中安装 Element 框架，命令如下： ```bash npm install element-ui --save ``` 3. **引入 Element 框架**：在 `main.js` 中引入并使用 Element 框架： ```javascript import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import App from './App.vue'; Vue.use(ElementUI); new Vue({ render: h => h(App), }).$mount('#app'); ``` 4. **设计页面**：利用 Element 提供的组件设计进销存系统的各个页面，如商品管理页面、进货管理页面、销售管理页面等。以下是一个简单的商品列表页面示例： ```vue <template> <div> <el-table :data="products"> <el-table-column prop="name" label="商品名称"></el-table-column> <el-table-column prop="specification" label="规格"></el-table-column> <el-table-column prop="price" label="价格"></el-table-column> <el-table-column prop="stock" label="库存"></el-table-column> </el-table> </div> </template> <script> export default { data() { return { products: [ { name: '商品1', specification: '规格1', price: 100, stock: 10 }, { name: '商品2', specification: '规格2', price: 200, stock: 20 }, ] }; } }; </script> ``` ### 功能模块实现 - **前台首页功能模块**：在系统首页可查看首页、药品信息、医药指南、留言反馈、个人中心、后台管理、购物车等内容；用户可进行注册、登录操作，在药品信息页面可查看药品详情并进行添加到购物车、立即购买等操作 [^3]。 - **用户功能模块**：用户进入系统操作界面后，可对首页、个人中心、在线咨询管理、我的收藏管理、订单管理等功能模块进行操作，如在线咨询管理可获取咨询信息并进行修改，订单管理可获取订单信息并进行详情操作等 [^3]。 - **管理端功能模块**：包含公告管理、日志管理、管理员管理、员工管理、部门管理、供应商管理、客户管理、商品管理、商品进货管理、商品退货管理、商品销售管理、销售退货管理等功能，各功能均支持增删改查操作（部分功能存在计算错误问题） [^4]。 ### 教程获取途径可以通过在线教程网站，如 Vue 官方文档、Element 官方文档、MDN Web Docs 等获取更详细的教程和示例代码。同时，也可以在 GitHub 上搜索相关的开源项目，参考他人的实现思路和代码。