如何用Vue+Vuetify快速建站？

懂点基础，学点套路，轻松用 Vue 写个网站

几个月前用 Vue + Vuetify 这一套框架写了个 仓库管理系统 和 个人网站，近来不写前端了，所以整理了如何用 Vue，Vuetify，Vuex，Vue-router 写一个单页应用 (SPA)，为以后回忆方便，也供初学者参考，少踩坑。

（这篇不是 Vue 的基础介绍，所以建议先读了 Vue 的官方文档，再来看怎么应用。）

这篇以开发的个人网站为例，从一个空文件夹开始讲到完整个网站，其中包括这几个模块：

  1. 配置开发环境
  2. 配置 Webpack
  3. 将 Vuex + Vue-router + Vue-router-sync + Vuetify 整合到整个

（代码参考 https://github.com/weimingwill/personal-website 。整个代码的文件结构和重要文件放在下面，可以边读边参考。结构如下：）

.
├── package.json
├── webpack.config.js
├── node_modules
├── build
│   ├── utils.js
│   └── vue-loader.conf.js
├── config
│   ├── dev.env.js
│   ├── index.js
│   ├── prod.env.js
│   └── test.env.js
├── src
│   ├── assets
│   │   ├── images
│   ├── css
│   │   ├── google-material-icons.css
│   │   └── main.css
│   ├── router
│   │   └── index.js
│   ├── store
│   │   ├── actions.js
│   │   ├── getters.js
│   │   ├── index.js
│   │   ├── modules
│   │   │   ├── app.js
│   │   │   ├── contacts.js
│   │   │   ├── menu
│   │   │   │   ├── index.js
│   │   │   │   └── lazyLoading.js
│   │   │   ├── projects.js
│   │   │   └── skills.js
│   │   └── mutation-types.js
│   ├── index.html
│   ├── main.js
│   ├── App.vue
│   └── views
│       ├── About.vue
│       ├── Blog.vue
│       ├── Contact.vue
│       ├── Resume.vue
│       ├── Skills.vue
│       ├── layout
│       │   ├── AppMain.vue
│       │   ├── Sidebar.vue
│       │   └── Toolbar.vue
│       └── projects
│           ├── Projects.vue
│           └── components
│               └── ProjectCard.vue

配置开发环境

首先，确保系统安装了 Node.js，安装 Node.js 的同时也安装了 npm。

创建一个新的文件夹，在这个文件夹里进行初始化：

npm init

根据提示，填入对应信息，完成后会自动生成 package.json 文件，填入的信息都可以在这个文件下做更改。下一步是安装开发需要的库：

npm install vue
npm install webpack
...
...

执行后，会自动下载库到根目录下的 node_modules 里。因为 Vue 有一些要用的库，webpack 还有许多要用的库，一一安装比较麻烦，可以直接去我的 Github 上面复制 package.json 里买的内容，替换本地的文件内的内容，然后执行

npm install

所有需要的东西应有尽有。到这里就完成了最基本的环境配置。

Webpack 配置

什么是 Webpack ？Webpack 是一个打包器，能够将各种不同格式的 js, css, jpg 等等，打包成一个或几个js文件，然后可以直接在 html 里使用打包后的文件，减少了各个文件之间相互依赖的麻烦。Webpack 入门可以参考早些写的文章 Wepack快速入门实践。

Webpack 主配置文件是 webpack.config.js，另外有一些配置文件分别在 build 和 config 文件夹里，可以直接将这三个复制项目根目录，重点讲下 Webpack 里比较重要的地方。

  1. 起始点和输出
  entry: {
    app: './src/main.js'
  },
  output: {
    path: path.resolve(__dirname, ''),
    filename: 'app.js'
  },
module: {
...
}

这里使用 src 文件下的 main.js 作为 Webpack 执行的起始点，将 module 下面定义了的各种不同文件格式，通过不同的 loader，在执行后，自动打包成根目录下的 app.js。( main.js 是最主要的一个 js 文件，具体内容稍后分解。）

  1. HtmlWebpackPlugin 使用 src 文件下的 index.html 作为模版，在执行后，自动在根目录下生成 index.html 不同的地方是，根目录下的这个文件，包含了前面提到的自动生成的 app.js 
<script type="text/javascript" src="app.js"></script>
  1. 怎么执行 webpack?
npm run dev

在根目录下运行上面代码就可以运行 webpack 进行打包，原因是在 package.json 文件里，在 scripts 里定义了这个命令。

{
  "scripts": {
    "dev": "webpack -d --watch",
    "test": "echo \"Error: no test specified\" && exit 1"
  }, ...
}

到这里就完成了最重要的两部分基础配置，接下来是如何用 Vue, Vuetify, Vuex, Vue-router, Vue-router-sync。

Vuetify + Vuex + Vue-router + Vue-router-sync

这里侧重讲怎么将这些都结合在一起使用，每个库的细节还是要大家自己去看官方文档，每个官方文档链接附录在最后。这些库主要通过一个文件结合使用 src/main.js

// src/main.js
import Vue from 'vue'
import Vuetify from 'vuetify'
import App from './App'
import store from './store'
import router from './router'
import { sync } from 'vuex-router-sync'

Vue.use(Vuetify);
sync(store, router);

new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
});

Vuetify

Vuetify 是基于 Vue 的前端组件框架，设计样式用的是 Google Material Design。

