面试官：自己搭建过vue开发环境吗？ (4)

新增视图组件
在 src 目录下新增两个视图组件 src/views/Home.vue 和 src/views/About.vue

// src/views/Home.vue <template> <div> <h2>Home</h2> </div> </template> <script> export default { name: 'Home', data() { return {}; } }; </script> <style lang="scss" scoped> </style>

About.vue 内容跟 Home.vue 差不多，将里面的 Home 换成 About 就OK了

新增路由配置文件

在 src 目录下新增一个 router/index.js 文件

// src/router/index.js import Vue from 'vue' import VueRouter from "vue-router"; import Home from '../views/Home'; import About from '../views/About'; Vue.use(VueRouter) export default new VueRouter({ mode: 'hash', routes: [ { path: '/Home', component: Home }, { path: '/About', component: About }, { path: '*', redirect: '/Home' } ] })

修改 main.js 文件

// main.js import Vue from 'vue' import App from './App.vue' import router from './router' new Vue({ router, render: h => h(App) }).$mount('#app')

修改 App.vue 组件

// App.vue // 在 template 中添加 // src/App.vue <template> <div> Hello World </div> <div> // router-link 组件 用来导航到哪个路由 <router-link to="/Home">go Home</router-link> <router-link to="/About">go About</router-link> </div> <div> // 用于展示匹配到的路由视图组件 <router-view></router-view> </div> </template> <script> export default { name: 'App', data() { return {}; } }; </script> <style lang="scss" scoped> .App { color: skyblue; } </style>

运行 npm run serve 命令，如没配置错误，是可以看到点击不同的路由，会切换到不同的路由视图

7.2 配置路由懒加载

在没配置路由懒加载的情况下，我们的路由组件在打包的时候，都会打包到同一个js文件去，当我们的视图组件越来越多的时候，就会导致这个 js 文件越来越大。然后就会导致请求这个文件的时间变长，最终影响用户体验

安装依赖

npm install @babel/plugin-syntax-dynamic-import --save-dev

修改babel.config.js

module.exports = { presets: [ [ "@babel/preset-env", { useBuiltIns: "usage" } ] ], plugins: [ // 添加这个 '@babel/plugin-syntax-dynamic-import' ] }

修改 router/index.js 路由配置文件

import Vue from 'vue' import VueRouter from "vue-router"; Vue.use(VueRouter) export default new VueRouter({ mode: 'hash', routes: [ { path: '/Home', component: () => import(/* webpackChunkName: "Home" */ '../views/Home.vue') // component: Home }, { path: '/About', component: () => import(/* webpackChunkName: "About" */ '../views/About.vue') // component: About }, { path: '*', redirect: '/Home' } ] })

运行命令 npm run build
查看是否生成了 Home...js 文件 和 About...js 文件

7.3 集成 Vuex

在 src 目录下新建一个 store/index.js 文件

// store/index.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const state = { counter: 0 } const actions = { add: ({commit}) => { return commit('add') } } const mutations = { add: (state) => { state.counter++ } } const getters = { getCounter (state) { return state.counter } } export default new Vuex.Store({ state, actions, mutations, getters })

修改 main.js 文件 导入 vuex

// main.js import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' // ++ new Vue({ router, store, // ++ render: h => h(App) }).$mount('#app')

修改 App.vue ，查看 vuex 配置效果

// App.vue <template> <div> <div> <router-link to="/Home">go Home</router-link> <router-link to="/About">go About</router-link> </div> <div> <p>{{getCounter}}</p> <button @click="add">add</button> </div> <div> <router-view></router-view> </div> </div> </template> <script> import { mapActions, mapGetters } from 'vuex' export default { name: 'App', data() { return {}; }, computed: { ...mapGetters(['getCounter']) }, methods: { ...mapActions(['add']) } }; </script> <style lang="scss" scoped> .App { text-align: center; color: skyblue; font-size: 28px; } </style>

运行命令 npm run serve

当点击按钮的时候，可以看到我们的getCounter一直在增加

8 总结