谈一谈|个人博客网站开发记录二---算法与编程之美

前言

在上周进行整体介绍后

(https://mp.weixin.qq.com/s/oCNcDHHw3ex8XB5-XmlbaA)

来看看具体的开发的过程吧。

项目开发进程

用户界面:yuantao.store

后台管理界面，数据的增删改查，在线文档编辑，文章上传及解析功能已完成:behind.yuantao.store

项目创建

1.安装nodejs(需要用到其npm模块进行包管理)。

2.使用npm安装webpack和vue-cli,如果不在意使用的版本，建议全局安装.

3.使用vue-cli创建项目，vue create 项目名

4.进入项目根目录，使用npm安装v-router,vuex,axios

注意事项

安装插件时区分哪些插件是只在开发时使用的，哪些是上线后仍要使用的。

如果只是在开发时使用，安装时使用‘npm install 插件名 –dev ’命令。打包时便会忽略这些插件。

项目结构说明

对应文件夹没有生成，可以自己新建。

1. dist项目打包生成的文件夹(部署项目时，只需要这个文件夹内容即可)2. node_modules下载的所有插件都在这里面3. public网站首页(一般只在里面写GSD引入)4. assets静态资源：如img、css5. components组件（又分为各页面公用组件和私用组件）6. network用于封装网络请求、集中管理接口7. router前端路由8. storeVuex类型于单例模式的vue对象(一个全局对象，用于全局的状态管理，解决各组件间的通信问题)9. view编写的主要页面10. App.vue将所有内容分为一个个模块，一定有个最大的模块负责整合所有模块，便是App.vue11. main.js项目入口,全局插件引入(部分插件需要注册)的地方，将App.vue挂载到public中的网站首页的地方。12. .browserslistrc浏览器适配13. .gitignore上传到git时哪些文件需要忽略14. babel.config.js项目配置文件之一。15. package.json引入插件信息16. package-lock.json引入插件真实版本信息17. README.md项目说明文件(自己写)

项目开发

1.导航栏编写

在components中新建文件夹，再新建.vue文件.在.vue文件中完成导航栏编写。如果你封装得足够好，那么在下一个项目中，直接将该文件夹拷贝过去，一样能正常使用。

大的导航栏可以视为 一个模块，每个红色方形可以视为一个模块。左边4个模块在形式上是一样的，所以一共就3个模块，大的导航栏，页面切换按钮以及搜索框。

1.页面切换按钮制作

文字内容itemtext在调用该模块的时候传入，图片利用slot插槽占位(需要插入两张图片,为插槽添加name属性,插入时做区分)，表示调用的时候需要往该模块内插入内容。

利用v-if-else判断点击的时候显示什么，默认状态下显示什么。判断什么时候该按钮处于活跃状态先不考虑，配合v-router这会十分简单。

对最外层的div添加‘flex:1;’的样式。

navBarItem.vue

2.导航栏封装

大的导航栏只是一个灰色的长方形，等会需要插入多个页面切换按钮，预留slot插槽。

在style中添加flex布局‘display:flex;’

navBar.vue

3.整合

通过import引入前两个组件，在components中注册。页面切换按钮根据自己需要添加，flex布局会根据按钮数量进行均分排列.搜索框同样的原理，限于篇幅就不赘述。

记得在App.vue中导入，并使用。

App.vue

inputcontext.vue

2. 导航栏与对应页面的绑定

1. 在views文件中建立所有需要用到的页面

2. 在main.js中引入v-router

3.在router文件夹下的index.js文件内引入views中的每个页面模块,并配置路由，格式如下。前端路由的作用在于，当你在网址后添加/home就会加载对应模块的内容。

4.路由及对应模块的展示

更改网址加载对应模块，那么在哪加载呢？

只需要在App.vue中添加<router-view></router-view>标签，对应模块的内容便会替换该标签。

5.导航按钮绑定路由

切换路由可以加载对应模块，当点击导航栏某个按钮时执行切换路由的操作，便完成了页面的切换。

navBarItem.vue

效果展示

总结

基于vue模块化的设计及应用，在制作网页时可以大大减少我们的工作量。如果在实践中遇到问题，欢迎留言咨询。

END

主 编 | 王文星

责 编 | 马原涛

where2go 团队