搭建服务端

获取模板工程

​ 我们分别提供了基于clzy-web-starter-simple模块和clzy-web-starter-crud模块的模板工程，根据实际的需求，来选择模板工程。

• 基于clzy-web-starter-crud搭建新项目，需提前获取com.clzy:clzy-web-crud-archetype:1.0.1 依赖。

  mvn dependency:get -DremoteRepositories=rdc-releases::::https://packages.aliyun.com/maven/repository/2265477-release-sYlu8d -Dartifact=com.clzy:clzy-web-crud-archetype:1.0.1
  

• 基于clzy-web-starter-simple搭建新项目，需提前获取com.clzy:clzy-web-simple-archetype:1.0.1 依赖。

  mvn dependency:get -DremoteRepositories=rdc-releases::::https://packages.aliyun.com/maven/repository/2265477-release-sYlu8d -Dartifact=com.clzy:clzy-web-simple-archetype:1.0.1
  

• 基于clzy-web-starter-sso搭建新项目，需提前获取com.clzy:clzy-web-sso-archetype:1.0.1 依赖。

  mvn dependency:get -DremoteRepositories=rdc-releases::::https://packages.aliyun.com/maven/repository/2265477-release-sYlu8d -Dartifact=com.clzy:clzy-web-sso-archetype:1.0.1
  

搭建新项目

• 方法一:Maven命令
  打开cmd或者shell窗口，运行以下命令。其中~/IdeaProjects/为需要创建项目的目录，读者可以选择自定义。其中-DarchetypeArtifactId参数根据开发者的不同需求，可选为：clzy-web-crud-archetype、clzy-web-simple-archetype

  cd ~/IdeaProjects/
  mvn archetype:generate -DarchetypeCatalog=internal,remote -DarchetypeRepository=rdc-releases::::https://packages.aliyun.com/maven/repository/2265477-release-sYlu8d -DarchetypeGroupId=com.clzy -DarchetypeArtifactId=clzy-web-crud-archetype -DarchetypeVersion=1.0.1 -DgroupId=com.clzy.geo -DartifactId=demo-crud-test -Dversion=1.0.0-SNAPSHOT -Dclzy-web-version=1.0.9-SNAPSHOT
  

  其中：-DgroupId=com.clzy.geo、-DartifactId=demo-test、-Dversion=1.0.0-SNAPSHOT均为需创建项目的信息。-Dclzy-web-version=1.0.9-SNAPSHOT为项目依赖clzy-web的版本

• 方法二:使用Idea开发工具

  使用Idea依次打开New Project>Maven>Create from archetype>Add Archetype，在弹窗中输入以下Maven坐标信息：

    GroupId: com.clzy
    ArtifactId: clzy-web-crud-archetype
    Version: 1.0.1
    Repository: https://packages.aliyun.com/maven/repository/2265477-release-sYlu8d
  

  项目搭建完成后，初始化的目录结构如下图所示：

其中pom.xml为项目的Maven描述文件，site-starter模块为项目的服务配置、启动运行模块，相关配置文件在src/main/resources下，启动入口在FrameworkApplication中

搭建前端

切换npm源

框架代码中使用的一些插件和组件发布在公司的阿里云效仓库中，所以需要先将npm的源切换到本公司的阿里云效npm 仓库，按照以下步骤进行切换：

1. 登录阿里云效, 使用钉钉扫码登录

https://codeup.aliyun.com/

2. 进入npm 仓库指南，按照上面指示完成仓库切换和登录（执行 “拉取” 菜单下面的 “步骤一“ 即可）

https://packages.aliyun.com/npm/npm-registry/guide

拉取框架代码

框架代码目前分为两个版本，默认master分支为 不包含cljs-sso统一认证登录的版本，sso分支为 包含 cljs-sso统一认证登录的版本，请根据需要切换。使用git工具拉取代码，仓库地址为：

https://codeup.aliyun.com/clzy/public-lib/web-admin.git

拉取框架代码后，自行修改项目名称和版本号等相关信息。

安装依赖

cd 你的项目
npm install

环境配置

clzy-web项目初期配置了 .env、.env.development、 .env.production 三个环境文件。.env是所有环境都会生效，.env.development 中的变量会在开发环境生效，同理 .env.production 会在生产环境生效，如需添加其他环境的配置文件，请自行添加，以 .env 开头

1. VUE_APP_BASEURL
   VUE_APP_BASEURL 是后台服务api地址，根据项目情况修改调整

2. VUE_APP_AUTH_URL
   VUE_APP_AUTH_URL 是统一认证服务地址，仅仅在 统一认证登录版 中存在.

3. VUE_APP_SSO_REALM
   VUE_APP_SSO_REALM 是统一认证域，用于统一认证使用，仅仅在 统一认证登录版 中存在。

4. VUE_APP_ID
   VUE_APP_ID 是当前应用的AppId，用于统一认证使用，仅仅在 统一认证登录版 中存在。

VUE_APP_SSO_REALM 和 VUE_APP_ID 需要从统一认证中心去创建应用获取。

4. VUE_APP_TITLE
   VUE_APP_TITLE 设置为网站的标题，它仅用于在
   public/index.html 模板中，替换对应的标题。它决定了最终入口 html 文件的
   <title></title> 的内容。每页的标题是在路由配置中设置 meta 属性中的 title 属性

启动项目

npm run dev

框架介绍

clzy-web 前端框架介绍

制作镜像

// TODO 待完善