项目结构调整

Author: kitorv

README.md

@@ -0,0 +1,80 @@
+# VUE-UI-DOCS
+
+## Roadamp
+
+- 基础项目创建
+- 目录结构调整
+  - 1. 入口 site
+  - 2. 路由调整 Home.vue import HelloWorld from "../components/HelloWorld";
+
+├─site //示例网站目录
+│ └─components //示例网站组件
+│ └─router //路由配置
+│ │ └─index.js //路由配置文件
+│ └─views //示例页面
+│ │ └─Home.vue //示例网站首页
+│ └─App.vue //项目入口
+│ └─main.js //启动文件
+
+```javascript
+import Vue from "vue";
+import VueRouter from "vue-router";
+
+Vue.use(VueRouter);
+
+const routes = [
+  {
+    path: "/",
+    name: "Home",
+    component: () => import("../views/Home.vue")
+  }
+];
+
+const router = new VueRouter({
+  mode: "history",
+  base: process.env.BASE_URL,
+  routes
+});
+
+export default router;
+```
+
+```vue
+<template>
+  <h1>
+    Home
+  </h1>
+</template>
+
+<script>
+export default {
+  name: "Home"
+};
+</script>
+```
+
+```vue
+<template>
+  <div id="app">
+    <router-view />
+  </div>
+</template>
+
+<style lang="scss">
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</style>
+```
+
+```javascript
+module.exports = {
+  pages: {
+    index: {
+      entry: "site/main.js"
+    }
+  }
+};
+```

site/App.vue

@@ -0,0 +1,13 @@
+<template>
+  <div id="app">
+    <router-view />
+  </div>
+</template>
+
+<style lang="scss">
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</style>

src/main.js site/main.jssrc/main.js renamed to site/main.js

@@ -0,0 +1,20 @@
+import Vue from "vue";
+import VueRouter from "vue-router";
+
+Vue.use(VueRouter);
+
+const routes = [
+  {
+    path: "/",
+    name: "Home",
+    component: () => import("../views/Home.vue")
+  }
+];
+
+const router = new VueRouter({
+  mode: "history",
+  base: process.env.BASE_URL,
+  routes
+});
+
+export default router;

site/router/index.js

@@ -0,0 +1,11 @@
+<template>
+  <h1>
+    Home
+  </h1>
+</template>
+
+<script>
+export default {
+  name: "Home"
+};
+</script>