利用ElementUI
开发一个简易的Blog。这里总结一下Vue项目里的模块化开发方式。
模块化思想
推荐文章:知乎–精读js模块化发展这里的模块化主要用ES6的 import
、export
模块。
Vue项目目录中src
文件夹的部分:
可以看到,router
和store
模块负责的都只是一个index.js
文件。
对,index.js这个名字和index.html用意一样,直接引入文件夹名,就可以读取index.js文件的内容
分两部分说:
1、Router
Vue-Router的部分。
1 | import Vue from 'vue' |
这是一个总的路由文件,但是有时候我们的项目路由会分为几个模块(如article
,page
,album
,对应不同的页面),一个模块会对应几个路由。这时候如果全都写在一个index.js
文件,会让这个文件内容变的很复杂。
所以我们可以在router
文件夹下建一个modules
文件夹,把每个模块需要用到的路由写到对应的文件里。
举个栗子。如article
模块,要用到/page
和/page:page_id
。
在article.js
声明路由:
1 | const articleRoutes = [ |
在index.js
里导入
1 | import Vue from 'vue' |
2、Store
Store是Vuex中用于管理状态的,index.js
文件如下:
1 | import Vue from 'vue' |
这里相当于一个总的文件,在这里注意到一个属性modules
,可以通过这个属性,引入单个的模块。
同样的,也创建一个modules
文件夹,在其中写每个模块负责的状态(state):
新建模块:article.js
:
1 | export default{ |
这里的namespaced
可以起到避免命名冲突的作用(防止不同模块中定义的state有冲突,后面讲引入的区别)
index.js
中引入模块
1 | import Vue from 'vue' |
在vue组件中引用模块
1 | <script> |
(¦3[▓▓]
- 本文链接: https://anyway521.gitee.io/post/40f6d211.html
- 最后更新:
- 版权声明: 博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议进行许可,转载请注明出处!