https://github.com/lencx/vue-multi-pages

☘️ Vue Multi Pages([email protected] & [email protected] & pug)
https://github.com/lencx/vue-multi-pages

pug sass vue-multi-pages vue2 webpack2

Last synced: 1 day ago
JSON representation

☘️ Vue Multi Pages([email protected] & [email protected] & pug)

• Host: GitHub
• URL: https://github.com/lencx/vue-multi-pages
• Owner: lencx
• Created: 2017-02-02T17:55:03.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-02-12T17:31:45.000Z (over 7 years ago)
• Last Synced: 2024-05-23T05:34:52.587Z (4 months ago)
• Topics: pug, sass, vue-multi-pages, vue2, webpack2
• Language: JavaScript
• Homepage:
• Size: 75.2 KB
• Stars: 4
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# vue-multi-pages

> Vue Multi Pages(vue@2 && webpack@2)

```bash

# []: Directory

[proj]

|- [build]

|- [config]

|- [public]

|     |- [dist] # build file

|     `- ...

|- [node_modules]

|- [src]

|   |- [assets]

|   |- [compontents]

|   |- [modules] # multi pages

|   |     |- [about]

|   |     |    |- App.vue

|   |     |    |- about.html

|   |     |    |- about.js # entry file

|   |     |    `- ...

|   |     |- [home]

|   |     |    |- App.vue

|   |     |    |- index.html # default load the page

|   |     |    |- index.js # entry file

|   |     |    `- ...

|   |     `- ...

|   |- [router]

|   `- ...

|- package.json

|- yarn.lock

|- README.md

`- ...

```

## Build Setup

``` bash

# install dependencies

# npm install

yarn

# serve with hot reload at localhost:8080

# npm run dev

yarn dev

# build for production with minification

# npm run build

yarn build

# eslint => .js, .vue src

yarn lint

# build for production and view the bundle analyzer report

npm run build --report

```

## Add page module

> 添加新的页面模块只需在`./src/modules`中新建一个文件夹，可参考`./src/modules`目录下`home`与`about`；

> 添加新页面的路由只需在`./src/router`中新建一个文件即可。

## Install Plugins

```bash

# scss -> css

yarn add node-sass sass-loader --dev

# pug -> html

yarn add pug --dev

```

## Usage (*.vue file)

```vue

body

    .container

        h1

            a(href="/..") Hello Vue

        ...

body{

    background: green;

    li {

        list-style: none;

        a {

            color: #333;

        }

    }

}

...

```

## TODO

- Request data from a server

- vuex

- ...