技术基础

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

开发环境

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

安装Visual Studio Code

下载地址: 官网下载地址

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

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

官网文档:https://code.visualstudio.com/docs

简书教程: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教程可以参考以下资料

中文官网:http://nodejs.cn/api/

菜鸟学堂:https://www.runoob.com/nodejs/nodejs-tutorial.html

安装 webpack

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

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

npm install webpack -g

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

菜鸟学堂:http://www.runoob.com/w3cnote/webpack-tutorial.html

安装 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 的介绍页面。

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

源码下载

后端:https://gitee.com/liuge1988/kitty

前端:https://gitee.com/liuge1988/kitty-ui.git


作者:朝雨忆轻尘
出处:https://www.cnblogs.com/xifengxiaoma/
版权所有,欢迎转载,转载请注明原文作者及出处。

Vue + Element UI 实现权限管理系统 前端篇(一):搭建开发环境的更多相关文章

  1. Vue + Element UI 实现权限管理系统 前端篇(十三):页面权限控制

    权限控制方案 既然是后台权限管理系统,当然少不了权限控制啦,至于权限控制,前端方面当然就是对页面资源的访问和操作控制啦. 前端资源权限主要又分为两个部分,即导航菜单的查看权限和页面增删改操作按钮的操作 ...

  2. Vue + Element UI 实现权限管理系统 前端篇(十一):第三方图标库

    使用第三方图标库 用过Elment的同鞋都知道,Element UI提供的字体图符少之又少,实在是不够用啊,幸好现在有不少丰富的第三方图标库可用,引入也不会很麻烦. Font Awesome Font ...

  3. Vue + Element UI 实现权限管理系统 前端篇(十六):系统备份还原

    系统备份还原 在很多时候,我们需要系统数据进行备份还原.我们这里就使用MySql的备份还原命令实现系统备份还原的功能. 后台接口准备 系统备份还原是对数据库的备份还原,所以必须有后台接口的支持,我们准 ...

  4. Vue + Element UI 实现权限管理系统 前端篇(十二):用户管理模块

    用户管理模块 添加接口 在 http/moduls/user.js 中添加用户管理相关接口. import axios from '../axios' /* * 用户管理模块 */ // 保存 exp ...

  5. Vue + Element UI 实现权限管理系统 前端篇(十):动态加载菜单

    动态加载菜单 之前我们的导航树都是写死在页面里的,而实际应用中是需要从后台服务器获取菜单数据之后动态生成的. 我们在这里就用上一篇准备好的数据格式Mock出模拟数据,然后动态生成我们的导航菜单. 接口 ...

  6. Vue + Element UI 实现权限管理系统 前端篇(八):管理应用状态

    使用 Vuex 管理应用状态 1. 引入背景 像先前我们是有导航菜单栏收缩和展开功能的,但是因为组件封装的原因,隐藏按钮在头部组件,而导航菜单在导航菜单组件,这样就涉及到了组件收缩状态的共享问题.收缩 ...

  7. Vue + Element UI 实现权限管理系统 前端篇(四):优化登录流程

    完善登录流程 1. 丰富登录界面 1.1 从 Element 指南中选择组件模板丰富登录界面,放置一个登录界面表单,包含账号密码输入框和登录重置按钮. <template> <el- ...

  8. Vue + Element UI 实现权限管理系统 前端篇(二):Vue + Element 案例

    导入项目 打开 Visual Studio Code,File --> add Folder to Workspace,导入我们的项目. 安装 Element 安装依赖 Element 是国内饿 ...

  9. Vue + Element UI 实现权限管理系统 前端篇(十四):菜单功能实现

    菜单功能实现 菜单接口封装 菜单管理是一个对菜单树结构的增删改查操作. 提供一个菜单查询接口,查询整颗菜单树形结构. http/modules/menu.js 添加 findMenuTree 接口. ...

随机推荐

  1. 视图,sql注入问题,事物,存储过程

    视图:本质是一张虚拟的表数据来自select语句用途是保障原表安全 功能1:隐藏部分数据,开放指定数据功能2:因为视图可以将查询结果保存的特性,我们可以用视图来达到减少书写sql语句的功能 例如:se ...

  2. spring启动component-scan类扫描加载,以及@Resource,postConstruct等等注解的解析生效源码

    spring里IOC的原理就不详细写了, 如果想要搞清楚自动扫描组件是如何实现的,还有@Resouce @PostConstruct等注解的工作原理,最好可以先搞清楚整个IOC容器的运作原理再来分析这 ...

  3. 第83讲:Scala中List的实现内幕源码揭秘

    今天我们来学习一下scala的List的方法的内部源码的一些知识. 首先,take方法.take方法就是取列表的从第一个元素开始的前N个元素.如list.take(3),就是取list的前3个元素,返 ...

  4. QT源码查看001-QApplication和QCoreApplication

    QCoreApplication和QApplication的区别(1) QApplication这个类是继承QCoreApplication的,而QCoreApplication有继承QObject的 ...

  5. RMQ算法区间最值

    问题类型:是多次询问一个大区间里子区间的最值问题 dp + 位运算的思想处理 rmax[i][j]表示从i开始到i + 2^j - 1的区间里的最大值dp[i][j] ==== (i,i + 2^j ...

  6. 运行批处理文件怎么不显示DOS命令窗口

    运行批处理文件怎么不显示DOS命令窗口   BAT没法不显示DOS窗口.你可以考虑用脚本保持以下到文本文件,重命名为AutoUp_ddyy.vbs set WshShell = WScript.Cre ...

  7. Delphi7调用DelphiXE编写的DLL问题

    http://bbs.csdn.net/topics/380045353 用DelphiXE在WIN2008下编写一个访问WebServices的DLL ws.dll,只有一个输出函数,如下: fun ...

  8. mssql借助链接服务器进行数据快速迁移

    在工作中,遇到了一个任务,需要将A数据库的数据迁移到B数据库,两个数据库的数据结构是一样的.B数据库已经在相当数量的数据了,故而不能通过复制数据库的方式来实现.  旧方法 在对数据迁移的时候,一开始使 ...

  9. 【Win】Clso QR Tool 二维码小工具

    一个可以生成并识别二维码的windows小工具,纯绿色.不含糖. 可以通过输入文本生成二维码,或者加载本地图片.剪贴板内的图片,直接解析出二维码内容. 支持自定义LOGO. 下载文件 (当前版本:1. ...

  10. WPF实现可视化控件打印及打印预览

    打印预览XAML代码: <controls:WindowEx x:Class="SunCreate.Vipf.Client.UI.MapPrintPreview" xmlns ...