欢迎光临高端网站建设公司网站,我们具有丰富的经验,深受客户信赖!

高端网站建设公司

专业品牌网站建设开发,企业高端网站设计价格

如何用Vue+Vuetify快速建站?

作者:jcmp      发布时间:2021-04-19      浏览量:0
几个月前用 Vue + Vuetify

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

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

.├── 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 vuenpm 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 文件,具体内容稍后分解。)。

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.jsimport 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.jsimport * 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.jsexport 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: '', 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。