vue-play doesn't work with projects generated with vue-cli

[weiying-chen]

Steps:

1. Install vue-cli and do vue init webpack play-test (and do npm install)
2. Install vue-play: npm install -D vue-play vue-play-cli
3. Add vue-play to package.json: "play": "vue-play start ./src/play --webpack-config ./build/webpack.dev.conf.js"
4. run vue-play: npm run play

You'll see a long error like:

ERROR in   TypeError: Cannot read property '0' of undefined

  - ExternalModuleFactoryPlugin.js:19
    [play-test]/[webpack]/lib/ExternalModuleFactoryPlugin.js:19:40

(...)

[sky790312]

I have the same problem...
I try to set up by manual but not work.
Then I try this post:
https://dweldon.silvrback.com/vue-play
Still can't work. Is that any issue with new vue-cli version ..?

[jason90929]

+1

[dweldon]

See #44 for a related discussion.

@sky790312 I haven't updated the article yet. Please see my updated directions here:

https://gist.github.com/dweldon/b6ab44b4f53ffdfad3a77b3157f0833c

[sky790312]

I can run it! Thanks @dweldon !

[sky790312]

@dweldon
Now I face some problem with css preprocessor.
I have import global.styl in my project. How do I use it in vue play ..?

[dweldon]

@sky790312 You can import your global styles from src/play/index.js. This is shown in step 3 where I do: import 'css'; - I actually have a src/css/index.js which then imports all of my stylus files.

[sky790312]

@dweldon You mean import stylus files into that index.js file? How do you do that?

Following is my project structure. How do I use it?
https://i.stack.imgur.com/Lkvve.png

[dweldon]

@sky790312 It's exactly what it sounds like. Webpack is magic. My src/css/index.js looks like this:

import './base.styl';
import './forms.styl';
import './tooltips.styl';

If you want all of your styl files included you could add a file like: src/assets/css/index.js:

import ./buttons.styl
import ./fonts.styl
import ./global.styl
...

If you only want global.styl you could import that directly from your src/play/index.js.

[sky790312]

@dweldon I can run 5000 port now, but I still face some problem as :

Refused to load the font 'data:font/woff;base64,d09GRgABAAAAAKD5ABIAAAABjrQAAAAAAACfoAAAAVkAAAKCAAAAA…mFlx52L/Hg0KNrUdBzxUtnxwVGtpuQjwMjvPeMMO8ZD8s9D4CtrqN//S9M2ek/FckP9vfjlA==' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback.

Is there something wrong with my webpack.play.config setting..?

My global.stylus has:

@import url('../node_modules/bootstrap/dist/css/bootstrap.min.css')
@import url('../node_modules/font-awesome/css/font-awesome.min.css')
@import './variables.styl'
@import './fonts.styl'
@import './buttons.styl'
@import './primary-theme.styl'
@import './info-theme.styl'

[sky790312]

@dweldon I also facing the problem with i18n, my components is combine with vue-18n...
I use like this:

import { play } from 'vue-play'
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import IModal2 from '../../src/components/IModal2'

Vue.component('i-modal-2', IModal2)
Vue.use(VueI18n)

but it still can't understand $t(xxx) in my component..