谈一谈|个人博客网站开发记录二
前言
在上周进行整体介绍后
(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、css
5. components组件（又分为各页面公用组件和私用组件）
6. network用于封装网络请求、集中管理接口
7. router前端路由
8. storeVuex类型于单例模式的vue对象(一个全局对象，用于全局的状态管理，解决各组件间的通信问题)
9. view编写的主要页面
10. App.vue将所有内容分为一个个模块，一定有个最大的模块负责整合所有模块，便是App.vue
11. 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 团队