trello07：项目创建与模板解析、路由与视图组件构建

1 项目创建与模板解析

1-1、 项目创建

使用 vue-cli 工具构建前端项目

vue create trello-vue

1-2、模板解析

.
├── css
│   ├── css.css
│   └── fonts
│       ├── trellicons-iefix.eot
│       ├── trellicons.eot
│       ├── trellicons.ttf
│       └── trellicons.woff
├── html
│   ├── 404.html
│   ├── board.html
│   ├── home.html
│   ├── login.html
│   ├── message.html
│   └── register.html
└── images
    ├── header-loading-logo.gif
    ├── header-logo-2x.png
    ├── lef-large.svg
    ├── loading.gif
    ├── right-large.svg
    └── trello-logo-blue.svg

2、路由与视图组件构建

2-1、路由

// file: trello-vue/src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

const Home = () => import(/* webpackChunkName: "Home" */ '../views/Home.vue');
const Board = () => import(/* webpackChunkName: "Board" */ '../views/Board.vue');
const Card = () => import(/* webpackChunkName: "Card" */ '../views/Card.vue');
const Login = () => import(/* webpackChunkName: "Login" */ '../views/Login.vue');
const Register = () => import(/* webpackChunkName: "Register" */ '../views/Register.vue');
const NotFound = () => import(/* webpackChunkName: "NotFound"  */ '../views/NotFound.vue');

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/board/:id(\\d+)',
    name: 'Board',
    component: Board,
    children: [
      {
        path: 'list/:listId(\\d+)/card/:cardId(\\d+)',
        name: 'Card',
        component: Card
      }
    ]
  },
  {
    path: '/login',
    name: 'Login',
    component: Login
  },
  {
    path: '/register',
    name: 'Register',
    component: Register
  },
  {
    path: '*',
    name: 'NotFound',
    component: NotFound
  }
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
});

export default router

// file: trello-vue/src/main.js

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

Vue.config.productionTip = false;

new Vue({
    router,
    render: h => h(App)
}).$mount('#app');

2-2、静态资源导入

把静态资源放入到 src/assets 目录下，并在 main.js 中进行导入

// file: trello-vue/src/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import '@/assets/css/css.css'

Vue.config.productionTip = false;

new Vue({
    router,
    render: h => h(App)
}).$mount('#app');

2-3、视图与组件

根据路由设置创建对应的组件，并存放在 src/views 目录下，注意设置 router-view

// file: trello-vue/src/App.vue

<template>
    <router-view />
</template>

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

子路由试图

// file: trello-vue/src/views/Board.vue

<template>
    <div>
        Board

        <router-view />
    </div>
</template>

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