Add typescript
Clement Bois
parent
1819213b4e
commit
e21f3c0640
|
|
@ -1,3 +1,5 @@
|
|||
*dist
|
||||
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ This template is useful for compiling VueJS single file components (SFC) into st
|
|||
|
||||
The compiler is setup to allow you to use either LESS or SASS (scss or sass) if you want to
|
||||
|
||||
As well as pug
|
||||
As well as pug and **typescript** !
|
||||
|
||||
## Usage
|
||||
|
||||
|
|
@ -37,11 +37,11 @@ Create a `.vue` file anywhere in the `src` folder of the project you just create
|
|||
Then, run the webpack compiler and point the `--env.file` argument to the .vue file you created (you don't need to add the extension). The path should be relative to the `src` folder, so if you created your `.vue` file in the `src` folder, the path would just be the name of the file. For example, if the file is located in `src/sub-folder/my-component.vue`, the path you would enter for the `--env.file` argument would be `sub-folder/my-component`.
|
||||
|
||||
``` bash
|
||||
$ npm run build path/to/my-component
|
||||
$ npm run build path/to/my-component.vue
|
||||
```
|
||||
|
||||
``` bash
|
||||
$ npm run serve path/to/my-component
|
||||
$ npm run watch path/to/my-component.vue
|
||||
```
|
||||
|
||||
The webpack compiler runs in watch mode so any changes you make will update the compiled file. Whenever you make changes to you component, as long as the webpack compiler is running, the changes will be re-compiled and saved over the same output file. The compiled output file will be created at the same relative path in the `dist` folder that it was located in the `src` folder. So if you create a component at `src/some-sub-folder/my-rad-component.vue`, the compiled file will be located in `dist/some-sub-folder/my-rad-component.js`.
|
||||
|
|
|
|||
|
|
@ -2,5 +2,5 @@
|
|||
// BROWSER COMPONENT ENTRY FILE
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
import Component from './src/__FILE__';
|
||||
Vue.component(Component.name, Component);
|
||||
import Component from './src/__FILE__'
|
||||
Vue.component((Component.options || Component).name, Component)
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,16 +1,16 @@
|
|||
{
|
||||
"name": "vue-browser-component",
|
||||
"version": "1.0.0",
|
||||
"version": "1.1.0",
|
||||
"description": "A VueJS CLI template for compiling standalone components from .vue files",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"build": "webpack --env.file",
|
||||
"serve": "webpack -d --watch --env.file",
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
"build:dev": "webpack -d --env.file",
|
||||
"watch": "webpack -d --watch --env.file"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/RonnieSan/browser-components.git"
|
||||
"url": "git+https://git.wadza.fr/me/vue-sfc-compiler.git"
|
||||
},
|
||||
"keywords": [
|
||||
"vue",
|
||||
|
|
@ -18,39 +18,45 @@
|
|||
"browser",
|
||||
"component"
|
||||
],
|
||||
"author": "RonnieSan",
|
||||
"author": "Shu",
|
||||
"contributors": ["RonnieSan"],
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/RonnieSan/browser-components/issues"
|
||||
"url": "https://github.com/sheychen290/vue-sfc-compiler/issues"
|
||||
},
|
||||
"homepage": "https://github.com/RonnieSan/browser-components#readme",
|
||||
"homepage": "https://git.wadza.fr/me/vue-sfc-compiler",
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.2.0",
|
||||
"@babel/core": "^7.2.2",
|
||||
"@babel/cli": "^7.4.4",
|
||||
"@babel/core": "^7.4.5",
|
||||
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
|
||||
"@babel/preset-env": "^7.2.0",
|
||||
"autoprefixer": "^8.3.0",
|
||||
"babel-loader": "^8.0.5",
|
||||
"@babel/preset-env": "^7.4.5",
|
||||
"autoprefixer": "^8.6.5",
|
||||
"babel-loader": "^8.0.6",
|
||||
"core-js": "^2.6.9",
|
||||
"css-loader": "^0.28.11",
|
||||
"file-loader": "^1.1.11",
|
||||
"friendly-errors-webpack-plugin": "^1.7.0",
|
||||
"less": "^3.0.2",
|
||||
"less": "^3.9.0",
|
||||
"less-loader": "^4.1.0",
|
||||
"node-sass": "^4.11.0",
|
||||
"optimize-css-assets-webpack-plugin": "^4.0.0",
|
||||
"sass-loader": "^7.0.1",
|
||||
"string-replace-webpack-plugin": "^0.1.3",
|
||||
"url-loader": "^1.0.1",
|
||||
"vue-loader": "^15.4.2",
|
||||
"vue-style-loader": "^4.1.2",
|
||||
"vue-template-compiler": "^2.5.22",
|
||||
"webpack": "^4.6.0",
|
||||
"webpack-cli": "^3.2.1",
|
||||
"node-sass": "^4.12.0",
|
||||
"optimize-css-assets-webpack-plugin": "^4.0.3",
|
||||
"pug": "^2.0.3",
|
||||
"pug-plain-loader": "^1.0.0"
|
||||
"pug-plain-loader": "^1.0.0",
|
||||
"sass-loader": "^7.1.0",
|
||||
"string-replace-webpack-plugin": "^0.1.3",
|
||||
"ts-loader": "^6.0.3",
|
||||
"typescript": "^3.5.2",
|
||||
"url-loader": "^1.1.2",
|
||||
"vue-loader": "^15.7.0",
|
||||
"vue-style-loader": "^4.1.2",
|
||||
"vue-template-compiler": "^2.6.10",
|
||||
"webpack": "^4.34.0",
|
||||
"webpack-cli": "^3.3.4"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue": "^2.5.22"
|
||||
"vue": "^2.6.10",
|
||||
"vue-class-component": "^7.1.0",
|
||||
"vue-property-decorator": "^8.2.1"
|
||||
},
|
||||
"babel": {
|
||||
"presets": [
|
||||
|
|
@ -61,9 +67,5 @@
|
|||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
"browserslist": [
|
||||
"last 2 versions",
|
||||
"ie >= 11"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,24 @@
|
|||
<template lang="pug">
|
||||
div(@click="changeName()").
|
||||
Hello, {{ name }}.
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue'
|
||||
import Component from 'vue-class-component'
|
||||
|
||||
@Component({ name: 'example' })
|
||||
export default class Example extends Vue {
|
||||
name = 'world'
|
||||
|
||||
changeName() {
|
||||
this.name = 'foobar'
|
||||
console.log(this.name)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
div
|
||||
font-weight: bold
|
||||
</style>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"strict": true,
|
||||
"module": "es2015",
|
||||
"moduleResolution": "node",
|
||||
"experimentalDecorators": true
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
declare module "*.vue" {
|
||||
import Vue from "vue";
|
||||
export default Vue;
|
||||
}
|
||||
|
|
@ -30,7 +30,7 @@ module.exports = (env) => {
|
|||
path : path.resolve(__dirname, 'dist', filepath)
|
||||
},
|
||||
resolve : {
|
||||
extensions : ['.vue', '.js'],
|
||||
extensions : ['.ts', '.vue', '.js'],
|
||||
alias : {
|
||||
'vue$' : resolve('node_modules/vue/dist/vue.min.js'),
|
||||
'@' : resolve('src')
|
||||
|
|
@ -58,6 +58,14 @@ module.exports = (env) => {
|
|||
test : /\.vue$/,
|
||||
loader : 'vue-loader'
|
||||
},
|
||||
{
|
||||
test: /\.tsx?$/,
|
||||
loader: 'ts-loader',
|
||||
exclude: /node_modules/,
|
||||
options: {
|
||||
appendTsSuffixTo: [/\.vue$/],
|
||||
}
|
||||
},
|
||||
{
|
||||
test : /\.js$/,
|
||||
loader : 'babel-loader',
|
||||
|
|
@ -111,6 +119,13 @@ module.exports = (env) => {
|
|||
}
|
||||
]
|
||||
},
|
||||
devServer: {
|
||||
historyApiFallback: true,
|
||||
noInfo: true
|
||||
},
|
||||
performance: {
|
||||
hints: false
|
||||
},
|
||||
plugins : [
|
||||
new VueLoaderPlugin(),
|
||||
new OptimizeCSSPlugin({
|
||||
|
|
|
|||
Loading…
Reference in New Issue