official-website-template

quickly created an official website with seo

Compatibility

• code standard：eslint + stylelint + perttier

• commit standard：commitlint + husky

• css： scss + scss resource

• vue: vue-router + vuex + axios

• component

  • light component： link + button + icon + input + modal + select + tabs

  • layout component： header + footer

  • plugins：vue-awesome-swiper

• animation lib： wow.js

Usage

Install vue-cli

$ npm install -g vue-cli

Quick Start

$ vue init lq782655835/official-website-template my-project
$ cd my-project
$ npm install && npm run dev

Directory Structure

|-- official-website-template
    |-- nuxt.config.js                   -- nuxt配置
    |-- package.json                     -- 项目依赖以及npm脚本
    |-- assets
    |   |-- css                          -- scss
    |   |   |-- global.scss              -- 全局css
    |   |   |-- reset.scss               -- reset css
    |   |   |-- variables.scss           -- 全局scss变量或mixin
    |   |-- img                          -- 图片存放，icon组件会默认找到该文件夹
    |   |-- svg                          -- svg存放，icon组件会默认找到该文件夹
    |-- components                       -- 组件
    |   |-- u-footer.vue                 -- 页尾布局占位
    |   |-- u-header.vue                 -- 页头导航占位
    |   |-- common                       -- 全局Vue组件，该文件夹下的组件自动导入，文件名为组件名
    |   |   |-- u-banner.vue             -- 轮播组件
    |   |   |-- u-button.vue
    |   |   |-- u-icon.vue               -- 提供快捷本地图片访问
    |   |   |-- u-input.vue
    |   |   |-- u-link.vue               -- 统一站内/站外导航组件
    |   |   |-- u-modal.vue
    |   |   |-- u-section.vue
    |   |   |-- u-select-option.vue
    |   |   |-- u-select.vue
    |   |   |-- u-tab.vue
    |   |   |-- u-tabs.vue
    |   |-- index                        -- 页面逻辑组件
    |-- layouts                          -- Nuxt结构，全局模板
    |   |-- default.vue
    |-- pages                            -- Nuxt结构，页面路由route
    |   |-- index.vue
    |-- plugins                          -- Nuxt结构，插件
    |   |-- third.js                     -- 第三方插件导入
    |   |-- vue-global.js                -- vue全局导入
    |-- static                           -- Nuxt结构，静态文件
    |   |-- favicon.ico
    |-- store                            -- Nuxt结构，Vuex
    |   |-- index.js
    |-- utils                            -- 工具库
        |-- api.js                       -- api层
        |-- http.js                      -- 基础http请求

Preview

License

The code is distributed under the MIT license