如何用 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 文件，填入的信息都可以在这个文件下做更改。下一步是安装开发需要的库࿱