一、安装VSCode扩展插件

打开VSCode编辑器并在扩展面板输入 "EaseScript" 选择并安装此扩展来支持语法高亮和类型提示。 目前仅支持 VSCode

二、 安装脚手架

npm install es-installer -g

三、在终端输入命令

esi --init

执行以上命令后出现下面的初始化选项，按提示操作后执行安装。

? 项目名: xxx        
? 构建路径: xxx
? 语法插件: es-vue, es-thinkphp
? 选择VUE版本 vue@3
? 安装富文本组件(Ckeditor): no  
? 立即安装依赖: (Use arrow keys)
> yes
 no

插件如何选择？

开发web单页应用、web组件。选择 es-vue

开发web多页应用、服务端预渲染、页面静态化。选择 es-nuxt

如果需要同时开发后端接口。 组合选择 es-thinkphp

三、启动应用

当安装完成后，切入到工程目录输入以下命令：

npm run dev  启动开发模式

npm run build  启动构建生产模式

四、目录结构

使用脚手架创建完项目后会根据选择的插件生成目录结构，大致如下：

. 当前工程目录
--es.config.js EaseScript的配置文件
--build 构建输出目录
--src 源文件目录，文件中定义的命名空间相对于此目录
----api 后端服务源文件目录
----pages 前端视图页面目录 
----assets 前端资产目录
----layouts 布局组件目录 (es-nuxt)
----middleware 中间件文件目录 (es-nuxt)
----plugins 插件文件目录 (es-nuxt)
----locales 语言文件目录
----stores 全局状态文件目录
----App.es 应用入口文件

五、应用入口文件

如果是 es-nuxt 插件，不需要手动挂载实例应用入口。nuxt 会自动加载App文件并挂载到对应的DOM节点上。

package;
import web.Application;
class App extends Application{
    @Main
    static main(){
        const obj = new App();
        const app = document.createElement('div')
        document.body.append( app );
        obj.mount(app);
    }
    @Override
    render(){
        return <div>Hello, world!</div>
    }
}