Vue + Element UI 前端篇(一):搭建开发环境

Vue + Element UI 实现权限管理系统 前端篇(一):搭建开发环境 

技术基础

开发之前,请先熟悉下面的4个文档

  • vue.js2.0中文, 优秀的JS框架
  • vue-router, vue.js 配套路由
  • vuex,vue.js 应用状态管理库
  • Element,饿了么提供的UI框架

开发环境

  • Node JS(npm)
  • Visual Studio Code(前端IDE)

安装Visual Studio Code

下载地址: 官网下载地址

Visual Studio Code 是一款非常优秀的开源编辑器,非常适合作为前端IDE, 根据自己的系统下载相应的版本进行安装。

更多 VS Code 教程可以参考以下资料

官网文档:Documentation for Visual Studio Code

简书教程:https://www.jianshu.com/p/990b19834896

安装NodeJS

下载地址: nodejs中文网

到官网下载自己系统对应的版本,这里我们下载Windows系统的64位zip文件,下载完成后解压,可以看到里面有一个node.exe的可执行文件。

这里写图片描述

把Node添加到系统环境变量里面,打开cmd命令行,输入npm -v,如果出现如下图的显示,说明已经安装正确。

如果你安装的是旧版本的 npm,可以很容易得通过 npm 命令来升级。

sudo npm install npm -g #linux
npm install npm -g  # windows

可以看到升级之后,再次执行 npm -v 查看版本已经升级到 6.4.0 了。

更多NodeJS教程可以参考以下资料

中文官网:首页 | Node.js v20 文档

菜鸟学堂:Node.js 教程 | 菜鸟教程

安装 webpack

安装好 npm 之后,就可以通过 npm 命令来下载各种工具了。

安装打包工具 webpack,-g 表示全局安装。

npm install webpack -g

更多webpack教程可以参考以下资料

菜鸟学堂:Webpack 入门教程 | 菜鸟教程

安装 vue-cli

安装 vue 脚手架项目初始化工具 vue-cli,-g 表示全局安装。

npm install vue-cli -g

淘宝镜像

因为 npm 使用的是国外中央仓库,有时候下载速度比较“喜人”,就像 Maven 有国内镜像一样,npm 在国内也有镜像可用。这里建议使用淘宝镜像。

安装淘宝镜像,安装成功后 用 cnpm 替代 npm 命令即可,如: cnpm install webpack -g 。

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装 Yarn

Yarn 是 Facebook 发布的 node.js 包管理器,它比 npm 更快、更高效,可以使用 Yarn 替代 npm 。

如果你安装了node,就安装了npm,可以使用下面的命令来安装:

npm i yarn -g --verbose

npm官方源访问速度实在不敢恭维,建议使用之前切换为淘宝镜像,在yarn安装完毕之后执行如下指令:

yarn config set registry https://registry.npm.taobao.org

到此为止我们就可以在项目中像使用npm一样使用yarn了。

使用 Yarn 跟 npm 差别不大,具体命令关系如下:

npm install  => yarn install
npm install --save [package] => yarn add [package]
npm install --save-dev [package] => yarn add [package] --dev
npm install --global [package] => yarn global add [package]
npm uninstall --save [package] => yarn remove [package]
npm uninstall --save-dev [package] => yarn remove [package]

创建项目

环境已经搭建完成,现在我们通过 vue-cli 来生成一个项目,名称为 kitty-ui。

vue init webpack kitty-ui

一路根据提示输入项目信息,等待项目生成。

命令执行完毕,生成项目结构如下

进入到项目根目录,执行  yarn install (也可以用 npm install,或淘宝 cnpm install,我们这里用 yarn 会快一点) 安装依赖包。

cd kitty -ui
yarn install

依赖包安装完成之后,会在项目根目录下生成 node_modules 文件夹,是下载的依赖包的统一存放目录。

安装完成之后,执行应用启动命令,运行项目。

npm run dev

命令执行之后,如果显示 “I Your application is runing here ....”,就表示启动成功了。

