Fix vue3-js template (#727)

* fix(cli): add babel conversion and vuex

* docs: perfect Readme

* fix(cli): modify vue3-js template routing mode

* ref(cli): remove package.json.back file.

README.md

@@ -18,7 +18,7 @@
 
 ## Internationalization
 
-English| [简体中文](README.zh_CN.md)
+English | [简体中文](README.zh_CN.md)
 
 The traditional method of providing web interfaces to Go programs is via a built-in web server. Wails offers a different approach: it provides the ability to wrap both Go code and a web frontend into a single binary. Tools are provided to make this easy for you by handling project creation, compilation and bundling. All you have to do is get creative!
 

cmd/templates/vue3-js/frontend/README.md

@@ -1,4 +1,4 @@
-# vue3-js
+# vue-js
 
 ## Project setup
 ```
@@ -15,5 +15,10 @@ npm run serve
 npm run build
 ```
 
+### Lints and fixes files
+```
+npm run lint
+```
+
 ### Customize configuration
 See [Configuration Reference](https://cli.vuejs.org/config/).

cmd/templates/vue3-js/frontend/babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

cmd/templates/vue3-js/frontend/package.json.back

@@ -1,24 +0,0 @@
-{
-  "name": "vue3-js",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build"
-  },
-  "dependencies": {
-    "@wailsapp/runtime": "^1.1.1",
-    "vue": "^3.0.0",
-    "vue-router": "^4.0.0-0"
-  },
-  "devDependencies": {
-    "@vue/cli-plugin-router": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
-    "@vue/compiler-sfc": "^3.0.0"
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not dead"
-  ]
-}

cmd/templates/vue3-js/frontend/package.json.template

@@ -4,17 +4,42 @@
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build"
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
   },
   "dependencies": {
     "@wailsapp/runtime": "^1.1.1",
+    "core-js": "^3.6.5",
     "vue": "^3.0.0",
-    "vue-router": "^4.0.0-0"
+    "vue-router": "^4.0.0-0",
+    "vuex": "^4.0.0-0"
   },
   "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-plugin-router": "~4.5.0",
+    "@vue/cli-plugin-vuex": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
-    "@vue/compiler-sfc": "^3.0.0"
+    "@vue/compiler-sfc": "^3.0.0",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^7.0.0",
+    "stylus": "^0.54.7",
+    "stylus-loader": "^3.0.2"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/vue3-essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {}
   },
   "browserslist": [
     "> 1%",

cmd/templates/vue3-js/frontend/src/App.vue

@@ -1,14 +1,12 @@
 <template>
-  <div id="app">
+  <div id="nav">
-    <div id="nav">
+    <router-link to="/">Home</router-link> |
-      <router-link to="/">Home</router-link> |
+    <router-link to="/about">About</router-link>
-      <router-link to="/about">About</router-link>
-    </div>
-    <router-view />
   </div>
+  <router-view />
 </template>
 
-<style>
+<style lang="stylus">
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;

cmd/templates/vue3-js/frontend/src/components/HelloWorld.vue

@@ -6,11 +6,11 @@
 
 <script>
 export default {
-  name: 'HelloWorld',
+  name: "HelloWorld",
   props: {
-    msg: String
+    msg: String,
-  }
+  },
-}
+};
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

cmd/templates/vue3-js/frontend/src/main.js

@@ -1,10 +1,14 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
+import store from './store'
+
+// import wails runtime
 import * as Wails from '@wailsapp/runtime';
 
 Wails.Init(() => {
   createApp(App)
+    .use(store)
     .use(router)
-    .mount('#app');
+    .mount('#app')
-});
+})

cmd/templates/vue3-js/frontend/src/router/index.js

@@ -1,7 +1,8 @@
-import { createRouter, createWebHistory } from 'vue-router'
+import { createRouter, createMemoryHistory } from 'vue-router'
 import Home from '../views/Home.vue'
 import About from '../views/About.vue'
 
+
 const routes = [
   {
     path: '/',
@@ -11,15 +12,13 @@ const routes = [
   {
     path: '/about',
     name: 'About',
-    // route level code-splitting
+    // You can only use pre-loading to add routes, not the on-demand loading method.
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
     component: About
   }
 ]
 
 const router = createRouter({
-  history: createWebHistory(process.env.BASE_URL),
+  history: createMemoryHistory(),
   routes
 })
 

cmd/templates/vue3-js/frontend/src/store/index.js

@@ -0,0 +1,12 @@
+import { createStore } from 'vuex'
+
+export default createStore({
+  state: {
+  },
+  mutations: {
+  },
+  actions: {
+  },
+  modules: {
+  }
+})

cmd/templates/vue3-js/frontend/src/views/Home.vue

@@ -25,8 +25,8 @@ export default {
     const getMessage = () => {
       window.backend
         .basic()
-        .then((result) => {
+        .then((res) => {
-          message.value = result;
+          message.value = res;
         })
         .catch((err) => {
           console.log(err);

cmd/templates/vue3-js/template.json

@@ -1,8 +1,8 @@
 {
   "name": "Vue3 JS",
   "version": "1.0.0",
-  "shortdescription": "A template based on Vue 3, Vue-router, and Webpack5",
+  "shortdescription": "A template based on Vue 3, Vue-router, Vuex, and Webpack5",
-  "description": "A template based on Vue 3, Vue-router, and Webpack5",
+  "description": "A template based on Vue 3, Vue-router, Vuex, and Webpack5",
   "install": "npm install",
   "build": "npm run build",
   "author": "Misitebao <i@misitebao.com>",