Vue官网开发实践：从零开始构建一个现代化的单页应用

npm install -g @vue/cli
vue create vue-official-website
cd vue-official-website
npm run serve

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('js')
      .use('babel-loader')
      .loader('babel-loader')
      .tap(options => {
        // 修改Babel配置
        return options;
      });
  },
};

<!-- Layout.vue -->
<template>
  <div class="layout">
    <nav>Navigation Menu</nav>
    <main>Content Area</main>
    <footer>Footer</footer>
  </div>
</template>

<script>
export default {
  name: 'Layout',
};
</script>

<style scoped>
.layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
nav {
  background-color: #333;
  color: #fff;
  padding: 1rem;
}
main {
  flex: 1;
  padding: 1rem;
}
footer {
  background-color: #333;
  color: #fff;
  padding: 1rem;
}
</style>

/* styles.css */
@media (max-width: 600px) {
  .layout {
    font-size: 14px;
  }
  nav {
    padding: 0.5rem;
  }
  main {
    padding: 0.5rem;
  }
  footer {
    padding: 0.5rem;
  }
}

<!-- 使用Bootstrap -->
<template>
  <div class="container">
    <div class="row">
      <div class="col-md-6">Column 1</div>
      <div class="col-md-6">Column 2</div>
    </div>
  </div>
</template>

<!-- 使用Tailwind CSS -->
<template>
  <div class="flex flex-col md:flex-row">
    <div class="w-full md:w-1/2">Column 1</div>
    <div class="w-full md:w-1/2">Column 2</div>
  </div>
</template>

// router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home.vue';
import About from '@/components/About.vue';
import Docs from '@/components/Docs.vue';

Vue.use(Router);

export default new Router({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/docs', component: Docs },
  ],
});

<!-- App.vue -->
<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
      <router-link to="/docs">Docs</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

// router/index.js
const router = new Router({
  routes: [
    {
      path: '/user',
      component: User,
      children: [
        { path: 'profile', component: UserProfile },
        { path: 'posts', component: UserPosts },
      ],
    },
  ],
});

router.beforeEach((to, from, next) => {
  // 权限控制逻辑
  next();
});

// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    user: null,
  },
  getters: {
    getUser: state => state.user,
  },
  mutations: {
    setUser(state, user) {
      state.user = user;
    },
  },
  actions: {
    fetchUser({ commit }) {
      // 获取用户信息的逻辑
      commit('setUser', user);
    },
  },
});

// api.js
import axios from 'axios';

export const getUser = () => axios.get('/api/user');

<!-- User.vue -->
<template>
  <div>
    <h1>User Profile</h1>
    <div id="map"></div>
  </div>
</template>

<script>
import { getUser } from '@/api';
import L from 'leaflet';

export default {
  data() {
    return {
      user: null,
    };
  },
  mounted() {
    getUser().then(response => {
      this.user = response.data;
      this.initMap();
    });
  },
  methods: {
    initMap() {
      L.map('map').setView([this.user.latitude, this.user.longitude], 13);
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
      }).addTo(this.map);
      L.marker([this.user.latitude, this.user.longitude]).addTo(this.map);
    },
  },
};
</script>

// router/index.js
const router = new Router({
  routes: [
    { path: '/', component: () => import('@/components/Home.vue') },
    { path: '/about', component: () => import('@/components/About.vue') },
    { path: '/docs', component: () => import('@/components/Docs.vue') },
  ],
});

npm install --save-dev webpack-bundle-analyzer

// vue.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  configureWebpack: {
    plugins: [new BundleAnalyzerPlugin()],
  },
};

npm install vue-lazyload

// main.js
import Vue from 'vue';
import VueLazyload from 'vue-lazyload';

Vue.use(VueLazyload, {
  loading: 'path/to/loading.gif',
  error: 'path/to/error.png',
});

<!-- 使用懒加载图片 -->
<template>
  <div>
    <img v-lazy="imageUrl" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'path/to/image.jpg',
    };
  },
};
</script>

npm install workbox-webpack-plugin

// vue.config.js
const { GenerateSW } = require('workbox-webpack-plugin');

module.exports = {
  configureWebpack: {
    plugins: [
      new GenerateSW({
        clientsClaim: true,
        skipWaiting: true,
      }),
    ],
  },
};

npm install --save-dev jest @vue/test-utils vue-jest babel-jest

// tests/unit/example.spec.js
import { shallowMount } from '@vue/test-utils';
import Example from '@/components/Example.vue';

describe('Example.vue', () => {
  it('renders props.msg when passed', () => {
    const msg = 'new message';
    const wrapper = shallowMount(Example, {
      propsData: { msg },
    });
    expect(wrapper.text()).toMatch(msg);
  });
});

npm install --save-dev cypress

// cypress/integration/example.spec.js
describe('Example', () => {
  it('should display the message', () => {
    cy.visit('/');
    cy.contains('Example Message');
  });
});

npm install --save-dev @vue/cli-plugin-gh-pages

// vue.config.js
module.exports = {
  pluginOptions: {
    ghPages: {
      branch: 'gh-pages',
      origin: 'origin',
    },
  },
};

npm run build
vue-cli-service gh-pages