---

SPA

ES6(7)+.vue | .jsx

()

TIPS

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

src``assets,components,js,sass``src/staticdevpublic

---

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
        ...

static

|--- static
    |--- css // scss 
        |--- home
            |--- index.css
        |--- shopping
            |--- buy.css
    |--- js // babeljs
        |--- home
            |--- index.js
        |--- shopping
            |--- buy.js

(home/index.html)

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

...

<script src="../../static/es6/lib/vue(react).js"></script>
<script src="../../static/es6/lib/react.dom.js"></script>
<script src="../../static/es6/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

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

TODO

• Unit test
• Cli

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

macwindowwindowbugwindow

---

---

js

sass

---

---

Have a nice day