Giter Club home page Giter Club logo

wails-template-vue's Introduction

Wails Template Vue

Wails template based on Vue ecology

GitHub GitHub GitHub release (latest by date including pre-releases) Awesome-Wails

Table of Contents

Click me to Open/Close the directory listing

Introductions

This project is a Wails template based on the Vue ecosystem. You can use this project to quickly develop your application.

Background

The official built-in template only provides the minimum content required to develop an application. If you want to develop an application quickly, you still need to do a lot of work yourself. Based on this, this template project provides you with out-of-the-box functions, you can Get started developing your app quickly.

Graphic Demo

Demo Screenshot

Features

  • Single page routing support
  • Built-in internationalization
  • Built-in bright and dark themes
  • Built-in FontAwesome icon library
  • Integrated TailwindCSS
  • Integrate TypeScript
  • Perfect for Windows, MacOS, Linux platforms

Getting Started

New Project:

wails init -n <Your Appname> -t https://github.com/misitebao/wails-template-vue[@version]

flag description:

  • n - The name of the application to be created
  • t - Template name, supports built-in template names and third-party templates in the form of hyperlinks
  • @version - Specify the version of a specific Git Tag, if no version is specified, the code of the master branch will be used by default

Reference document:

The front-end part uses Vue Vue-Router and Vue-I18N:

Then you can refer to the official Wails document to start developing your application🤞.

Maintainer

Thanks to the maintainers of these projects:

misitebao

Contributors

Thanks to all the contributors involved in the development. Contributors

eighteenzheng daoif

Community Exchange

Chinese Community:

Part Of Users

Changelog

Check out the changelog here.

License

License MIT

wails-template-vue's People

Contributors

daoif avatar eighteenzheng avatar misitebao avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

wails-template-vue's Issues

无法正常显示图像

1. Your usage scenarios? | 您使用的场景?

Archlinux
Go 1.17.8
Nodejs 17.6.0
NPM 8.5.3

2. What did you do? | 您做了什么操作?

wails init -n test -t https://github.com/misitebao/wails-template-vue
wails dev

3. What are your problems? | 您遇到了什么问题?

运行程序后,无法正常显示LOGO.png,npm run dev 在浏览器中正常,编译运行也无法正常显示图像

4. What is your expected outcome? | 您期望的结果是怎样的?

正常显示LOGO

[Bug] wails dev 启动报错

1. Your usage scenarios? | 您使用的场景?

windows 环境下,

2. What did you do? | 您做了什么操作?

使用 wails init -n "project" -t https://github.com/misitebao/wails-template-vue 初始化后,再使用 wails devwails build 均出现报错。

3. What are your problems? | 您遇到了什么问题?

PS C:\Users\martin2877\go\src\ali0th\project> wails dev
Wails CLI v2.0.0-beta.33


Executing: go mod tidy
Executing: wails generate module
Running frontend dev watcher command: 'npm run build:watch -w js'
Building application for development...
  - Installing frontend dependencies: npm ERR! missing script: build:watch

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\martin2877\AppData\Roaming\npm-cache\_logs\2022-03-08T03_47_04_462Z-debug.log
Dev command exited!
    
    > [email protected] postinstall C:\Users\martin2877\go\src\ali0th\tradetools3\frontend
    > ((cp -f index.js.html JS/index.html) & (cp -f index.ts.html TS/index.html))& rm -rf *.html


    'cp' �����ڲ����ⲿ���Ҳ���ǿ����еij���
    ���������ļ���
    'cp' �����ڲ����ⲿ���Ҳ���ǿ����еij���
    ���������ļ���
    'rm' �����ڲ����ⲿ���Ҳ���ǿ����еij���
    ���������ļ���
    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! [email protected] postinstall: `((cp -f index.js.html JS/index.html) & (cp -f index.ts.html TS/index.html))& rm -rf *.html`
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the [email protected] postinstall script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
    npm WARN Local package.json exists, but node_modules missing, did you mean to install?

    npm ERR! A complete log of this run can be found in:
    npm ERR!     C:\Users\martin2877\AppData\Roaming\npm-cache\_logs\2022-03-08T03_47_04_926Z-debug.log