import Vue from 'vue'
import Vuetify from 'vuetify'
Vue.use(Vuetify);

这三行代码，实现了加载并使用 Vuetify。

import App from './App'
new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
});

先忽略 router 和 store。这里先是加载了 src/App.vue，这个文件是使用 Vuetify 的起始文件。

// src/App.vue
<div id="app">
  <v-app>......</v-app>
</div>

el: #app 指向的就是这里的 id="app"。所有其他组件都是写在 <v-app></v-app> 之间的，通常是在这页定义出整个应用的模版，比如 sidebar，navigation bar 和主要区域。然后再根据不同的页面，创建不同的 .vue 文件，通常每个页面都是一个单独的文件，有公用的模块可以写在一个地方。

Vuex

Vuex 是一个状态管理器，对应的是 src/store 下面的代码，Vuex 主要概念有 state, getters, mutations, actions 和 modules。全局的 getters 和 actions 写在 src/store/getters.js 和 src/store/actions.js 里，在 Vuetify 中提到每有一个单独的 .vue 文件，每个 vue 的文件都可以抽象当成一个 module，每个
module 有单独的 .js 与之对应，里面包含了这个页面的 state, getters, mutations, actions。举个例子，我们有一个 Contact.vue 文件，对应的 src/store/modules 里有一个 contacts.js 文件，如下：

// src/store/modules/contacts.js
import * as types from '../mutation-types'

const state = {
  contacts: []
}

const getters = {
  contacts: state => state.contacts,
}

const mutations = {
  [types.READ_CONTACTS] (state) {
    let contactMethods = require('../../assets/contact-methods.json')
    state.contacts = contactMethods.methods
  }
}

const actions = {
  readContacts ({commit}) {
    commit(types.READ_CONTACTS);
  }
}

export default {
  state,
  getters,
  mutations,
  actions
}

这样的文件结构的好处是让每个页面都是相对独立的，逻辑，代码都比较清晰。

Vuex 里另外一个要提的是 modules 里有另外一个文件夹 menu，顾名思义，是整个应用的目录。代码如下

const state = {
  items: [
    {
      title: 'Projects',
      path: '/projects',
      isMenu: true,
      router: true,
      icon: 'computer',
      component: lazyLoading('projects/Projects'),
    },...
  ]
}

具体定义了每一个组件(component) 的名字，图标，位置，路由的地址等，具体怎么实现路由的稍后在 Vue-router 里细说，这里重点看 Lazyloading() 这个函数。

// src/store/modules/menu/lazyloading.js
export default (name, index = false) => () => require.ensure([], (require) => require(`../../../views/${name}${index ? '/index' : ''}.vue`))

文件里面只有这一行代码，用处是告诉 webpack 在加载 .vue 文件时，知道去哪里找这个文件，比如
lazyLoading('projects/Projects') 指的是 ../../../views/projects/Projects.vue，也就是 src/views/projects/Proejcts.vue 这个文件。当 lazyloading('xxxx', index=true) 时，会去找 xxxx 文件夹下面的 index.vue。

Vue-router

Vue-router 对应了 src/router/index.js 里的代码。

import Vue from 'vue'
import Router from 'vue-router'
import menuModule from 'vuex-store/modules/menu'

Vue.use(Router);

export default new Router({
  routes: [
    ...generateRoutesFromMenu(menuModule.state.items),
    {
      path: '*',
      redirect: '/projects'
    }
  ]
})

function generateRoutesFromMenu (menu = [], routes = []) {
  for (let i = 0, l = menu.length; i < l; i++) {
    let item = menu[i];
    if (item.path) {
      routes.push(item)
    }
    if (!item.component) {
      generateRoutesFromMenu(item.subItems, routes)
    }
  }
  return routes
}

将应用的所有路径都定义在

new Router({
  routes: [
   ......
  ]
})

generateRoutesFromMenu 这个函数的作用是将定义在 src/store/modules/menu 里的每个目录里包含了 component 的加载进应用的路由里，path 对应的是路径，component 是指向哪个 .vue 文件，比如 Vuex 那个例子，访问 host:port/projects 这个页面，应用会加载 src/views/projects/Project.vue。

{
  path: '*',
  redirect: '/projects'
}

这个的作用是用户访问任何没有定义的路径时，自动重新载入到 host:port/projects 这个页面，正常可以写一个错误页面。

到这边就简单的介绍了如何使用 Vuetify, Vuex, Vue-router，最后在 src/main.js 里，加载 store 和 router，放到 new Vue() 里就可以了

new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
});

一篇文章能介绍的内容实在有限，只是比较大概的介绍了整体各个模块怎么结合，还有许多细节需要参考文档，已经在写代码的过程中去排雷，权当一个抛砖引玉了。

大家有碰到什么这方面的问题可以留言，一定尽力解答。一些文档附录在下面，供大家参考。

Vue: https://vuejs.org/
Vuetify: https://vuetifyjs.com/
Vuex: https://vuex.vuejs.org/
Vue-router: https://router.vuejs.org/
Vue-router-sync: https://github.com/vuejs/vuex-router-sync

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,189评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,577评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,857评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,703评论 1赞 276
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,705评论 5赞 366
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,620评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,995评论 3赞 396
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,656评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,898评论 1赞 298
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,639评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,720评论 1赞 330
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,395评论 4赞 319
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,982评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,953评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,195评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 44,907评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,472评论 2赞 342

推荐阅读更多精彩内容