Hello world

Hello world

开始写第一个页面

在/src/pages/examples/pages/general/下，我们为您准备了一个空白页面（blank.html），您可以复制blank.html到需要的地方，重命名为hello-world.html，然后修改代码中的.page-blank，为.page-hello-world。并根据自己的需要修改title，.page-hello-world的内容。

Notes: 如果您是 build 后用于生产环境的版本，在/html/examples/pages/general/下。

为页面添加样式

1. 使用LESS预编译

并在/src/assets/less/下合适的位置新建一个hello-world.less文件，并插入以下代码：

.page-hello-world{
    
    // ……
    
}

less 文件最终会自动编译成 CSS 文件，CSS 文件存放在/public/css/对应的文件夹下。您可以直接在页面中引用。

LESS 文件会在项目运行的时候编译。我们也提供能了增量编译和浏览器自动刷新保证在项目运行中编辑 LESS 文件时进行编译。关于如何运行项目，请参考构建工具。

如果您所购买的产中不包含Gulp自动构建的部分，您可以可以直接在/public/css/下新建 css 文件并添加代码，或者通过在线升级的方式购买自动构建部分。升级

几个问题：

1）如何在 LESS 文件中使用 Admui 定义的 LESS 变量呢？在 LESS 文件的头部引入定义变量的文件就可以了。如下所示：

@import '../../../themes/classic/global/less/vars';
 
.page-hello-world{
    ……
}

2）如何自定义 Admui 的 LESS 全局变量？Admui中如下几处地方可以定义 LESS 的全局变量，您可以找到/src/themes/(主题文件夹)/global/less/vars-customs.less，并根据自己的需要添加。

2. 使用CSS

在/public/css/文件夹下合适的位置新建一个hello-world.css文件，并插入以下代码：

.page-hello-world{
    
    /* …… */
    
}

完成后直接在页面中引用这个 CSS 文件即可。

为页面添加JS

在/src/assets/js/文件夹下合适的位置新建一个hello-world.js文件，并插入以下代码：

console.log('hello world');

JS文件最终会自动输出到/public/js/对应的文件夹下。您可以直接在页面中引用。

如果您所购买的产中不包含Gulp自动构建的部分，您可以可以直接在/public/js/下新建 js 文件并添加代码，或者通过在线升级的方式购买自动构建部分。升级

进阶

在我们提供给您的 Admui 源码包中，包含了大量的示例（根据套餐的不同可能会有所差异），您可以参考这些示例来开发自己的页面。