开发体验初探

一、创建应用

1. 以模板项目创建应用

点击查看源码

git clone https://github.com/hanliang-tech/es-vue-template-2.0.git

2. 安装依赖库

进入es-vue-template 项目根目录下面执行如下命令：

点击查看源码

npm install

安装错误时，尝试使用以下命令

点击查看源码

npm install --legacy-peer-deps

二、运行应用

1. 进入es-vue-template 项目根目录下面执行如下命令：

打开两个cmd窗口分别执行

点击查看源码

npm run dev

点击查看源码

npm run debug

2. 打开快应用运行环境查看模板应用

点击屏幕的右侧的圆形（加载测试代码）按钮。

三、热重载 (Hot Reload)

修改代码体验快应用代码热重载。

1. 修改项目路径下es-vue-template-2.0/src/views/index.vue文件， 把 Hello World! 修改为 第一个快应用。
2. 保存代码

源文件：

点击查看源码

export default {
    name: 'index',
    mixins: [ESPage],
    data() {
        return {
            text: 'Hello World!'
        };
    },
};

修改后的文件：

点击查看源码

export default {
    name: 'index',
    mixins: [ESPage],
    data() {
        return {
            text: '第一个快应用'
        };
    },
};

查看效果：