专栏首页朝雨忆轻尘Vue + Element UI 实现权限管理系统 前端篇(一):搭建开发环境

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

技术基础

开发之前,请先熟悉下面的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 -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/  版权所有,欢迎转载,转载请注明原文作者及出处。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue笔记:使用node开发vue入门实例

    首先在命令终端输入 npm -v 检测是否安装 npm。如果没有,按照下面教程进行安装。

    朝雨忆轻尘
  • Vue笔记:使用 Yarn 管理依赖包

    上年10月份, Facebook 发布了新的 node.js 包管理器 Yarn 用以替代 npm ,它比npm更快、更高效。

    朝雨忆轻尘
  • Vue + Element UI 实现权限管理系统 前端篇(十五):嵌套外部网页

    在有些时候,我们需要在我们的内容栏主区域显示外部网页。如查看服务端提供的SQL监控页面,接口文档页面等。

    朝雨忆轻尘
  • npm 常用配置

    npm config list/ls 显示配置信息 npm config list/ls -l 更详细 npm -h 显示帮助信息,建议多查看 npm -l d...

    windseek
  • 升级npm

    程序员不务正业
  • npm v7.0.0 发布 - 带来数个重大更新

    很难相信,11年前, JavaScript 社区还没有 npm 。快进到今天,npm 现在拥有数百万的开发人员和 130 万个软件包,每月下载 75B。

    ConardLi
  • NPM命令实用使用技巧总结

    我们经常使用npm init来创建项目,并按照提示输入项目信息(项目名称、作者等),但是,如果我们并不关心项目信息,并且保留默认值,那么我们对 npm 请求的每...

    winty
  • NPM实用指北

    npm作为下载node附送的大礼包,大家一定不会陌生。 然而关于npm,估计大量的只是用到npm install XXX以及npm run XXX。

    贾顺名
  • 微信小程序使用npm

    1.初始化npm:在你所建项目的根目录下,执行npm init 2.微信开发者工具开启"使用npm模块"(右上角详情-本地设置-勾选使用npm模块) 3.在项目...

    似水的流年
  • npm常用命令

    npm是什么,大家都应该很熟悉了。npm的常用命令很多,为了避免经常到npm官网查找,特将常用的npm命令整理下来。

    IMWeb前端团队

扫码关注云+社区

领取腾讯云代金券