Build error - continuing to run current version
exit status 1
Watching (sub)/directory: C:\Users\martin2877\go\src\ali0th\project
Using Dev Server URL: http://localhost:34115
Using reload debounce setting of 2000 milliseconds
C:\Users\martin2877\go\src\ali0th\project>wails dev
Wails CLI v2.0.0-beta.33


Executing: go mod tidy
Executing: wails generate module
Running frontend dev watcher command: 'npm run build:watch -w js'
Building application for development...
  - Installing frontend dependencies: npm ERR! missing script: build:watch

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\martin2877\AppData\Roaming\npm-cache\_logs\2022-03-08T03_51_48_856Z-debug.log
Dev command exited!
Done.
  - Compiling frontend:
    npm ERR! missing script: build

    npm ERR! A complete log of this run can be found in:
    npm ERR!     C:\Users\martin2877\AppData\Roaming\npm-cache\_logs\2022-03-08T03_51_50_239Z-debug.log


Build error - continuing to run current version
exit status 1
Watching (sub)/directory: C:\Users\martin2877\go\src\ali0th\project
Using Dev Server URL: http://localhost:34115
Using reload debounce setting of 2000 milliseconds

4. What is your expected outcome? | 您期望的结果是怎样的?

能正常启动

[Bug]Some problem...

1. Your usage scenarios? | 您使用的场景?

PS C:\Users\vector> go version
go version go1.16.8 windows/amd64
PS C:\Users\vector> go1.17 version
go version go1.17 windows/amd64
PS C:\Users\vector> wails doctor
Wails CLI v2.0.0-beta.34

Scanning system - Please wait (this may take a long time)...Done.

System

OS: Windows 10 Pro
Version: 2009 (Build: 22000)
ID: 21H2
Go Version: go1.16.8
Platform: windows
Architecture: amd64

Dependency Package Name Status Version


WebView2 N/A Installed 100.0.1185.39
npm N/A Installed 8.5.0
*upx N/A Available
*nsis N/A Available

    • Optional Dependency

Diagnosis

Your system is ready for Wails development!
Optional package(s) installation details:

If Wails is useful to you or your company, please consider sponsoring the project:
https://github.com/sponsors/leaanthony

PS C:\Users\vector>

2. What did you do? | 您做了什么操作?

PS C:\Users\vector\mydata\code\go_wails\myFProject> go1.17 version
go version go1.17 windows/amd64
PS C:\Users\vector\mydata\code\go_wails\myFProject> go version
go version go1.16.8 windows/amd64
PS C:\Users\vector\mydata\code\go_wails\myFProject> go1.17 mod tidy
PS C:\Users\vector\mydata\code\go_wails\myFProject> go mod tidy
go mod tidy: go.mod file indicates go 1.17, but maximum supported version is 1.16
PS C:\Users\vector\mydata\code\go_wails\myFProject> wails dev
Wails CLI v2.0.0-beta.34

Executing: go mod tidy
go mod tidy: go.mod file indicates go 1.17, but maximum supported version is 1.16

exit status 1

ERROR: exit status 1

If Wails is useful to you or your company, please consider sponsoring the project:
https://github.com/sponsors/leaanthony

PS C:\Users\vector\mydata\code\go_wails\myFProject> wails dev -compiler "go1.17"
Wails CLI v2.0.0-beta.34

Executing: go mod tidy
go mod tidy: go.mod file indicates go 1.17, but maximum supported version is 1.16

exit status 1

ERROR: exit status 1

If Wails is useful to you or your company, please consider sponsoring the project:
https://github.com/sponsors/leaanthony

PS C:\Users\vector\mydata\code\go_wails\myFProject>

===>go.mod========
module wails-vue

go 1.17

require github.com/wailsapp/wails/v2 v2.0.0-beta.34

