Initial commit
This commit is contained in:
parent
57674a76ad
commit
2c0a878b54
|
@ -0,0 +1,61 @@
|
||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
|
||||||
|
# Runtime data
|
||||||
|
pids
|
||||||
|
*.pid
|
||||||
|
*.seed
|
||||||
|
*.pid.lock
|
||||||
|
|
||||||
|
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||||
|
lib-cov
|
||||||
|
|
||||||
|
# Coverage directory used by tools like istanbul
|
||||||
|
coverage
|
||||||
|
|
||||||
|
# nyc test coverage
|
||||||
|
.nyc_output
|
||||||
|
|
||||||
|
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
|
||||||
|
.grunt
|
||||||
|
|
||||||
|
# Bower dependency directory (https://bower.io/)
|
||||||
|
bower_components
|
||||||
|
|
||||||
|
# node-waf configuration
|
||||||
|
.lock-wscript
|
||||||
|
|
||||||
|
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
||||||
|
build/Release
|
||||||
|
|
||||||
|
# Dependency directories
|
||||||
|
node_modules/
|
||||||
|
jspm_packages/
|
||||||
|
|
||||||
|
# Typescript v1 declaration files
|
||||||
|
typings/
|
||||||
|
|
||||||
|
# Optional npm cache directory
|
||||||
|
.npm
|
||||||
|
|
||||||
|
# Optional eslint cache
|
||||||
|
.eslintcache
|
||||||
|
|
||||||
|
# Optional REPL history
|
||||||
|
.node_repl_history
|
||||||
|
|
||||||
|
# Output of 'npm pack'
|
||||||
|
*.tgz
|
||||||
|
|
||||||
|
# Yarn Integrity file
|
||||||
|
.yarn-integrity
|
||||||
|
|
||||||
|
# dotenv environment variables file
|
||||||
|
.env
|
||||||
|
|
||||||
|
# OS Files
|
||||||
|
.DS_Store
|
|
@ -0,0 +1,82 @@
|
||||||
|
# Vue Browser Component
|
||||||
|
|
||||||
|
> Template for build setup to compile Single File Components (.vue) into a standalone JS file for use in the browser
|
||||||
|
|
||||||
|
This template is useful for compiling VueJS single file components into standalone JS files for use in the browser. This is useful for devs that want to create a simple component that can be used on a site without having to build an entire app around it, similar to the way a JQuery plugin might be used. The template, script, and styles are all compiled to a single JS file.
|
||||||
|
|
||||||
|
The compiler is setup to allow you to use either LESS or SASS (scss or sass) if you want to.
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
This is a project template for [vue-cli](https://github.com/vuejs/vue-cli).
|
||||||
|
|
||||||
|
### Create a new Vue project
|
||||||
|
|
||||||
|
``` bash
|
||||||
|
# Install vue-cli if you haven't already
|
||||||
|
$ npm install -g vue-cli
|
||||||
|
|
||||||
|
# Create a new project based on this template
|
||||||
|
$ vue init ronniesan/browser-component my-project
|
||||||
|
|
||||||
|
# Navigate into your new project folder
|
||||||
|
$ cd my-project
|
||||||
|
|
||||||
|
# Install dependencies
|
||||||
|
$ npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
### Create and compile component
|
||||||
|
|
||||||
|
First, create your `.vue` file anywhere in the `src` folder.
|
||||||
|
|
||||||
|
Second, run the webpack compiler and point the `--env.file` argument to the .vue file you created (you don't need to add the extension)
|
||||||
|
``` bash
|
||||||
|
$ webpack --env.file=test
|
||||||
|
```
|
||||||
|
|
||||||
|
The webpack compiler runs in watch mode so any changes you make will update the compiled file. The compiled file will be created at the same relative path in the `dist` folder. So if you create a component at `src/my-component/my-rad-component.vue`, the compiled file will be located in `dist/my-component/my-rad-component.js`. You can now do what you want with the compiled JS file.
|
||||||
|
|
||||||
|
Make sure you add a `name` property to the script section of the component. This is what will be used as the tag for your component when you use it in your app/HTML file.
|
||||||
|
|
||||||
|
Giving your component a name property of `my-component` means you will add your component to the app as `<my-component></my-component>`.
|
||||||
|
|
||||||
|
### Use the compiled JS file
|
||||||
|
|
||||||
|
You will still need to include VueJS on your HTML page and create a root VueJS app in order to use your component.
|
||||||
|
|
||||||
|
Add a reference to the compiled component file (`.js`) in a script tag. Make sure it is added _AFTER_ you add VueJS to the page.
|
||||||
|
|
||||||
|
You can then include the component on your page using the `name` property you set as the tag.
|
||||||
|
|
||||||
|
``` html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>VueJS Component Test</title>
|
||||||
|
<script src="https://unpkg.com/vue"></script>
|
||||||
|
<script src="dist/my-component.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="wrapper">
|
||||||
|
<my-component></my-component>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
var app = new Vue({
|
||||||
|
el : '#wrapper'
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
You can try it using the sample component we included in the `src` folder...
|
||||||
|
|
||||||
|
## IMPORTANT!!!
|
||||||
|
git
|
||||||
|
* Make sure you give your component a `name` property. It will be used as the tagname for your component
|
||||||
|
|
||||||
|
## Other Notes
|
||||||
|
|
||||||
|
* Excluding styles can greatly decrease the size of your compiled JS file as it doesn't need to add logic to inject the styles on the page
|
File diff suppressed because one or more lines are too long
|
@ -0,0 +1,6 @@
|
||||||
|
// ----------------------------------------------------------------------
|
||||||
|
// BROWSER COMPONENT ENTRY FILE
|
||||||
|
// ----------------------------------------------------------------------
|
||||||
|
|
||||||
|
import Component from './src/__FILE__';
|
||||||
|
Vue.component(Component.name, Component);
|
|
@ -0,0 +1,19 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>VueJS Component Test</title>
|
||||||
|
<script src="https://unpkg.com/vue"></script>
|
||||||
|
<script src="dist/my-component.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="wrapper">
|
||||||
|
<my-component></my-component>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
var app = new Vue({
|
||||||
|
el : '#wrapper'
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
File diff suppressed because it is too large
Load Diff
|
@ -0,0 +1,51 @@
|
||||||
|
{
|
||||||
|
"name": "vue-browser-component",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "A VueJS CLI template for compiling standalone components from .vue files",
|
||||||
|
"main": "index.js",
|
||||||
|
"scripts": {
|
||||||
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
|
},
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "git+https://github.com/RonnieSan/browser-components.git"
|
||||||
|
},
|
||||||
|
"keywords": [
|
||||||
|
"vue",
|
||||||
|
"vuejs",
|
||||||
|
"browser",
|
||||||
|
"component"
|
||||||
|
],
|
||||||
|
"author": "RonnieSan",
|
||||||
|
"license": "MIT",
|
||||||
|
"bugs": {
|
||||||
|
"url": "https://github.com/RonnieSan/browser-components/issues"
|
||||||
|
},
|
||||||
|
"homepage": "https://github.com/RonnieSan/browser-components#readme",
|
||||||
|
"devDependencies": {
|
||||||
|
"autoprefixer": "^8.3.0",
|
||||||
|
"babel-core": "^6.26.0",
|
||||||
|
"babel-eslint": "^8.2.3",
|
||||||
|
"babel-loader": "^7.1.4",
|
||||||
|
"babel-plugin-syntax-dynamic-import": "^6.18.0",
|
||||||
|
"css-loader": "^0.28.11",
|
||||||
|
"extract-text-webpack-plugin": "^3.0.2",
|
||||||
|
"file-loader": "^1.1.11",
|
||||||
|
"friendly-errors-webpack-plugin": "^1.7.0",
|
||||||
|
"less": "^3.0.2",
|
||||||
|
"less-loader": "^4.1.0",
|
||||||
|
"node-sass": "^4.8.3",
|
||||||
|
"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": "^14.2.2",
|
||||||
|
"vue-style-loader": "^4.1.0",
|
||||||
|
"vue-template-compiler": "^2.5.16",
|
||||||
|
"webpack": "^4.6.0",
|
||||||
|
"webpack-cli": "^2.0.15"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"vue": "^2.5.16"
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,5 @@
|
||||||
|
module.exports = {
|
||||||
|
plugins: [
|
||||||
|
require('autoprefixer')
|
||||||
|
]
|
||||||
|
};
|
|
@ -0,0 +1,27 @@
|
||||||
|
<template>
|
||||||
|
<div @click="changeName()">
|
||||||
|
Hello, {{name}}.
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name : 'my-component',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
name : 'world'
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods : {
|
||||||
|
changeName() {
|
||||||
|
this.name = 'foobar';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
div {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,118 @@
|
||||||
|
// ----------------------------------------------------------------------
|
||||||
|
// WEBPACK CONFIGURATION
|
||||||
|
// ----------------------------------------------------------------------
|
||||||
|
|
||||||
|
// INSTRUCTIONS
|
||||||
|
// webpack --env.file="./path/to/file" --relative to the src folder
|
||||||
|
|
||||||
|
// Import dependencies
|
||||||
|
const path = require('path');
|
||||||
|
const webpack = require('webpack');
|
||||||
|
const ExtractTextPlugin = require('extract-text-webpack-plugin');
|
||||||
|
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');
|
||||||
|
const StringReplacePlugin = require("string-replace-webpack-plugin");
|
||||||
|
|
||||||
|
function resolve(dir) {
|
||||||
|
return path.resolve(__dirname, dir);
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = (env) => {
|
||||||
|
// Get the basename from the filepath
|
||||||
|
const filename = path.basename(env.file, '.vue');
|
||||||
|
const filepath = path.dirname(env.file);
|
||||||
|
|
||||||
|
return {
|
||||||
|
watch : true,
|
||||||
|
mode : 'production',
|
||||||
|
entry : {
|
||||||
|
[filename] : './entry.js'
|
||||||
|
},
|
||||||
|
output : {
|
||||||
|
filename : '[name].js',
|
||||||
|
path : path.resolve(__dirname, 'dist', filepath)
|
||||||
|
},
|
||||||
|
resolve : {
|
||||||
|
extensions : ['.vue', '.js'],
|
||||||
|
alias : {
|
||||||
|
'vue$' : resolve('node_modules/vue/dist/vue.esm.js'),
|
||||||
|
'@' : resolve('src')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
externals : {
|
||||||
|
vue : 'Vue',
|
||||||
|
lodash : 'lodash'
|
||||||
|
},
|
||||||
|
module : {
|
||||||
|
rules : [
|
||||||
|
{
|
||||||
|
test : /entry\.js$/,
|
||||||
|
loader : StringReplacePlugin.replace({
|
||||||
|
replacements: [
|
||||||
|
{
|
||||||
|
pattern: /__FILE__/ig,
|
||||||
|
replacement: function (match, p1, offset, string) {
|
||||||
|
return env.file;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]})
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test : /\.vue$/,
|
||||||
|
loader : 'vue-loader',
|
||||||
|
options : {
|
||||||
|
loaders : ExtractTextPlugin.extract({
|
||||||
|
use : {
|
||||||
|
css : [
|
||||||
|
'vue-style-loader',
|
||||||
|
'css-loader'
|
||||||
|
],
|
||||||
|
postcss : [
|
||||||
|
'vue-style-loader',
|
||||||
|
'css-loader'
|
||||||
|
],
|
||||||
|
less : [
|
||||||
|
'vue-style-loader',
|
||||||
|
'css-loader',
|
||||||
|
{
|
||||||
|
loader : 'less-loader',
|
||||||
|
options : {
|
||||||
|
paths : [
|
||||||
|
path.resolve(__dirname, 'src/less')
|
||||||
|
],
|
||||||
|
sourceMap : true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
scss : [
|
||||||
|
'vue-style-loader',
|
||||||
|
'css-loader',
|
||||||
|
'sass-loader'
|
||||||
|
],
|
||||||
|
sass : [
|
||||||
|
'vue-style-loader',
|
||||||
|
'css-loader',
|
||||||
|
'sass-loader?indentedSyntax'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
fallback: 'vue-style-loader'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test : /\.js$/,
|
||||||
|
loader : 'babel-loader',
|
||||||
|
include : [
|
||||||
|
resolve('src')
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
plugins : [
|
||||||
|
new OptimizeCSSPlugin({
|
||||||
|
cssProcessorOptions: {
|
||||||
|
safe: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
]
|
||||||
|
};
|
||||||
|
};
|
Loading…
Reference in New Issue