Skip to content
🎨 All in One Prototyping Tool For Vue Developers.
Branch: master
Clone or download
danshuu Merge pull request #90 from danshuu/master
Export functionality done
Latest commit d740a71 Apr 10, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build updated README and added Linux support Mar 22, 2019
public
src adding package and writing to location Apr 9, 2019
tests/unit Setup jest/vue-test-utils testing and added highlighting active route… Mar 20, 2019
.browserslistrc
.eslintrc.js fixed merge conflicts Mar 7, 2019
.gitignore added electron-build-config file and s3 deployment Mar 21, 2019
.prettierrc.js added prettier and eslint configs Feb 28, 2019
README.md edited README Mar 27, 2019
babel.config.js fixed delete and implemented html nesting Mar 13, 2019
electron-builder.json
jest.config.js Setup jest/vue-test-utils testing and added highlighting active route… Mar 20, 2019
package.json added windows support and additional icons Mar 24, 2019
postcss.config.js

README.md

PreVue

PRs Welcome License: MIT

All in One Prototyping Tool For Vue Developers

From Component Architecture to Code Exporting

PreVue allows the user to design/visualize their component architecture by allowing users to :

  1. Create components and preview their code

  2. Set up different views/routes

  3. Establish parent-child component relationships

  4. See their application architecture in tree format

  5. Export the component architecture as a Vue application created with the default Vue CLI settings.

Getting Started


Download for MacOS, Linux, or Windows

Support for Windows now here!
  • Mac users only: for now you might need to go to your security settings to allow the app run on your system as we do not have an Apple license yet.

If you find any issues, file issue

How to use


Adding Components

  • Double click on the application icon

  • Create components by entering a name and clicking the html elements you need

  • Clicked elements will be shown on the right sidebar

  • Drag them around to change the order!

  • Once you're satisfied, click the button to add a component and it will show up in the center stage, with the ability to resize!

Editing Components

  • Edit components by double clicking for the edit modal to show
  • Add additional elements to a component with a live preview of the component code
  • Drag elements on the right side bar to nest elements
  • Establish parent-child component relationships via a dropdown menu when creating or editing components

Adding Routes/Projects

  • Create different routes for your application by entering a new route name and pressing enter
  • Any components created on a certain route will be automatically saved to that route
  • Play with multiple projects by clicking the add project icon!
  • Display a tree view of entire application component architecture when the tree icon on navbar is clicked

Tree View of Application Architecture

Saving/Opening/Exporting Projects

  • If you ever need to save your current project, click the save project icon to save a json to your local directory
  • Next time the application is started, open the project again by clicking the open project icon!
  • Once you're satisfied, click the export project icon to export your awesome project as new Vue application!

Code Exporting

Below is the generated directory structure of the Vue application that is created when you export your design.

src/
  assets/
  App.vue
  components/
    UserCreatedComponent1.vue
    UserCreatedComponent2.vue
    ...
  views/
    HomeView.vue
    UserCreatedRouteComponent1.vue
    UserCreatedRouteComponent2.vue
    ...

Editor Hotkeys:

  • cmd/ctrl + s: save
  • cmd/ctrl + o: open
  • cmd/ctrl + n: new project tab
  • cmd/ctrl + w: close project tab

Running your own local version


PreVue was developed using node runtime @ v10.15.0. You should make sure you at least have that version installed to ensure full compatibility. You can download the latest version of node here

Setup

Clone this repo

git clone https://github.com/teamprevue/PreVue.git

Install dependencies

npm i

Run electron app

npm run electron:serve

Built With


Contributing


PreVue is currently in beta release. We encourage you to submit issues for any bugs or ideas for enhancements. Also feel free to fork this repo and submit pull requests to contribute as well.

Authors


License


This project is licensed under the MIT License - see the LICENSE.md file for details

You can’t perform that action at this time.