如何用Vue+Vuetify快速建站？

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

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

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

配置开发环境
配置 Webpack
将 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 里比较重要的地方。

起始点和输出
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 文件，具体内容稍后分解。）

HtmlWebpackPlugin 使用 src 文件下的 index.html 作为模版，在执行后，自动在根目录下生成 index.html 不同的地方是，根目录下的这个文件，包含了前面提到的自动生成的 app.js

怎么执行 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: ‘’,
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: ‘’,
components: { App }
});
先忽略 router 和 store。这里先是加载了 src/App.vue，这个文件是使用 Vuetify 的起始文件。

// src/App.vue

......

el: #app 指向的就是这里的 id="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’
}
]
})

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: ‘’,
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

如何用Vue+Vuetify快速建站？相关推荐

如何用 Vue + Vuetify 快速建站？
懂点基础,学点套路,轻松用 Vue 写个网站几个月前用 Vue + Vuetify 这一套框架写了个仓库管理系统和个人网站,近来不写前端了,所以整理了如何用 Vue,Vuetify,Vuex, ...
快站模板连接mysql_建站实操：如何用CMS快速建站
设置完数据库后.回到浏览器打开刚才的页面,点击"创建配置文件". WordPress是基于PHP的blog程序.说它是blog,有点委屈它了.因为WordPress完全可以作为一个 ...
bcc服务器搭建网站,如何用云服务器bcc建站
如何用云服务器bcc建站内容精选换一换由于通用型/内存优化型II代的云服务器与通用型/内存优化型I代的云服务器具有不同的虚拟化架构和不同的驱动类型,所以通用型/内存优化型I代云服务器创建的私有镜 ...
中小企业网站建设不妨试试快速建站
现如今越来越多的企业选择在互联网中快速建站,通过网站建设进行线上推广营销,同时线上推广营销确实为企业带来了利益和口碑.不过企业想要完成网站建设也需要耗费相应的时间和精力,一些中小型企业为了快速达成网站 ...
linux 快速建网站,如何快速建站，新手快速搭建网站教程
越来越多的人选择个人建站,个人站长虽然门槛很低,但是有些朋友觉得Linux服务器各种复杂的命令脚本让自己没法搭建环境.今天就给大家推荐一款使用方便.功能强大的快速建站工具--云帮手,支持 Linux ...
DedeCMS快速建站
前一段时间从老师哪里得来一个项目,关于一个小公司的网站.由于时间的原因,又接近我们的期末考试,从老师那里了解到一些关于快速建站的东西,接触了CMS(Content Management System) ...
百度云主机（配置、调试环境）文件上传（快速建站，实现首页访问） - FTP篇
百度云主机BCH实例(配置.调试环境)FTP文件上传,如何操作? 百度云虚拟主机参考文档:产品手册大全总结步骤: 在你首次登录控制面板,系统会要求初始化您的密码,包括设定用户账号.管理密码.FTP账 ...
在线制作html模板,快速建站 20个设计优秀的HTML网站模板(免费)
快速建站 20个设计优秀的HTML网站模板(免费) 2月 12, 2015 评论 (7) Sponsor 在这个互联网时代,很多企业或是个人都搭建有自己的网站,用于宣传营销或个人网站博客等用途.而对于 ...
简单易用的公司网页模板，助您快速建站
在当今数字化时代,拥有一个高质量的公司网页是每个企业成功的关键.然而,对于那些没有技术专业知识的人来说,创建一个专业的网页可能是一项艰巨的任务.但是,现在有许多简单易用的公司网页模板可用于帮助您快速建 ...

如何用Vue+Vuetify快速建站？

如何用Vue+Vuetify快速建站？相关推荐

最新文章

热门文章