Vue项目组件化工程开发实践方案

2020-06-16 06:06:38易采站长站整理

通过创建组件的命令传递两个参数,一个代表组件的名称(创建组件的文件夹名称),另外一个是组件的标题(用于文档工程和例子工程的导航名称显示)。有了这两个参数,我们就可以结合组件的模板文件生成对应的组件,然后将这些组件信息写入gen/route.json里面,因为文档工程和例子工程都非常依赖这些信息。 组件创建完毕有一个很重要的工作就是自动往文档工程里面注册新的组件信息(docs/main.js)和更新组件库的对外主文件(src/index.js),这两个文件也分别是通过模板生成的,模板格式分别如下:

使用

只需要四条命令就能开启一个自动化组件工程了:

1、全局安装vde-cli模块


npm install -g vde-cli

2、初始化工程


$ vde init <project-name>

3、安装所需要模块


$ npm install

4、启动项目


$ npm run start

然后整个工程就能运行起来了,应用的时候可以根据实际需求修改组件相关的模板和加入自己的组件库的其它配置信息就可以了。文档工程和例子工程的路由等信息都会在通过创建组件命令的时候自动更新,你在更改组件的文档和组件功能的时候,文档工程和例子工程都会实时更新。

实际项目接入

这里推荐使用npm link的方式,在项目里npm link本地用vde init的那个工程即可。

总结

以上所述是小编给大家介绍的Vue项目组件化工程开发实践方案,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持!