Initial commit
RonnieSan
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