Vue.js 单页面应用工程化实战-JavaScript中文网-JavaScript教程资源分享门户

前言

Vue.js 已经成为了目前最为流行的前端框架之一，其具有易学易用、高效快速、灵活开放等诸多优点。而在实际项目中，单页面应用已经成为了一种趋势，其可以提高网站的交互性、用户体验和开发效率。因此，本文将介绍如何使用 Vue.js 实现单页面应用工程化，并结合示例代码讲解相关实现细节。

一、规划项目结构

对于一个Vue.js单页面应用，我们可以采用以下的项目结构：

// www.javascriptcn.com code example
├── index.html
├── package.json
├── src
│   ├── assets
│   ├── components
│   ├── router
│   ├── store
│   ├── styles
│   └── views
└── webpack.config.js

项目结构解释：

index.html：页面入口文件，一般只有一个页面
package.json：项目配置信息和依赖包管理
src：源代码目录
- assets：静态资源，包括图片、字体等等
- components：组件，按照功能模块划分
- router：路由，用于管理页面中的路由，实现页面间的跳转
- store：Vuex 状态管理，用于管理应用的状态
- styles：样式表
- views：视图层，按照页面划分
webpack.config.js：打包配置文件，用于对源代码进行打包压缩，生成最终可用的代码

二、基础配置

在 package.json 文件中添加以下的依赖：

// www.javascriptcn.com code example
"devDependencies": {
  "webpack": "^4.46.0",
  "webpack-cli": "^4.7.0",
  "webpack-dev-server": "^3.11.2"
},
"dependencies": {
  "vue": "^2.6.11",
  "vue-router": "^3.2.0",
  "vuex": "^3.1.2"
}

接着，在根目录下创建 webpack.config.js 文件，并编写以下内容：

// www.javascriptcn.com code example
const path = require('path')

module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

在上述配置中，entry 表示输入文件，output 表示输出文件的目录和名称，module 中的 rules 表示应用不同的 loader 来处理不同的文件，比如 Vue.js 单文件组件和 babel 转译器等，resolve 中的 alias 表示指定不同的模块路径别名，devServer 表示开发服务器的配置，performance 表示性能相关的配置，devtool 表示生成代码的调试信息方式。

三、创建路由

在 router 目录下创建 index.js 文件，编写以下内容：

// www.javascriptcn.com code example
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

export default router

在上述代码中，我们首先引入 Vue.js 和 VueRouter，然后注册 VueRouter，接着定义路由表，包括路由的路径、路由的名称和路由所对应的组件，最后导出 router 对象。

四、实现组件

我们在 components 目录下创建一个 Header.vue 组件，编写以下代码：

// www.javascriptcn.com code example
<template>
  <div class="header">
    <h1>{{ title }}</h1>
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>
  </div>
</template>

<script>
export default {
  name: 'Header',
  computed: {
    title () {
      return 'Vue.js SPA Demo'
    }
  }
}
</script>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffff;
  padding: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.header h1 {
  font-size: 2rem;
  margin: 0;
}
.header nav {
  display: flex;
}
.header nav a {
  margin-left: 1rem;
  color: #333333;
  text-decoration: none;
}
.header nav a.router-link-active {
  font-weight: bold;
  color: #0066cc;
}
</style>

在上述代码中，我们定义了一个 Header 组件，其中包含一个标题和两个导航链接，通过 router-link 组件实现路由之间的跳转，通过 computed 计算属性实现动态的标题内容，最后利用 scoped 属性，使样式只作用于当前组件。

五、使用 Vuex 管理状态

我们在 store 目录下创建一个 index.js 文件，编写以下代码：

// www.javascriptcn.com code example
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
  count: 0
}

const getters = {
  evenOrOdd: state => state.count % 2 === 0 ? '偶数' : '奇数'
}

const mutations = {
  increment (state) {
    state.count++
  },
  decrement (state) {
    state.count--
  }
}

const actions = {
  incrementAsync ({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  }
}

const store = new Vuex.Store({
  state,
  getters,
  mutations,
  actions
})

export default store

在上述代码中，我们首先引入 Vue.js 和 Vuex，然后注册 Vuex，定义 state、getters、mutations 和 actions，最后创建一个 store 对象，并导出。

六、定义视图

我们在 views 目录下创建一个 Home.vue 视图组件，编写以下代码：

// www.javascriptcn.com code example
<template>
  <div>
    <Header />
    <h2>这里是首页</h2>
    <p>当前计数：{{ count }}</p>
    <p>计数{{ evenOrOdd }}</p>
    <button @click="increment">增加</button>
    <button @click="incrementAsync">延迟增加</button>
    <button @click="decrement">减少</button>
  </div>
</template>

<script>
import Header from '@/components/Header.vue'
import { mapState, mapGetters, mapActions } from 'vuex'

export default {
  name: 'Home',
  components: {
    Header
  },
  computed: {
    ...mapState(['count']),
    ...mapGetters(['evenOrOdd'])
  },
  methods: {
    ...mapActions(['increment', 'incrementAsync', 'decrement'])
  }
}
</script>

在上述代码中，我们引入了 Header 组件，通过 mapState、mapGetters 和 mapActions 分别实现了 state、getters 和 actions 的映射，使得我们可以方便地通过 this 对象访问到 Vuex 中定义的数据和功能。

同理，我们在 views 目录下创建一个 About.vue 视图组件，其内容如下：

// www.javascriptcn.com code example
<template>
    <div>
        <Header />
        <h2>这里是关于我们</h2>
    </div>
</template>

<script>
import Header from '@/components/Header.vue'

export default {
    name: 'About',
    components: {
        Header
    }
}
</script>

七、构建运行

在 package.json 文件中添加以下的 scripts：

"scripts": {
  "serve": "webpack-dev-server --inline --progress --config webpack.config.js",
  "build": "webpack --hide-modules --config webpack.config.js"
}

在命令行中输入 npm run serve，启动开发服务器，打开浏览器，输入 http://localhost:8080 进行访问，即可看到我们的 SPA Demo 页面。

结尾

Vue.js 单页面应用的工程化实现是一个非常有意义的话题，通过上述的代码实现，我们不仅学会了如何规划项目结构、创建路由、实现组件、使用 Vuex 管理状态，还体验到了 webpack 打包的高效。在实践中，还需要进一步掌握现代 JavaScript、ES6、TypeScript、RxJS 等技术，以便更好地实现 SPA 的高质量开发。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d79c3aa941bf7134da0629

Vue.js 单页面应用工程化实战

前言