EchoCow

念念不忘,必有回响

念念不忘,必有回响
  menu
94 文章
78 评论
76474 浏览
1 当前访客
ღゝ◡╹)ノ❤️

slplat 新的前端框架环境搭建


在这之前

你需要从 github 上拷贝最新的代码,新的前端框架目录结构如下:

+-- SLPlat/
|   +-- SLPlat-UI-AdminLTR/
|   |   +-- app/
|   |   |   +-- documentation/
|   |   |   +-- i18n/
|   |   |   +-- img/
|   |   +-- naster/
|   |   |   +-- jade/
|   |   |   +-- baseInfo/
|   |   |   |   +-- pages/
|   |   |   |   |   +-- user/
|   |   |   +-- js/
|   |   |   |   +-- custom/
|   |   |   |   |   +-- baseInfo/
|   |   |   |   +-- modules
|   |   |   |   |   +-- controllers/
|   |   |   |   |   +-- directives/
|   |   |   |   |   +-- services/
|   |   |   |   |   +-- custom/
|   |   |   |   +-- less/
|   |   |   |   |   +-- app/
|   |   |   |   |   +-- bootstrap/
|   |   |   |   |   +-- themes/
|   |   |   |   +-- gulpfile.js
|   |   |   |   +-- package.json
|   |   |   |   +-- bower.json
|   |   +-- server/
|   |   |   +-- *.json

技术选型

  • 包管理工具: npm
  • 依赖管理工具: bower
  • 自动化构建工具: gulp
  • HTML 模板引擎: jade
  • CSS 预处理: less
  • 主要框架:AngularJSbootstrapjquery 以及多种插件

开始

安装 npm

如果您之前安装过且版本(当前版本8.11)不是太低,可以跳过此步骤

npm 只需要你安装 node.js 即可。

官网: https://nodejs.org/en/

当然,为你准备好了网盘链接,包括 mac 以及 linux

链接:https://pan.baidu.com/s/10U8Im1ilIlWFNhpPhlGjGg 密码:nvql

如果你是 Windows,在安装时请选择全部组件,包括勾选Add to Path。

安装完成后,请查看当然版本来确认是否安装成功

C:\Users\EchoLZY>node -v
v8.11.1

如果你是在 Mac 或 Linux 环境下,请打开终端,然后输入node -v,你应该看到如下输出:

$ node -v
v8.11.1

提示

安装时过程可能很慢,部分插件需要翻墙下载,当然,如果不能科学上网的同学,为你准备了 npm 国内镜像源,请自行根据需求替换即可。

npm 淘宝镜像

根据不同需求执行命令即可

1.临时使用(每次都需要)

npm --registry https://registry.npm.taobao.org install express

2.持久使用(一次即可)

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

配置后可通过下面方式来验证是否成功

npm info express

3.通过cnpm使用(独立出来)

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

使用

cnpm install express

本项目需要使用第一二种。

安装 bower

如果您之前安装过,可以跳过此步骤,我的版本 1.8.4

在安装好 npm 后,直接通过命令安装即可

npm install -g bower

安装 gulp

如果您之前安装过,可以跳过此步骤,我的版本 3.9.1

在安装好 npm 后,直接通过命令安装即可

npm install -g gulp

环境搭建

请使用 cmd 或者 powershell 切换到当前项目的 master 目录

如果是 cmd

cd E:\!work\java\workspace\SLPlat\SLPlat-UI\SLPlat-UI-AdminLTE\master
E:

如果是 powershell 或者 linux 系统 (mac 不知)

cd E:\!work\java\workspace\SLPlat\SLPlat-UI\SLPlat-UI-AdminLTE\master

下载项目安装包

使用命令即可,不可使用 cnpm

npm install

处理依赖关系

bower install

重要! 这里由于其中一个包出现了问题,无法直接下载,所以我们需要手动导入包

链接:https://pan.baidu.com/s/1EdbvuXCEF9W_SBRrNnnvXg 密码:1bzv,下载完成解压后,覆盖自动生成的 master/bower_components 内的 jquery-classyloader 文件夹

开启自动化构建工具

gulp

这样就完成了前端的自动化构建环境搭建,此时应该生成了完整的项目结构如下

+-- app/
|   +-- css/
|   +-- documentation/
|   +-- img/
|   +-- js/
|   +-- i18n/
|   +-- pages/
|   +-- vendor/
|   +-- views/
+-- master/
|   +-- jade/
|   |   +-- pages/
|   |   +-- views/
|   +-- js/
|   |   +-- modules/
|   |   |   +-- controllers/
|   |   |   +-- directives/
|   |   |   +-- services/
|   |   +-- custom/
|   +-- less/
|   |   +-- app/
|   |   +-- bootstrap/
|   |   +-- themes/
|   +-- gulpfile.js
|   +-- package.json
|   +-- bower.json
+-- server/
|   +-- *.json
+-- vendor/
+-- index.html

当你修改 master 下的源文件时,他将会自动监听以及生成新的前端文件。

更多详情请看 app/documentation/readme.md 文档,我已翻译并添加了自己的理解。

念念不忘,必有回响。

如果觉得文章不错或者帮到了您,帮忙点点下面广告呗~谢谢啦~

评论