浏览器访问对应地址,如这里的: http://localhost:8080,会出现 vue 的介绍页面。

到此,我们的项目脚手架就建立起来了。

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

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

相关文章

海域可视化监管:浅析海域动态远程视频智能监管平台的构建方案

一、方案背景 随着科技的不断进步,智慧海域管理平台已经成为海洋领域监管的一种重要工具。相比传统的视频监控方式,智慧海域管理平台通过建设近岸海域视频监控网、海洋环境监测网和海上目标探测网络等,可实现海洋管理的数字化转型。 传统的…

Springboot + Sqlite实战(离线部署成功)

最近有个需求&#xff0c;是手机软件离线使用&#xff0c; 用的springboot mybatis-plus mysql&#xff0c;无法实现&#xff0c;于是考虑使用内嵌式轻量级的数据库SQLlite 引入依赖 <dependency><groupId>org.xerial</groupId><artifactId>sqlite-…

车载域控制器DCU浪涌防护推荐TVS二极管

为了解决分布式EEA的这些问题&#xff0c;汽车工程师开始逐渐把很多功能相似、分离的ECU功能集成整合到一个比ECU性能更强的处理器硬件平台上&#xff0c;这就是汽车“域控制器&#xff08;Domain Controller Unit&#xff0c;DCU&#xff09;”。车载域控制器DCU大大优化整车的…

星辰天合 CEO 胥昕受邀参加人民网 2023 “小巨人”发展论坛

为进一步推动专精特新“小巨人”企业高质量发展&#xff0c;近日&#xff0c;由人民网主办&#xff0c;人民网财经研究院、828 企业服务平台共同承办的 2023“小巨人”发展论坛在人民日报社新媒体大厦举行&#xff0c;星辰天合 CEO 胥昕受邀参加。 2023 “小巨人”发展论坛现场…

如何将DHTMLX Suite集成到Scheduler Lightbox中?让项目管理更可控!

在构建JavaScript调度器时&#xff0c;通常需要为最终用户提供一个他们喜欢的方式来计划事件&#xff0c;这是Web开发人员喜欢认可DHTMLX Scheduler的重要原因&#xff0c;它在这方面提供了完全的操作自由&#xff0c;它带有lightbox弹出窗口&#xff0c;允许通过各种控件动态更…

linux信号量

通过学习linux的信号量&#xff0c;对linux的信号量进行了编程。

Fragment.onStop的事情

继续承接上一篇文章----Fragment.OnPause的事情&#xff0c;我们知道onPause之后进入的是onStop生命周期方法&#xff0c;那Fragment的onStop方法又干了些什么呢&#xff1f; 还是从Activity入手&#xff0c;相应的入口代码如下&#xff1a; //FragmentActivity.java/*** Disp…

7英寸触摸显示屏企业网络电话

SV-X77英寸触摸显示屏企业网络电话 SV-X7网络电话是一款带有7英寸触摸显示屏的高端式企业级电话&#xff0c;以先进设计及强大的功能大幅度提高企业工作效率。 功能亮点 √ 虚拟可编程按键 — 可动态显示4个分页&#xff0c;每页可设置显示29个DSS键的状态&#xff0c;最多支持…

设计模式之适配器与装饰器

目录 适配器模式 简介 角色 使用 优缺点 使用场景 装饰器模式 简介 优缺点 模式结构 使用 使用场景 适配器模式 简介 允许将不兼容的对象包装成一个适配器类&#xff0c;使得其他类可以通过适配器类与原始对象进行交互&#xff0c;从而提高兼容性 角色 目标角色…

Debezium-增量迁移之 Oracle 迁移所需权限

-- 创建用户 create user TCK identified by oracle; -- 赋权 grant connect,resource to TCK; -- 删除权限 revoke select any table from TCK&#xff1b; revoke select any DICTIONARY from TCK&#xff1b; -- 删除用户 CASCADE(用户下的数据级联删除) drop user TCK CASC…