require (
github.com/andybalholm/brotli v1.0.4 // indirect
github.com/davecgh/go-spew v1.1.1 // indirect
github.com/fasthttp/websocket v1.5.0 // indirect
github.com/gabriel-vasile/mimetype v1.4.0 // indirect
github.com/go-ole/go-ole v1.2.6 // indirect
github.com/gofiber/fiber/v2 v2.31.0 // indirect
github.com/gofiber/websocket/v2 v2.0.20 // indirect
github.com/google/uuid v1.3.0 // indirect
github.com/imdario/mergo v0.3.12 // indirect
github.com/jchv/go-winloader v0.0.0-20210711035445-715c2860da7e // indirect
github.com/klauspost/compress v1.15.1 // indirect
github.com/leaanthony/go-ansi-parser v1.4.0 // indirect
github.com/leaanthony/go-common-file-dialog v1.0.3 // indirect
github.com/leaanthony/go-webview2 v1.0.3-0.20220314105146-f44268990abe // indirect
github.com/leaanthony/gosod v1.0.3 // indirect
github.com/leaanthony/slicer v1.6.0 // indirect
github.com/leaanthony/typescriptify-golang-structs v0.1.7 // indirect
github.com/leaanthony/winc v0.0.0-20220323084916-ea5df694ec1f // indirect
github.com/pkg/browser v0.0.0-20210911075715-681adbf594b8 // indirect
github.com/pkg/errors v0.9.1 // indirect
github.com/rivo/uniseg v0.2.0 // indirect
github.com/savsgio/gotils v0.0.0-20220401102855-e56b59f40436 // indirect
github.com/shirou/gopsutil v3.21.11+incompatible
github.com/tkrajina/go-reflector v0.5.6 // indirect
github.com/valyala/bytebufferpool v1.0.0 // indirect
github.com/valyala/fasthttp v1.35.0 // indirect
github.com/valyala/tcplisten v1.0.0 // indirect
golang.org/x/net v0.0.0-20220412020605-290c469a71a5 // indirect
golang.org/x/sys v0.0.0-20220412211240-33da011f77ad // indirect
)

require (
github.com/tklauser/go-sysconf v0.3.10 // indirect
github.com/tklauser/numcpus v0.4.0 // indirect
github.com/yusufpapurcu/wmi v1.2.2 // indirect
)

// replace github.com/wailsapp/wails/v2 v2.0.0-beta.34 => C:\Users\vector\go\pkg\mod\github.com\wailsapp\wails\[email protected]

切换环境变量后,可以成功
C:\Users\vector\mydata\code\go_wails\myFProject>go version
go version go1.17 windows/amd64

C:\Users\vector\mydata\code\go_wails\myFProject>wails doctor
Wails CLI v2.0.0-beta.34

Scanning system - Please wait (this may take a long time)...Done.

System

OS: Windows 10 Pro
Version: 2009 (Build: 22000)
ID: 21H2
Go Version: go1.16.8
Platform: windows
Architecture: amd64

Dependency Package Name Status Version


WebView2 N/A Installed 100.0.1185.39
npm N/A Installed 8.5.0
*upx N/A Available
*nsis N/A Available

    • Optional Dependency

Diagnosis

Your system is ready for Wails development!
Optional package(s) installation details:

If Wails is useful to you or your company, please consider sponsoring the project:
https://github.com/sponsors/leaanthony

C:\Users\vector\mydata\code\go_wails\myFProject>wails dev
Wails CLI v2.0.0-beta.34

Executing: go mod tidy
Executing: wails generate module
Building application for development...

  • Installing frontend dependencies: Done.
  • Compiling frontend: Done.
  • Generating bundle assets: Done.
  • Compiling application: Done.

Running frontend dev watcher command: 'npm run build:watch -w js'
INF | Serving assets from disk: C:\Users\vector\mydata\code\go_wails\myFProject\frontend\dist
DEB | WebView2 Runtime Version '100.0.1185.39' installed. Minimum version required: 91.0.992.28.
DEB | [DevWebServer] Serving application at http://localhost:34115
Watching (sub)/directory: C:\Users\vector\mydata\code\go_wails\myFProject
Using Dev Server URL: http://localhost:34115
Using reload debounce setting of 1500 milliseconds
DEB | [DesktopAssetServer] Loading file: assets/index.js
DEB | [DesktopAssetServer] Loading file: assets/index.css
前端Dom加载完毕

