Migrating create-project to WinJS​

This document serves only as a basic guide for migrating@winner-fed/create-project to WinJS. For real project migration, you may also need to read our documentation to learn more aboutplugins andconfiguration.

Actually, migrating a@winner-fed/create-project project to WinJS is relatively straightforward. The main thing to pay attention to is the differences in some default behaviors. Next, we'll migrate a@winner-fed/create-project initial project to WinJS through the following steps.

Dependency Management​

Modify dependencies inpackage.json and update project startup commands. For more information about win CLI, checkour documentation.

{  "scripts": {-    "dev": "npm run serve",+    "dev": "win dev",-    "build": "node build/index.js --no-module",+    "build": "win build",  },  "dependencies": {+    "@winner-fed/winjs": "^0.5.1"  },+ "devDependencies": {+    "@winner-fed/preset-vue": "^0.5.1",+    "@winner-fed/plugins": "^0.5.1"+ }}

Modifying the Root Component​

The entry point for@winner-fed/create-project issrc/App.vue. In WinJS, there's no real exposed main application entry, but we can perform the same operations inlayouts.

Transfer the logic fromsrc/App.vue tosrc/layouts/index.vue. After completing the operation, your code should look like:

<template>  <div class="pages">    <ul>      <li>        <router-link to="/">Home</router-link>      </li>      <li>        <router-link to="/docs">Docs</router-link>      </li>    </ul>    <keep-alive v-if="$route.meta.keepAlive">      <router-view />    </keep-alive>    <router-view v-if="!$route.meta.keepAlive" />  </div></template><style scoped lang="less">.navs {  ul {    padding:0;    list-style:none;    display:flex;  }  li {    margin-right:1em;  }}</style>

Moving Page Files​

Move page components to thesrc/pages directory.

HTML Template​

Remove thepublic/index.html file.

WinJS has deprecatedindex.html. You can directly compose the final HTML through exposed related APIs. For details, refer tohere.

Starting the Project​

Executewin dev, and the project will start athttp://localhost:8000/. If you're accustomed to using port3000, you can set it throughenvironment variables. Now the project should look consistent with the effect before migration.