webpack配置,vue配置webpack

　　本文主要介绍了基于Vue Webpack的路由文件拆分管理，并通过示例代码进行了详细介绍。对大家的学习或者工作都有一定的参考价值，有需要的朋友可以参考一下。

　　事实是，如果你的项目不是特别大，通常不需要拆分。如果项目大，就需要考虑拆分路线。其实这个操作并不复杂。

　　当我们使用vue-cli工具创建一个新的vue项目时，我们已经为每个人创建了一个新的路由文件src/router/index.js，其内容如下：

　　从“vue”导入Vue

　　从“vue路由器”导入路由器

　　从“@/components/HelloWorld”导入HelloWorld

　　Vue.use(路由器)

　　导出默认新路由器({

　　路线：[

　　{

　　路径：“/”，

　　名称：“HelloWorld”，

　　组件：HelloWorld

　　}

　　]

　　})

　　我们根据这份文件进行调整。比如我们现在要创建一个新的新闻路由，然后这个路由下面还有一些子路由，可以这样写：

　　Router/index.js文件调整

　　//src/路由器/index.js

　　从“vue”导入Vue

　　从“vue路由器”导入路由器

　　//子路由视图VUE组件

　　从“@/frame/frame”导入帧

　　从“@/components/HelloWorld”导入HelloWorld

　　//引用新闻子路由配置文件

　　从导入新闻。/news.js

　　Vue.use(路由器)

　　导出默认新路由器({

　　路线：[

　　{

　　路径：“/”，

　　名称：“HelloWorld”，

　　组件：HelloWorld

　　}, {

　　路径：“/新闻”，

　　组件：框架，

　　儿童：新闻

　　}

　　]

　　})

　　如上，我们可以引入一个子路由视图的vue组件，然后引入新闻的子路由配置文件。让我们写这两份文件。

　　帧/帧子路由视图的vue组件

　　模板

　　路由器-视图/

　　/模板

　　子路由视图组件非常简单。如上，三行代码就足够了。有关路由器视图的相关内容，请查看：

　　https://router.vuejs.org/zh/api/#router-view

　　Router/news.js子路由配置文件

　　其实配置这个文件和vue没有任何关系，只是js es6的导出和导入。

　　从“@/page/news/main”导入主页

　　从“@/页面/新闻/详细信息”导入详细信息

　　导出默认值[

　　{路径： ，组件：main}，

　　{路径：详细信息，组件：详细信息}

　　]

　　如上，可以。我们已经完成了路线的多文件管理。看，这不是很简单吗？如果你有什么问题，请在评论里留下，我会花时间回答你的。

　　更多信息请参考官方网站：https://router.vuejs.org/zh/.

　　这就是本文的全部内容。希望对大家的学习有帮助，支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。