[email protected] build:watch
vite build --watch --emptyOutDir

3. What are your problems? | 您遇到了什么问题?

  1. -compiler “go编译器版本”
    是否需要本地版本必须是go1.17才能正常使用
  2. wails doctor
    检查系统环境,在go版本切换到1.17后,检测出Go Version: go1.16.8;

4. What is your expected outcome? | 您期望的结果是怎样的?

  1. 在低版本时可以在本地安装高版本的go,通过-compiler指定后能成功运行
  2. 将本地go版本升级后 使用wails dctor 命令应检测到升级后的版本

[Feature]Use workspace mode to add typescript options

1. Your usage scenarios? | 您使用的场景?

Hope to support typescript development.

2. What is your expected outcome? | 您期望的结果是怎样的?

It is hoped that the template has built-in JS and TS modes, which can be configured and selected by the developer.

[Bug] Desktop and browser view differs on MacOS

1. Your usage scenarios? | 您使用的场景?

Run initially created project.

2. What did you do? | 您做了什么操作?

Launched command wails dev

3. What are your problems? | 您遇到了什么问题?

On MacOS desktop view differs from browser view. Desktop view styles seems like broken.

Desktop view:
image

Browser view:
image

4. What is your expected outcome? | 您期望的结果是怎样的?

I expect to have same view on desktop as in browser.

修改了vue 模板文件后,页面显示404

1. Your usage scenarios? | 您使用的场景?

使用wails dev 后编译 可以显示

2. What did you do? | 您做了什么操作?

然后我修改了vue 模板文件后,页面显示404

3. What are your problems? | 您遇到了什么问题?

image

4. What is your expected outcome? | 您期望的结果是怎样的?

希望修改后,实时更新前端样式

[Bug]Error on build: can't find vue.runtime.esm-bundler.js

1. Your usage scenarios? | 您使用的场景?

Windows Home x32, building a simple app for in-house use.

2. What did you do? | 您做了什么操作?

Created a new project using:
wails init -n pospay -t https://github.com/codydbentley/wails-vite-vue-ts

cd into project, run wails build

3. What are your problems? | 您遇到了什么问题?

Build fails with this error:
`
PS Z:\dev\pospay> wails build
Wails CLI v2.0.0-beta.34

App Type: desktop
Platforms: windows/386
Compiler: C:\Program Files\Go\bin\go.exe
Build Mode: Production
Skip Frontend: false
Compress: false
Package: true
Clean Build Dir: false
LDFlags: ""
Tags: []

Building target: windows/386

  • Installing frontend dependencies: Done.

  • Compiling frontend:

    [email protected] build
    vite build

    vite v2.6.2 building for production...
    transforming...
    ✓ 3 modules transformed.

    [vite:load-fallback] Could not load /vmware-host/Shared Folders/dev/pospay/frontend/node_modules/vue/dist/vue.runtime.esm-bundler.js (imported by src\main.ts): ENOENT: no such file or directory, open 'Z:\vmware-host\Shared Folders\dev\pospay\frontend\node_modules\vue\dist\vue.runtime.esm-bundler.js'
    error during build:
    Error: Could not load /vmware-host/Shared Folders/dev/pospay/frontend/node_modules/vue/dist/vue.runtime.esm-bundler.js (imported by src\main.ts): ENOENT: no such file or directory, open 'Z:\vmware-host\Shared Folders\dev\pospay\frontend\node_modules\vue\dist\vue.runtime.esm-bundler.js'

Error: exit status 1

ERROR: exit status 1

`

4. What is your expected outcome? | 您期望的结果是怎样的?

Successful build for Windows

[Question] 请问wails dev时能否直接调试frontend?

1. Your usage scenarios? | 您使用的场景?

2. What did you do? | 您做了什么操作?

3. What are your problems? | 您遇到了什么问题?

wails dev时修改frontend代码(譬如css),无法直接看到期望结果

4. What is your expected outcome? | 您期望的结果是怎样的?

修改frontend代码,直接看到期望结果

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.