前端框架真多最近最火的那肯定是Facebook的Vue，速度快得不得了，做网页布局省心舒坦，尤其适合搞那种复杂的UI界面。大家都觉得好用。你们听说过印象笔记不？那个界面美得让人惊叹，功能也很强大，实在是爱不释手。所以咱们今天就学习下怎么学着用Vue做出个跟印象笔记类似的网站。重要的事情是要用Vue编程，设计网页布局，加上路由和Vuex管理页面状态等。
创建Vue应用程序
vue create my-app
亲们，试试用Vue CLI快速建个叫”my-app”的Vue应用。太简单了！只需要在命令行打几行就ok~
安装必要的依赖项
npm install vue-router vuex vue-fontawesome bootstrap-vue
做这个任务，先搞点装备吧—Vue.js的导航组件，Vuex这大神器，再来个Font Awesome的图标库，最后加个Bootstrap-Vue更棒了！有了它们，你的难题都能轻松解决！
构建页面布局
咱们赶紧开始，先安好左边的平板电脑和NoteView东西，把大体框架搭出来。左边看笔记本啊标签什么的状态；右面那个NoteView就是要看你写的笔记。弄好了这两样儿，主页面的样子就有了！
import Navbar from '@/components/Navbar.vue' import Sidebar from '@/components/Sidebar.vue' import NoteView from '@/components/NoteView.vue' export default { components: { Navbar, Sidebar, NoteView } } /* Visit https://bootstrap-vue.js.org/docs/ for BootstrapVue documentation and examples */
添加路由和Vuex状态管理
搞定Vue项目其实不难！先学学如何通过路由来切换页面；然后，用Vuex来管理数据也是挺不错的选择。别忘了用它存一下短期内要用到的信息，这样路由就可以帮忙实现页面之间的交互。记得，设定固定数值、定义状态、写好操作和变更什么的都不能漏掉，只要做全了，你的项目才能有条不紊哟。
export const SET_NOTEBOOKS = 'SET_NOTEBOOKS' export const SET_NOTES = 'SET_NOTES' export const SET_TAGS = 'SET_TAGS' export const SET_ACTIVE_NOTEBOOK = 'SET_ACTIVE_NOTEBOOK' export const SET_ACTIVE_NOTE = 'SET_ACTIVE_NOTE' export const ADD_NOTEBOOK = 'ADD_NOTEBOOK' export const ADD_NOTE = 'ADD_NOTE' export const ADD_TAG = 'ADD_TAG'
实现左侧边栏
export default {
notebooks: [],
notes: [],
tags: [],
activeNotebook: null,
activeNote: null
}
咱们这儿的侧边栏就像印象笔记似的，方便整理笔记本和标签。想要新增啥子笔记本或标签，直接搞定就OK啦～对了，为了美观点儿，我们还使上了FontAwesome的图标库呢～
实现笔记本详细页面
import {
SET_NOTEBOOKS,
SET_NOTES,
SET_TAGS,
SET_ACTIVE_NOTEBOOK,
SET_ACTIVE_NOTE,
ADD_NOTEBOOK,
ADD_NOTE,
ADD_TAG
} from './index'
export default {
[SET_NOTEBOOKS](state, notebooks) {
state.notebooks = notebooks
},
[SET_NOTES](state, notes) {
state.notes = notes
},
[SET_TAGS](state, tags) {
state.tags = tags
},
[SET_ACTIVE_NOTEBOOK](state, notebook) {
state.activeNotebook = notebook
},
[SET_ACTIVE_NOTE](state, note) {
state.activeNote = note
},
[ADD_NOTEBOOK](state, notebook) {
state.notebooks.push(notebook)
},
[ADD_NOTE](state, note) {
state.notes.push(note)
},
[ADD_TAG](state, tag) {
state.tags.push(tag)
}
}
告诉你们个好消息，我们新出的那款NoteView不仅能读笔记本还能看清里头的内容~而且，记事本上有地方可以随时记录想法，用起超顺手哒！
import axios from 'axios'
import {
SET_NOTEBOOKS,
SET_NOTES,
SET_TAGS,
SET_ACTIVE_NOTEBOOK,
SET_ACTIVE_NOTE,
ADD_NOTEBOOK,
ADD_NOTE,
ADD_TAG
} from './index'
const api = 'https://my-json-server.typicode.com/abhinav1507/demo'
export default {
getNotebooks({ commit }) {
axios.get(`${api}/notebooks`).then(response => {
commit(SET_NOTEBOOKS, response.data)
})
},
getNotes({ commit }) {
axios.get(`${api}/notes`).then(response => {
commit(SET_NOTES, response.data)
})
},
getTags({ commit }) {
axios.get(`${api}/tags`).then(response => {
commit(SET_TAGS, response.data)
})
},
setActiveNotebook({ commit }, notebook) {
commit(SET_ACTIVE_NOTEBOOK, notebook)
},
setActiveNote({ commit }, note) {
commit(SET_ACTIVE_NOTE, note)
},
addNotebook({ commit }, notebook) {
axios.post(`${api}/notebooks`, notebook).then(response => {
commit(ADD_NOTEBOOK, response.data)
})
},
addNote({ commit }, note) {
axios.post(`${api}/notes`, note).then(response => {
commit(ADD_NOTE, response.data)
})
},
addTag({ commit }, tag) {
axios.post(`${api}/tags`, tag).then(response => {
commit(ADD_TAG, response.data)
})
}
}
搞定Vue版印象笔记超轻松！只要会用组件开发、导航、状态管理等功能，再加上FontAwesome和Bootstrap-Vue两大助手，很快你就能打造出炫酷的用户界面和实用的应用了。就跟玩儿积木似的，超级简单！
咱们的Vue应用越来越牛了！每次升级总能见到新功能和好看的模板，绝对让你玩到上瘾！
import Vue from 'vue'
import Vuex from 'vuex'
import VueRouter from 'vue-router'
import Home from '@/views/Home.vue'
import Notebook from '@/views/Notebook.vue'
Vue.use(VueRouter)
Vue.use(Vuex)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/notebook/:id',
name: 'Notebook',
component: Notebook
}
]
const router = new VueRouter({
routes
})
export default router
。
评论0