Vue+elementUI从头开始构建前端页面(前篇-Starter搭建)

最新推荐文章于 2024-08-18 10:45:26 发布
最新推荐文章于 2024-08-18 10:45:26 发布
阅读量1.7k 收藏 8
点赞数
分类专栏： Web 文章标签： vue.js npm 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ISIS7Protessional/article/details/105024262
版权
本文详细介绍了如何从零开始构建Vue+ElementUI的前端页面，包括环境准备，如安装Node.js和npm，选择IDE，特别是使用PyCharm安装Vue.js插件。接着，通过ElementUI的starter项目，指导读者下载、启动和理解项目结构。同时，还提供了在遇到端口占用问题时的解决办法。
摘要由CSDN通过智能技术生成

传送门：Vue+elementUI从头开始构建前端页面(前篇-Starter搭建)

传送门：Vue+elementUI从头开始构建前端页面(中篇-Table作妖)

传送门：Vue+elementUI从头开始构建前端页面(后篇-NavigationMenu路由)

本文对环境准备，项目搭建，服务启用及停止等进行介绍。

目录

一、了解

二、环境准备

2.1 安装node +  npm

2.2 安装IDE

三、初始项目搭建（使用element-starter）

3.1 项目下载

3.2 项目启动

3.3 停止项目及错误关闭项目端口被占用时解决方案

四、了解vue目录结构

 

一、了解

Vue: 渐进式JavaScript 框架

官网：https://cn.vuejs.org/

 

Element 网站快速成型工具：一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

官网： https://element.eleme.cn/#/zh-CN

 

