Make sure to follow the project on GitHub to stay up to date with the latest releases, or contribute to the broject by opening an issue or making a pull-request!
7 |
8 |
9 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # vue-typescript-seed
2 | A starter project for [vue-typescript](https://github.com/itsFrank/vue-typescript) using webpack and bootstrap
3 |
4 | This seed repo comes with all you need to start building a vuejs project using typescript.
5 |
6 | Packages included:
7 | - vue
8 | - vue-router
9 | - webpack (and all the loaders and utilities necessary)
10 | - bootstrap 3
11 | - jquery 2.2.4
12 |
13 | Scripts:
14 |
15 | `npm run dev` - will start a local dev server at localhost:8080
16 |
17 | `npm run build` - will build your project into the /dist folder
18 |
19 | `npm run clean` - will delete the dist folder
20 |
21 | Setup: run `npm install`
22 |
23 | Clone it and get started!
24 |
25 |
--------------------------------------------------------------------------------
/src/components/navbar/navbar.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | <%= webpackConfig.metadata.title %>
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 | loading...
23 |
24 |
25 | <% if (webpackConfig.metadata.isDevServer) { %>
26 |
27 |
28 | <% } %>
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/src/components/navbar/navbar.ts:
--------------------------------------------------------------------------------
1 | import { VueComponent, Prop, Watch } from 'vue-typescript'
2 |
3 | //This is overkill but typescript is great! :)
4 | class Link {
5 | name:string;
6 | path:string;
7 |
8 | constructor(name:string, path:string){
9 | this.name = name;
10 | this.path = path;
11 | }
12 | }
13 |
14 | @VueComponent({
15 | template: require('./navbar.html')
16 | })
17 | export class Navbar extends Vue {
18 |
19 | @Prop
20 | inverted:boolean = true; //default value
21 |
22 | @Prop
23 | object:{default:string} = {default: 'Default object property!'}; //objects as default values don't need to be wrapped into functions
24 |
25 | links:Link[] = [
26 | new Link('Home', '/'),
27 | new Link('About', '/about')
28 | ]
29 |
30 | @Watch('$route.path')
31 | pathChanged(){
32 | console.log('Changed current path to: ' + this.$route.path);
33 | }
34 |
35 | ready(){
36 | console.log(this.object.default);
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import * as Vue from 'vue'
2 | import * as VueRouter from 'vue-router'
3 |
4 | import './vendor' //bootstrap
5 | require('./main.scss'); //global css
6 |
7 | /*
8 | For components that will be used in html (such as navbar),
9 | all you need to do is import the file somewhere in your code,
10 | they are automatically registered when the file is loaded.
11 | However, if you import the class (ex: import { Navbar } from './navbar'),
12 | you will have to call new Navbar() somewhere as well. You would want
13 | to do that if you are defining a components{} object in the @VueComponent
14 | options parameter.
15 | */
16 | import './components/navbar/navbar'
17 |
18 | import { HomeComponent } from './views/home/home'
19 | import { AboutComponent } from './views/about/about'
20 |
21 | Vue.use(VueRouter);
22 |
23 | var app = Vue.extend({});
24 |
25 | var router = new VueRouter();
26 |
27 | router.map({
28 | '/' : {
29 | component: HomeComponent
30 | },
31 | '/about' : {
32 | component: AboutComponent
33 | }
34 | });
35 |
36 | router.start(app, '#app-main');
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2016 Francis O'Brien
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
23 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vue-typescript-seed",
3 | "version": "1.0.0",
4 | "description": "A starter project for vue typescript using webpack and bootstrap",
5 | "main": "index.js",
6 | "scripts": {
7 | "dev": "webpack-dev-server --inline --progress --profile --colors --watch --display-error-details --display-cached --content-base src/",
8 | "clean": "rm -rf dist",
9 | "build": "webpack",
10 | "postinstall": "typings install"
11 | },
12 | "author": "Francis O'Brien",
13 | "license": "MIT",
14 | "devDependencies": {
15 | "copy-webpack-plugin": "^3.0.1",
16 | "css-loader": "^0.23.1",
17 | "file-loader": "^0.9.0",
18 | "html-webpack-plugin": "^2.21.0",
19 | "json-loader": "^0.5.4",
20 | "node-sass": "^3.8.0",
21 | "raw-loader": "^0.5.1",
22 | "resolve-url-loader": "^1.4.4",
23 | "sass-loader": "^4.0.0",
24 | "style-loader": "^0.13.1",
25 | "ts-loader": "^0.8.2",
26 | "typescript": "^1.8.10",
27 | "typings": "^1.3.1",
28 | "url-loader": "^0.5.7",
29 | "webpack": "^1.13.1",
30 | "webpack-dev-server": "^1.14.1"
31 | },
32 | "dependencies": {
33 | "bootstrap": "^3.3.6",
34 | "jquery": "^2.2.4",
35 | "vue": "^1.0.26",
36 | "vue-router": "^0.7.13",
37 | "vue-typescript": "^0.5.2"
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Helper: root(), and rootDir() are defined at the bottom
3 | */
4 | var path = require('path');
5 | // Webpack Plugins
6 | var ProvidePlugin = require('webpack/lib/ProvidePlugin');
7 | var DefinePlugin = require('webpack/lib/DefinePlugin');
8 | var CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
9 | var CopyWebpackPlugin = require('copy-webpack-plugin');
10 | var HtmlWebpackPlugin = require('html-webpack-plugin');
11 | var ENV = process.env.ENV = process.env.NODE_ENV = 'development';
12 | const autoprefixer = require('autoprefixer');
13 |
14 | var metadata = {
15 | title: 'vue-typescript ts sample',
16 | host: 'localhost',
17 | port: 8080,
18 | ENV: ENV
19 | };
20 | /*
21 | * Config
22 | */
23 | module.exports = {
24 | // static data for index.html
25 | metadata: metadata,
26 | // for faster builds use 'eval'
27 | devtool: 'source-map', //to point console errors to ts files instead of compiled js
28 | debug: true,
29 |
30 | entry: [
31 | './src/main.ts' //app main file
32 | ],
33 |
34 | // Config for our build files
35 | output: {
36 | path: root('dist'),
37 | filename: '[name].bundle.js',
38 | sourceMapFilename: '[name].map',
39 | chunkFilename: '[id].chunk.js'
40 | },
41 |
42 | resolve: {
43 | // ensure loader extensions match
44 | extensions: ['', '.ts', '.js', '.json', '.css', '.scss', '.sass', '.html'], // <-- include .scss
45 | fallback: [path.join(__dirname, './node_modules')] //default to node_modules when not found
46 | },
47 | resolveLoader: {
48 | fallback: [path.join(__dirname, './node_modules')]
49 | },
50 | module: {
51 | loaders: [
52 | // Support for .ts files.
53 | {
54 | test: /\.ts$/,
55 | loader: 'ts-loader',
56 | exclude: [/\.(spec|e2e)\.ts$/]
57 | },
58 |
59 | // Support for *.json files.
60 | { test: /\.json$/, loader: 'json-loader' },
61 |
62 | // Support for CSS as raw text
63 | { test: /\.css$/, loaders: ['style', 'css'] },
64 |
65 | // support for .html as raw text
66 | { test: /\.html$/, loader: 'raw-loader', exclude: [ root('src/index.html') ] },
67 |
68 | // if you add a loader include the resolve file extension above
69 |
70 | { test: /\.(scss|sass)$/, loaders: ['style', 'css', 'sass'] },
71 |
72 | { test: /\.(woff2?|ttf|eot|svg)$/, loader: 'url?limit=10000' },
73 |
74 | // Bootstrap 4
75 | { test: /bootstrap\/dist\/js\/umd\//, loader: 'imports?jQuery=jquery' }
76 | ]
77 | },
78 |
79 | // sassResources: path.resolve(__dirname, "./node_modules/bootstrap/scss"),
80 |
81 | postcss: [autoprefixer], // <--- postcss
82 |
83 | plugins: [
84 | new CommonsChunkPlugin({ name: 'vendor', filename: 'vendor.bundle.js', minChunks: Infinity }),
85 | // static assets
86 | new CopyWebpackPlugin([{ from: 'src/assets', to: 'assets' }]),
87 | // generating html
88 | new HtmlWebpackPlugin({ template: 'src/index.html' }),
89 | // replace
90 | new DefinePlugin({
91 | 'process.env': {
92 | 'ENV': JSON.stringify(metadata.ENV),
93 | 'NODE_ENV': JSON.stringify(metadata.ENV)
94 | }
95 | }),
96 |
97 | //Make jquery and Vue globally available without the need to import them
98 | new ProvidePlugin({
99 | jQuery: 'jquery',
100 | $: 'jquery',
101 | jquery: 'jquery',
102 | Vue: 'vue'
103 | })
104 | ],
105 |
106 | // our Webpack Development Server config
107 | devServer: {
108 | port: metadata.port,
109 | host: metadata.host,
110 | historyApiFallback: true,
111 | watchOptions: { aggregateTimeout: 300, poll: 1000 }
112 | }
113 | };
114 |
115 | // Helper functions
116 |
117 | function root(args) {
118 | args = Array.prototype.slice.call(arguments, 0);
119 | return path.join.apply(path, [__dirname].concat(args));
120 | }
121 |
122 | function rootNode(args) {
123 | args = Array.prototype.slice.call(arguments, 0);
124 | return root.apply(path, ['node_modules'].concat(args));
125 | }
--------------------------------------------------------------------------------