VueReact

2.0,, 20161101

3.0,webpack3.X 20170831

---

SPA

ES6(7)+.vue | .jsx

()

TIPS

|--- public // 
    |--- components
	|--- css
	|--- fonts
	|--- images
	|--- js
	|--- sass
	|--- views
|--- src
    |--- components
    |--- css
	|--- fonts
	|--- images
    |--- js
    |--- sass
    |--- views

---

js``views

|--- views
    |--- home //  
        |--- index.html
        ...
    |--- shopping // 
        |--- buy.html
        ...
|--- js
    |--- lib
        |--- vue.js
        |--- react.js
        |--- react.dom.js
        ...
    |--- home // js
        |--- index.js
        ...
    |--- shopping // js
        |--- buy.js
        ...
    tools.js
    common.js

homeshoppingjs

jslib(filterlib)

js(tools.js,common.js)

---

sass

|--- sass
    |--- home
        |--- index.scss
        ...
    |--- shopping
        |--- buy.scss
        ...

(home/index.html)

...
<link rel="stylesheet" href="../../css/home/index.css">

...

<script src="../../js/lib/vue(react).js"></script>
<script src="../../js/lib/react.dom.js"></script>
<script src="../../js/home/index.js"></script>
...

---

jssassjs

|--- components
    |--- home // home 
        |--- home-header.vue(jsx)
        |--- index-info.vue(jsx)
        ...
    |--- shopping  // shopping 
        |--- buy-list.vue(jsx)
        ...

componentssassjs

[]-[].vue(jsx)

|--- components
    |--- home
        |--- index-info.vue(jsx)

index-info``home/index.html``home/index.jsjs

[]-[].vue(jsx)

|--- components
    |--- home
        |--- home-header.vue(jsx)

home-header``home``homejs

components/common

|--- components
    |--- common
        |--- loading.vue(jsx)

loadingjs

js

gulpwebpackwebpackwebpackwebpackentryHTMLPlugin

&&

---

//  html
<template>
	<figure>
		<img src="../../assets/images/home/logo.jpg" alt="">
	</figure>
</template>

// style
<style rel="stylesheet/scss" lang="sass">
	@import "../../sass/home/index-info";
	// @import
    #bg h3 {
		background: url("../../assets/images/holmes.jpg");
		color: #fff;
	}
</style>

---

dev

build

T.T

webpack

package.json``script

// package.json
"scripts": {
    "build": "NODE_ENV=production gulp build",
    "dev": "NODE_ENV=dev gulp reload"
},

api,package.json``NODE_ENV(gulpfileNODE_ENV)

//  src/js/ajaxurl.js
 
const server1 = 'https://production.server.com';
const server2 = 'https://dev.server.com';

let useServer = null;
if(NODE_ENV === 'production') {
	useServer = server1;
} else if(NODE_ENV === 'dev') {
	useServer = server2;
}

export default useServer;

// src/js/home/index.js

import url from '../ajaxurl';
console.log(url);

dev``production

**** NODE_ENV=test gulp reload

**** NODE_ENV=preproduction gulp build

gulp build``gulp reload

npm run dev npm run build (BTWgulpfile.jsCDNgulp const CDN = 'yourCDNLink')

gulp

src

vuereactdemorepo

vue-multpage : https://github.com/MeCKodo/vue-multipage

TODO

• Unit test
• Cli

vue-cli``create-react-appcli cloneclinpm :)

macwindowwindowbugwindow

---

---

js

sass

---

---

Have a nice day