Hello world

Hello world

开始写第一个页面

/src/templates/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. 使用Sass预编译

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

.page-hello-world{

// ……

}

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

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

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

几个问题:

1)如何在 Sass 文件中使用 Admui 定义的变量呢?在 Sass 文件的头部引入定义变量的文件就可以了。如下所示:

@import '../../../themes/global/scss/vars';

.page-hello-world{
……
}

2)如何自定义 Admui 的 sass 全局变量?Admui中如下几处地方可以定义 sass 的全局变量,您可以找到/src/themes/global/scss/_vars-customs.scss,并根据自己的需要添加。

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 源码包中,包含了大量的示例(根据套餐的不同可能会有所差异),您可以参考这些示例来开发自己的页面。