vuejs-templates / browserify-simple Goto Github PK

View Code? Open in Web Editor NEW

112.0 112.0 34.0 11 KB

A simple Browserify + vueify setup for quick prototyping.

HTML 11.84% Vue 82.32% JavaScript 5.83%

browserify-simple's People

Contributors

Stargazers

Watchers

browserify-simple's Issues

No matches found.

I'm really sorry if this is a stupid question but when I try and run vue init browserify-simple#1.0 my-project it comes back saying "no matches found: browserify-simple#1.0". Is it me or is there something missing?

Thank you in advance.

'This' object inside vue instance methods is undefined

Hi !

I have also tested on the browserify vuejs-templates and i have the same error.
I followed the README and have set up a new project using vue-cli browserify, but when i'm trying to reach the 'this' object inside vue instance method (created, beforeCompile...), it always return undefined into the console.

Here is an example when i modify the script part of the App.vue file (it's the only one that i modified).

export default {
  data () {
    return {
      // note: changing this line won't causes changes
      // with hot-reload because the reloaded component
      // preserves its current state and we are modifying
      // its initial state.
      msg: 'Hello Vue!'
    }
  },
  created: () => {
    console.log('created', this);
  },
  beforeCompile: () => {
    console.log('beforeCompile', this);
  },
  compiled: () => {
    console.log('compiled', this);
  },
  ready: () => {
    console.log('ready', this);
  }
}

On each log, this is undefined.

I'm am missing something ?

Configuration: Macbook Pro on Chrome v50.0.2661.75 (64-bit)

Not compiling SASS in .vue files

I'm migrating an app from Vue 1.x to Vue 2.0.1.
In the old app I had the following in the vue.config.jsfile:

module.exports = {
  sass: {
  	includePaths: ['./src/sass'],
  	indentedSyntax: true
  }
}

So that in a .vue file I could write SASS using the indented syntax.
However, in Vue 2.0.1, using any of the two Browserify templates, writing SASS in the style tag throws an error, and that led me to reformat all of my CSS in every component from the indented syntax to the normal SCSS syntax.

In component.vue

<template>
  <h3>Some Component</h3>
</template>


<script>
  export default {
    name: 'SomeComponent'		
  }
</script>


<style lang="sass">
  h3
    color: red
</style>

And the error is
VM416:27 Error: Invalid CSS after "": expected 1 selector or at-rule, was "h3" while parsing file: [filename]

Is there a way to make it work?

Thanks in advance.

Does it recommend using vue with browserify now?

Initiating in current directory instructions

Hi,

I wanted to make a PR for this, but I don't know how, if possible without modifying vue-cli.

Anyway, the problem is, it is showing:

 To get started:
   
 cd dir_name

Even when I initiate it in the current directory.

How to support multi browserify bundles?

as titled

Import component is not working

Component template should contain exactly one root element:                                                                            

Menu                                                                                                                                   

Error: Vue template compilation failed while parsing file: C:\Workspace\vue\my-project\src\Menu.vue                                    
    at compileTemplate (C:\Workspace\vue\my-project\node_modules\vueify\lib\template-compiler.js:10:11)                                
    at C:\Workspace\vue\my-project\node_modules\vueify\lib\compiler.js:243:24                                                          
    at process._tickCallback (internal/process/next_tick.js:103:7)                                                                     
Error: Cannot find module './Menu' from 'C:\Workspace\vue\my-project\src'                                                              
Error: Cannot find module 'Menu' from 'C:\Workspace\vue\my-project\src'

Template appears broken

Site loads but nothing displaying in browser

also this:
Error: Cannot find module 'vue-hot-reload-api' from ..

Uses runtime-only build of Vue, even though webpack-simple uses the full version by default

I'm not complaining that the built file from browserify-simple is 27kb (~33%) lighter than the one from webpack-simple, but since most of that is vital vue functionality it's a bit counterproductive!

Reproduce

vue init browserify-simple vue
cd vue
npm i
npm run build

==> src/App.js <==

import Vue from 'vue'
import App from './App.vue'

Vue.component('my-comp', App);
console.log(App);
debugger;

export default {
    v: Vue,
}

==> src/main.js <==

import App from './App.js'

if (true) {
    window.test = App;
}

==> index.html <==

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>vue</title>
  </head>
  <body>
    <div id="wrap"><my-comp></my-comp></div>
    <script src="dist/build.js"></script>
    <script>
    new window.test.v({el:'#wrap'});
    </script>
  </body>
</html>

The resulting dist/build.js is 59kb, and you get WSOD. Doing the exact same with webpack-simple instead results in an 86kb file and the typical vue demo app

dev server doesn't work

I followed the instructions listed. after npm run dev I see following in console:

watchify -vd -p browserify-hmr -e src/main.js -o dist/build.js & http-server -c 1 -a localhost

15:57:52 GMT-0700 (Mountain Standard Time) [HMR] Emitting updates
15:57:52 GMT-0700 (Mountain Standard Time) [HMR] Listening on localhost:3123
1561475 bytes written to dist/build.js (7.98 seconds)

opening http://localhost:8080/ didnt work, so i tried displayed port http://localhost:3123/.

it simply displays 'Cannot GET /' with the following in browser console:

Failed to load resource: the server responded with a status of 404 (Not Found)

I tried also http://localhost:3123/index.html etc with same errors.

Any ideas? the reproduction steps are literally readme.md. npm version is 2.14.12

Syntax Error creating project

whats wrong here?

➜  ~  vue init browserify-simple demo      

/usr/lib/node_modules/vue-cli/node_modules/metalsmith/lib/index.js:190
Metalsmith.prototype.build = unyield(function*(){
                                             ^
SyntaxError: Unexpected token *
    at Module._compile (module.js:439:25)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object.<anonymous> (/usr/lib/node_modules/vue-cli/node_modules/metalsmith/index.js:6:18)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
➜  ~  npm -v
3.7.2
➜  ~  uname -a
Linux max-OptiPlex-790 3.19.0-58-generic #64~14.04.1-Ubuntu SMP Fri Mar 18 19:05:43 UTC 2016 x86_64 x86_64 x86_64 GNU/Linux

npm run dev issue.

Hello,
I found an issue when you are ready to run npm run dev, the page that should be http://localhost:[port] is instead http://localhost//localhost:8080 that of course give us a fail page.

Then if you change in the URL for the correct http://localhost:8080 its work fine.

What should change in the package.json to fix that?

Thanks!

Notes: Macbook Pro 15 late 2015 and Macbook Pro 13 early 2015. Both MacOs Sierra 10.12.4

I need vue+vue-route+vuex

I need vue+vue-route+vuex example

vuejs-templates / browserify-simple Goto Github PK

browserify-simple's People

Contributors

Stargazers

Watchers

Forkers

browserify-simple's Issues

Reproduce

Recommend Projects

Recommend Topics

Recommend Org