拼多多订单打单接口 免申请审核流程接入(拼多多开放平台接入)

pdd.erp.order.sync erp打单信息同步 更新时间&#xff1a;2021-04-13 23:04:54 免费API必须用户授权 erp打单信息同步 公共参数 名称类型必须描述keyString是调用key&#xff08;注册获取APIkey&#xff09;secretString是调用密钥api_nameString是API接口名称&#xff…

JS中的扩展操作符...(点点点)

标题 前言概述拓展操作符&#xff08;Spread Operator&#xff09;赋值与扩展操作符的区别 剩余操作符&#xff08;Rest Operator&#xff09; 前言 大家应该都在代码中用过或者看到…方法&#xff0c;我每次用到这个方法的时候都会想到第一次见到这个方法一头雾水的样子&#…

淘宝/天猫 API 接入说明

API地址:https://o0b.cn/anzexi 调用示例&#xff1a; 参数说明 通用参数说明 参数不要乱传&#xff0c;否则不管成功失败都会扣费url说明 https://api-gw.onebound.cn/平台/API类型/ 平台&#xff1a;淘宝&#xff0c;京东等&#xff0c; API类型:[item_search,item_get,ite…

数学建模--粒子群算法(PSO)的Python实现

目录 1.开篇提示 2.算法流程简介 3.算法核心代码 4.算法效果展示 1.开篇提示 """ 开篇提示: 这篇文章是一篇学习文章,思路和参考来自:https://blog.csdn.net/weixin_42051846/article/details/128673427?utm_mediumdistribute.pc_relevant.none-task-blog-…

F#奇妙游(25):ADT和领域设计

前言 采用ADT来对领域进行设计&#xff0c;是一种很好的实践。在这种实践中&#xff0c;我们可以把领域中的数据抽象成ADT&#xff0c;把领域中的操作抽象成函数&#xff0c;然后利用ADT的类型系统来进行类型检查&#xff0c;从而保证领域中的数据和操作的正确性。 设计目标 …

【AGC】云数据库API9开发问题汇总

【问题描述】 云数据库HarmonyOS API9 SDK已经推出了一段时间了&#xff0c;下面为大家汇总一些在集成使用中遇到的问题和解决方案。 【问题分析】 1. 报错信息&#xff1a;数据库初始化失败&#xff1a;{“message”&#xff1a;“The object type list and permission …

云原生Kubernetes:K8S常用服务端口

目录 一、理论 1.K8S常用服务端口号 一、理论 1.K8S常用服务端口号 &#xff08;1&#xff09;K8S集群 表1 K8S集群端口 协议端口号K8S集群TCP22使用主机驱动通过SSH进行节点配置TCP2376主机驱动与Docker守护进程通信的TLS端口TCP2379etcd客户端请求TCP2380etcd节点通信U…

PgSQL-并行查询系列-介绍[译]

PgSQL-并行查询系列-介绍 现代CPU模型拥有大量的CPU核心。多年来&#xff0c;数据库应用程序都是并发向数据库发送查询的。查询处理多个表的行时&#xff0c;若可以使用多核&#xff0c;则可以客观地提升性能。PgSQL 9.6引入了并行查询的新特性&#xff0c;开启并行查询后可以大…

es(Elasticsearch)介绍

学习es可以参考mysql&#xff08;相比mysql而言&#xff0c;es所需的cpu、内存更多&#xff09; 什么是Elasticsearch Elasticsearch简称es&#xff0c;是由Elastic和search组成。Elastic的意思是有弹性的&#xff0c;search的意思是搜索。 弹性&#xff1a;es是一个天生支持分…

笔记:linux中LED(GPIO)驱动设备树配置和用法

设备树中节点配置 设备树中的LED驱动一般是这样写&#xff0c;LED驱动可以控制GPIO的电平变化&#xff0c;生成文件节点很方便 leds: leds {compatible "gpio-leds";gpio_demo: gpio_demo {label "gpio_demo";gpios <&gpio0 RK_PC0 GPIO_ACTIV…