最低0.47元/天 解锁文章
Backup and share
关注
专栏目录
Vue+elementUI从头开始构建前端页面(后篇-NavigationMenu路由)
ISIS7Protessional的博客
06-17 638
传送门：Vue+elementUI从头开始构建前端页面(前篇-Starter搭建) 传送门：Vue+elementUI从头开始构建前端页面(中篇-Table作妖) 本文主要介绍导航菜单的配置以及导航栏跳转路由（vue路由实现页面跳转）的方法。 目录 一、 导航菜单配置 二、 路由跳转 2.1 页面配置 2.2 菜单配置 2.3路由配置 2.4main.js配置 一、 导航菜单配置 elementui导航栏使用这个官网demo即可，可以结合 页面布局将导航栏配置在左侧边...
VueElementStarter包含ElementUI的Vue强大的启动项目
08-10
Vue-Element-Starter：包含Element-UI的Vue强大的启动项目
vue-cli-element-starter（vue-cli 和 element 结合的项目开发模板）
樊小书生
04-17 2395
新项目每次都需要去配置一个新的开发环境，索性直接搭一个模板，为以后快速开发使用。 项目地址：vue-cli-element-starter vue-cli 和 element 结合的项目开发模板，主要内容如下： 将 axios 或者 $axios 添加到 Vue.prototype ，对 axios 的封装是基于 vue-cli-plugin-axios 插件。 对 axios 的拦截器进行配置...
Vue-Element-Starter 项目教程
最新发布
gitblog_00995的博客
08-18 316
Vue-Element-Starter 项目教程 vue-element-starter Vue starter with Element-UI [READY, unmaintained now]项目地址:https://gitcode.com/gh_mirrors/vu/vue-element-starter 项目介绍 Vue-Element-Starter 是一个基于 Vue.js 和 El...
vue-element-admin-starter:适用于大多数管理系统的带有ElementUI的Vue管理员模板
03-11
vue-element-admin-starter 适用于大多数管理系统的带有ElementUI的Vue管理模板。 一个通用的vue admin模板，只加入必要的组件，侵入小，注释全，适用于绝大部分管理系统，适合大多数前端或该开发人员入手。觉得好用给个Star呀，么么哒〜 :face_blowing_a_kiss: 依存关系： Javascript框架 状态管理 Vue.js官方路由器 Ajax请求者 Axios模拟适配器 模拟数据生成器 实用程序库 日期和时间库 跨浏览器存储 CSS重置 UI框架 Slim进度栏 浏览器Ace编辑器的兼容版本 的富文本编辑器 Tiptap扩展 字体图标 字体图标生成器 构建设置 有关更多信息，请 。 # Install dependencies yarn # serve with hot reload at localhost:8080 yarn serve # bui
vue-starter-一个Vue.js入门工具包，使您可以专注于更多的编程和更少的配置。-Vue.js开发
05-27
vue-starter一个Vue.js入门工具包，使您可以专注于更多的编程和更少的配置。 具有热重载，lint-o vue-starter的全功能Webpack设置Vue.js入门工具包，使您可以专注于更多的编程和更少的配置。 功能齐全的Webpack设置，包括热重载，保存时不掉毛，单元测试和CSS提取。 该模板与Vue 2.0兼容。 为什么？ 在Scroll.in，我们选择了Vue.js作为主要的JS框架。 因此，在处理各种Vue.js项目时，我们觉得我们需要一个用于所有项目的模板，该模板可用于在开发人员之间实现更好的一致性和编码风格。 我们永远可以
TypeScript-Vue-Starter
每文的博客
02-07 357
学https://github.com/Microsoft/TypeScript-Vue-Starter#typescript-vue-starter遇到的几个问题 1.执行tsc --init的时候报：tsc : 无法加载文件 C:\Users\fhn\AppData\Roaming\npm\tsc.ps1,的错误 解决方法：在“开始菜单”，搜索“Windows PowerShell ISE”----右键以管理员身份运行----粘贴Set-ExecutionPolicy RemoteSigned运行脚本-
Java毕业设计-基于SpringBoot+Vue+ElementUI 前后端分离的人力资源管理系统（源码+数据库脚本）.zip
07-08
UI库：选择ElementUI作为UI库，它是一套基于Vue的组件库，提供了丰富的UI组件，可快速构建美观的用户界面。 2. 后端开发 使用SpringBoot来实现后端功能，包括数据库操作、权限管理、接口设计等。以下是一个示例代码...
vue+elementUI管理系统页面源代码
02-12
总的来说，这个“vue2+elementUI后台管理系统”项目是一个完整的前端解决方案，结合Vue.js的灵活性、Element UI的美观组件和Vue Router的路由管理，可以快速构建出功能完善的后台管理系统。开发者只需导入项目，根据...
详解Vue+ElementUI从零开始搭建自己的网站（一、环境搭建）
10-17
根据上述文件信息，以下是从标题、描述和部分内容中提取出的关于Vue+ElementUI搭建网站的知识点： 1. Vue.js框架介绍： Vue.js（通常简称为Vue）是一个用于构建用户界面的渐进式JavaScript框架。Vue的设计理念是...
element-starter(添加路由route).zip
07-17
后端管理的初级框架，基于element-starter(添加路由route)
vue-starter：为前端开发人员构建的vue管理模板
02-15
初学者 Vue-starter是一个功能强大的管理模板，专门为前端开发人员而构建，它易于使用且直观易用，可快速，轻松地入门。 团队成员 产品：武则天设计：妲己前端：鲁班七号，后裔前端：东皇太一，亚瑟测试：蔡文姬 有用的链接 Vue-CLI文件： : 产品文档： BackAPI文件： 如何使用 # install dependencies yarn install # serve with hot reload at localhost:8080 yarn serve # build for production with minification yarn build # analysis your dist files yarn analysis # deploy your application yarn deploy 科技栈 Vue @ 2.6.10 Vue路由器 威克斯 @
element-starter主页框架，非常适合二次开发（左侧菜单收缩展开）.zip
10-18
element-starter主页面框架
elemeui通用的项目模板Starter Kit
10-22
A starter kit for Element UI generated by vue-cli.通用的项目模板
怎样使用element-starter快速搭建ElementUI项目
BADAO_LIUMANG_QIZHI的博客
11-27 3302
场景 为了能快速搭建起一个ElementUI项目，我们可以使用element-starter这个模板进行快速搭建。 element-starter的Github https://github.com/ElementUI/element-starter 按照其官方要求node>=6 注： 博客：https://blog.csdn.net/badao_liumang_qiz...
探索优雅的前端开发框架：Element UI Starter
gitblog_00009的博客
03-22 306
探索优雅的前端开发框架：Element UI Starter 项目地址:https://gitcode.com/ElementUI/element-starter 项目简介 Element UI Starter 是一个基于 Vue.js 的开源组件库——Element UI 的快速启动模板。它旨在帮助开发者高效地构建出美观、响应式的Web应用，尤其适用于企业级后台管理系统。 技术分析 Elemen...
Element-UI项目启动准备
weixin_43331769的博客
02-09 1486
Element-UI一、基本使用1：基于命令形式手动安装： 一、基本使用 1：基于命令形式手动安装： 安装依赖包需要在根文件的终端控制台中处理 蓝色区域内容需要在main.js中处理 ...
vue-starter-study-node
最爱下雨天
11-12 292
参考文献：https://www.jianshu.com/p/c4a87e1b4ef7 1 vue 挂载点 模板 与实例 挂载点：Vue中的el属性所绑定的DOM节点，Vue只会处理挂载点内的内容； 模板：挂载点内部的内容都是模板 模板不仅仅可以放在挂载点内部，也可以放在Vue实例中，用template属性，写在template属性中； 实例：如：new Vue（{……}） 2 实例...
使用vue+vue-router+elementUI构建简易通讯录教程
"本文主要介绍如何使用Vue.js、Vue Router和Element UI来构建一个简单的通讯录应用。通过这个教程，读者将学习到如何利用这些技术实现一个具备基本增删改查功能的通讯录，其中数据存储在本地的localStorage中。" 在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值