Ecute for Vue教程（1-10）

Ecute for Vue是一个Ecute社区创建的用于创建vue2程序的插件。

安装Ecute for Vue

执行命令：ecute check ecute/vue。

如果显示Success!则执行命令ecute install ecute/vue "create/cgi"

如果显示Bad downloader config.，则执行ecute update downloader 2023 "use/cgi"，等待显示“Some thing  updated”则重新执行操作。

创建项目

第一步：使用ecute create 项目名(必须小写)。

第二步：使用ecute any ecute/vue "use/cgi/use/app"。

第三步：使用cd 项目名

这样创建了项目。

项目目录结构

packages                         包文件夹，用于存放用户可访问的网页（非组件）

assests                            所有的资源文件，css、js、image都应该放在这里

npm_packages                使用npm包管理器下载的文件

main.js                             控制文件

public.js                           全局组件控制

router.js                           路由文件（非Vue-router）

connect.js                        通信文件

package.json                   打包参数

SERVER.ECUTE            开发运行环境

新功能

在Vue的基础上，Ecute for vue添加了许多新功能，例如“通信组件”，“全局组件控制”，“Ecute-Router”等。

通信组件

通信组件位于根目录的connect.js，由发起create，删除delete，更新push三部分组成。

他可以快速完成组件的通信：

/*
component A
*/
this.$connect.create("abc");
this.$connect.push("HelloWorld");
this.$connect.delete();

/*
component B
*/
this.$connect.create("abc");
this.$connect.on((da)=>{
    console.log(da);
})
this.$connect.delete();

在上面的代码中，我们创建了通信连接abc，并在通信连接中发送HelloWorld字符串，然后删除通信。

此时组件B也创建通信频道abc，如果受到了消息，就在控制台打印，然后删除通信。

假设我们在component A中先创建连接，此时component B还未被使用，那么你是否认为他们不会通信了呢？

即使compoent A在发送时，没有频道接受，发送的内容会进入到ecuteConnectTemp和ecuteConnectBackTemp内存中。在之后，如果有组件启动了，并且创建了名称相同的频道，那么会将ecuteConnectTemp中的contentEfri内容调用并返回。

全局控制

全局控制即控制语句，可以使用ecute或者javascript语法，操控浏览器原生API，原生功能等，减少封装组件繁杂的操作。

例如：

this.$public.push("showString",(str)=>{
    const a = "Hello";
    return {
        tmp: a+str
    }
})

这样就创建了全局组件showString。如果需要显示，直接使用<showString :str="World"></showString>即可，这样就输入了World。也可以直接在js中使用：console.log(this.$showString("World").tmp)，返回HelloWorld。

Ecute Router

Ecute Router是一个简单的路由控制器，在Ecute for vue中，不允许出现Vue-Router和其他的Router，只能使用Ecute Router。

$.routeMode = "hash";    //设置模式为hash

$.visit({
	path: "/abc",        //设置路由路径
	component: "src/abc.vue"     //设置组件位置
});

$.visit({
	path: "/def/{{number}}",     //允许传参
	beforeRoute: (from,to,next,back)=>{   //路由前判断
		if (to.params.has("number")){     //含有参数number
			back(to.params.number);       //返回number
			next();                       //继续
		}
	}
})

$.visit({
	path: "/ghj",
	component: "src/ghj.vue",
	name: "ghj"                            //定义名字
})
$.visit({
	fatherName: "ghj",                     //设置父组件名字
	path: "/klm",                          //实际路径是（/ghj/klm）
	component: "src/klm.vue"
})

路由支持history，hash和webapp模式，支持子路由，支持beforeRoute，afterRoute，stopRoute，activeRoute等多种功能。

VUE语言官方模式 & Ecute语言适配模式

VUE语言官方模式

VUE语言官方模式是指使用vue官方的语言标准和插件完成vue开发。

一般以组件化，工程化，项目化等方面考虑。

目前VUE官方语言模式后缀为.vue文件。

默认使用EcuteWebPack，效果和WebPack差不多。

如果要使用官方模式，请在SERVER.ECUTE中添加 - ecute run SERVER "use/chgi"。

Ecute语言适配模式

Ecute语言适配模式是在Vue中允许使用Ecute语言的语法，比如selfPrototype，StringEnObject，StringEOnBool，StringNull和allInString和Ecute语言的插件。

允许用js和ecute语言适配。

默认后缀为.e.vue文件。

默认使用EcuteTransition后再使用EcuteWebPack打包。

如果要使用适配模式，请在SERVER.ECUTE中添加 - ecute run SERVER "use/transition/use/chgi"。