标签：src vue auto route 目录 router sfc

介绍

根据提供的router对象，自动创建对应的页面目录以及.vue组件文件（SFC）

使用场景

在使用vue-router时，一个route需要绑定一个component，这个component往往对应一个.vue文件（即单文件组件/SFC）。

一般我们需要手动创建对应的目录以及.vue文件，但是在嵌套关系复杂、文件众多的情况下这种操作就会显得繁琐。

既然我们已经在router.routes中，定义了这些component的目录位置及命名，其实是可以直接利用这个信息去自动创建目录以及文件。auto-vue-route-sfc就是用于完成这个工作的。

支持

• 目前在vue-router4下使用，后续会兼容vue-router3
• 支持import、import()、require()方式的模块引入语法
• 支持你对import()、require()进行自己的逻辑包装

使用指引

前提

确保你有一个输出router对象的文件

安装

npm i -D auto-vue-route-sfc

建立配置文件

在项目根目录下创建一个配置文件auto-vue-route-sfc.config.js，内容示例如下：

module.exports = {
    entry: './src/router/index.js',
    routerDir: './src/router'
}

其中：

• entry: 是你输出router对象的文件
• routerDir: 是你的路由功能模块所在的目录

若你是使用vue-cli创建的自带vue-router的项目，则默认的设置就同示例中的一样，无需做额外的更改。

运行命令

方式一

打开终端，在根目录下运行

npx auto-vue-route-sfc

方式二

或者也可以在项目package.json中配置script命令

 // package.json
 "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "auto:sfc": "npx auto-vue-route-sfc" // 新增命令
  },

然后在终端运行

npm run auto:sfc

若顺利，将看到你的页面目录以及组件文件将被自动创建

标签：src,vue,auto,route,目录,router,sfc
来源： https://blog.csdn.net/TheJormangund/article/details/122649745

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。