权限管理系统--前端篇(一)搭建前端开发环境

时间:2022-08-15 16:19:38

1、技术基础
(1)vue2.0:优秀的MVVM设计模式下的JS框架;
(2)vue-router:vue.js路由管理模块;
(3)vuex:vue.js状态管理模块;
(4)ElementUI:饿了么提供的基于Vue.js的UI框架;
2、前端环境安装
NodeJS(npm自带)
Visual Studio Code(轻量级前端IDE)
(1)检查环境:
npm -v
(2)升级旧版本的npm:
sudo npm install npm -g #linux
npm install npm -g  # windows
(3)安装webpack
npm install webpack -g
(4)安装vue-cli(安装 vue 脚手架项目初始化工具 vue-cli,-g 表示全局安装)
npm install vue-cli -g
(5)npm*仓库换成国内的淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
(6)创建项目
vue init webpack kiven-ui
一路根据提示输入项目信息,等待项目生成。

权限管理系统--前端篇(一)搭建前端开发环境

选择自己手工安装依赖,结果如下:

权限管理系统--前端篇(一)搭建前端开发环境

进入项目,执行如下命令完成依赖包的安装,依赖包都是在项目的node_modules文件夹下。

cnpm install element-ui font-awesome js-cookie mockjs vue-i18n vuex axios sass-loader node-sass --save-dev
(7)运行项目
npm run dev
命令执行之后,如果显示 “I Your application is runing here ....”,就表示启动成功了。
(8)访问项目
浏览器访问对应地址,例如: http://localhost:8080,会出现 vue 的介绍页面。
到此,我们的项目脚手架就建立起来了。