https://github.com/foxbunny/vue-ts-support
https://github.com/foxbunny/vue-ts-support
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/foxbunny/vue-ts-support
- Owner: foxbunny
- Created: 2017-03-26T21:02:51.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2017-03-28T19:50:54.000Z (about 8 years ago)
- Last Synced: 2025-01-26T01:32:43.566Z (5 months ago)
- Language: JavaScript
- Size: 65.4 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vue-ts-support
This package provides support tooling for managing a
[Vue.js](https://vuejs.org/) project build. It is a quick way to get off the
ground, but also a very opinionated one.## Status
This project is in early development. It's currently a bit rough around the
edges and may not provide the smooth experience offered by `create-react-app`
and similar projects. It is published in the hope that it will be useful to
you, without any warranties or promises.## Goals and ideas
The following are the guiding principles behind vue-ts-support:
- One dependency
- Easy configuration
- Easy to fork and extend
- Production-readyThis project is heavily influenced by
[create-react-app](https://github.com/facebookincubator/create-react-app) and
[create-cycle-app](https://github.com/cyclejs-community/create-cycle-app).## Supported technologies
This is a list of supported technologies:
- Webpack 2
- TypeScript (linting and type checking)
- Single-file components
- Autoprefixer
- Jest unit testing## Installation
Before you can use `vue-ts-support` scripts, you will need to install
[Yarn](https://www.npmjs.com/package/yarn). You don't need to use it but the
script that scaffolds new projects will call it.npm install --global yarn
To install `vue-ts-support` package itself, you can use either yarn:
yarn global add vue-ts-support
or npm:
npm install --global vue-ts-support
## Usage
Create a directory where you want to init your Vue.js project. In the directory,
run the following command:create-vue-project
This will run `npm init` in the directory and install `vue-ts-support` package
as a development dependency. It will also copy the `vue-ts-support` template
into the application directory, and create a `.gitignore` file.Once the script is done, you will see a message showing a handful of commands
you can run to get started.## Customization
`vue-ts-support` can be customized using options in the `package.json` file.
All options for customizing `vue-ts-support` are under the `vueTS` key:
{
....
"vueTS": {
.... <-- options go here
}
}### Webpack configuration
Webpack configuration can be customized to some extent. Before you do that,
however, you will want to get familiar with
[webpack-blocks](https://github.com/andywer/webpack-blocks).To customize webpack setup, you will define a module that exports an array of
additional blocks. You will then point to this module in your `package.json`
file using the `webpackExtra` key. For example:{
....
"vueTS": {
"webpackExtra": "webpack.extra.js"
}
}### Development server API proxy URL
To add a proxy target URL, add a `proxy` key to your `package.json`. For
example:{
....
"vueTS": {
"proxy": "http://localhost:3000/"
}
}This URL will be available as `/api/` (not customizable) to your front end code.
### Development server port
The port on which the development server will listen can be changed using the
`port` option in your `package.json`. By default, this port is 8080.{
....
"vueTS": {
"port": 8000
}
}**NOTE:** Port number is a numeric value, so do not quote it.
## TODO
This is a list of items that are going to be in the final 1.0.0 release.
- [ ] Allow creating projects in locations other than the current directory
- [ ] More complete Jest support (e.g., .vue files)
- [ ] Option to include vue-router and vuex out of the box
- [ ] Option to scaffold i18n support
- [ ] Scripts to update and/or enhance existing projects
- [ ] Simple code generator scripts (e.g., generate .vue skeletons)
- [ ] Eject command
- [ ] Support CSS preprocessors
- [ ] Babel fallback for those that don't want TypeScript
- [ ] JSX support for those that need it