【技术教程】【微码开发】微码开发入门 - Vue 模板开发

在打开微码vue模板后会自动安装项目依赖：

安装完依赖后，资源管理器的 “WECODE TOOLS”会出现菜单，先来看下vue模板的结构：

123456789101112131415161718192021222324252627282930313233|—— build│   ├── common                         // JS API公共文件目录          ├── /html/                   // html文件          ├── /js/                     // JS API脚本文件          ├── /css/                    // 公共组件库样式文件          ├── /assets/                 // 资源目录               ├── /images/            // 公共图片资源               ├── /media/             // 公共媒体资源│   └── apps                           // 开发的We码应用包文件目录          ├── /123456789012345/        // 应用名称               ├── /production/        // 应用的构建环境。打包时，cli 会打包该文件夹下的文件                    ├── /html/         // 应用的html文件                    ├── /js/           // 应用的js文件                    ├── /css/          // 应用的css样式文件├── package.json                       // node相关环境的配置文件├── public                             // 静态资源目录，内容会直接拷贝到打包目录中├── scripts                            // 编译相关├── src                                // 源代码目录│   ├── common                         // 公共资源，包括 css/js  等│   ├── components                     // 组件│   ├── config                         // 配置项，包括 api 等│   ├── i18n                           // 国际化│       ├── en_US                      // 英文配置信息│       └── zh_CN                      // 中文配置信息│   ├── router                         // 路由│   ├── store                          // store，页面数据按模块存储│   ├── utils                          // 提供一些小工具│   ├── views                          // 页面│   ├── App.vue                        // 主页│   ├── index.html                     // 主页 html│   ├── main.js                        // webpack打包入口├── test                               // jest测试集└── vue.config.js                      // vue-cli3.0 配置文件

点击“本地调试”，将会开始编译运行项目，最后将在默认浏览器打开首页 ( src/views/Home.vue )。

到这里，项目已经跑起来了，可以开始加入我们想要的功能了。

我们来看一下Home.vue：

123456789101112131415161718192021222324252627282930313233343536373839  .App {    padding: 10px;  }

这个就是标准的vue开发模板了，从上到下依次是模板、脚本、样式，这里我们就不问为什么了，记住每个页面都用这样的结构就可以了，之前说过react是通过state来存储页面数据的，那么vue呢，我们看到内置的data方法return的内容就是页面数据了，可以在模板中使用。

1data() {   return {}; }

接下来我们来实现一个简易版的新闻功能，它有一个列表页、详情页，在详情页会有一个分享功能，用于分享到好友或者群

接下来设计主页，也就是列表页，src/views/Home.vue 。

首先来改下页面标题，在created函数中进行操作：

1created() {   window.HWH5.navTitle({ title: '示例新闻列表' }); }

加入一个导航栏，这里使用官方提供的UI组件（https://open.welink.huaweicloud.com/wecode/docs/dev/ui_cloud/navbar/navbar.html?v=1547690385） 。

把   article{ padding: 10px; }  article .info{ font-size: 0.28rem; font-weight: normal; margin: 0 0 0.12rem 0; color: #888888; }  article p{ text-indent: 2em; margin: 0.6rem 0; }  article img{ width: 100%;}  .share-btn{ display: inline-block; background: #ff6f6f; width: 2rem; height: 2rem; text-align: center; color: #fff; font-size: 2rem; line-height: 2rem; padding: 5px; border-radius: 50%; position: fixed; right: 10px; bottom: 50px; }

看下效果:

在 src/routes/News/index.js 中给列表加上链接，指向详情页：

123456789101112                     {        console.log('分享发生异常', error);      })    }  }}

然后给分享按钮绑定这个方法：

1   +