create-uniapp-view

在 VS Code 右键目录文件夹快速创建页面与组件，创建视图页面时将自动写入 pages.json！

改动日志

想让 uni-app 开发变得更直观、高效？想要更好的 uni-app 开发体验？不妨看看 uni-helper 主页和 uni-helper GitHub Organization！

插件特性

📁 创建页面、分包页面，自动向上查找 pages.json 并写入
📦 可深度目录创建，写入 pages.json 后仍可保留注释
✨ 可配置 vue2 | vue3 | composition-api(vue2) 模板，vue3 支持 <script setup>
🎨 支持用自己写的模板文件替代内置模板（页面与组件各一份）
📱 可切换生成 .vue 或 .nvue，nvue 用原生渲染对应的模板
👕 可配置 css | scss | less | stylus | sass 预处理器类型
🦾 typescript 为默认开发语言（可在设置中关闭）

使用 composition-api(vue2) 模板，建议配合 uni-composition-api 使用

使用

从 Visual Studio Marketplace 或 OpenVSX 安装插件，重启 VSCode 即可。

基本使用（page、component）

右键文件夹打开菜单选择创建类型，可选择创建组件、页面、分包页面，空格分隔视图名称与页面名称（navigationBarTitleText）。

基本使用演示：右键文件夹创建页面与组件

深度目录

^1.3.0 新增扩展能力，无特殊需求还是建议使用单文件模式。

分包页面

^1.3.0 新增功能，用于创建分包页面，并自动添加至 subPackages 字段中。

右键的目录就是这条分包的 root。如果该目录已经在某个已有分包里面，插件会复用那个分包，把页面写成相对它的路径，不会再建一条嵌套的 root。分包页面不能建在 pages.json 所在的根目录上；如果目标目录里已经有更深的分包，插件也会报错并指出是哪一条，因为两个 root 互相包含时平台构建会失败，怎么合并得你来定。

注意：cli 创建的项目若遇 vendor.js 过大，可以在 package.json 中添加参数 --minimize，具体参考官方文档：dcloud.io

分包页面演示：创建分包页面并写入 subPackages

nvue 页面与组件

打开 create-uniapp-view.nvue 后，生成的文件后缀是 .nvue，内容换成 nvue 模板。pages.json 里的 path 和 vue 页面一样不带扩展名，注册逻辑没有区别。

nvue 是 App 端的原生渲染，写法和 vue 页面有几处硬性差异：只有 flex 布局，view 默认宽高为 0，文字必须放在 text 里才能显示，字体大小和颜色只能设在 text 上。内置的 nvue 模板按这几条规则写了一份骨架：文字包在 text 里，根节点用 flex: 1 撑开并设了背景色，样式挂在固定的 page-root / component-root class 上（不用你输入的名称拼选择器）。脚本是选项式写法，vue2 和 vue3 都能跑，所以不会带 <script setup>。

想要别的 nvue 骨架就用自定义模板，它优先于 nvue 模板，.nvue 后缀仍然生效。

自定义模板

不想用内置模板时，把模板写成一个普通文件，再用设置告诉插件它在哪：

// .vscode/settings.json
{
  "create-uniapp-view.customPageTemplate": "templates/page.vue",
  "create-uniapp-view.customComponentTemplate": "templates/component.vue"
}

相对路径以工作区根目录为基准，所以模板文件可以提交进仓库、跟着项目走；也可以填绝对路径。

模板文件是普通的 .vue 文本，插件用 ejs 渲染，只有想插入变量时才需要写标签：

<script setup lang="ts">
</script>

<template>
  <view class="<%= options.name %>"><%= options.name %></view>
</template>

<style scoped></style>

可用的变量：

变量	含义
`<%= options.name %>`	输入框里的视图名称
`<%= options.typescript %>`	`create-uniapp-view.typescript` 的布尔值
`<%= options.setup %>`	`create-uniapp-view.setup` 的布尔值
`<%- options.scriptAttrs %>`	`<script ...>` 的属性片段，例如 `lang="ts" setup`
`<%- options.styleAttrs %>`	`<style ...>` 的属性片段，例如 `lang="scss" scoped`

scriptAttrs / styleAttrs 自带前导空格，直接写成 <script<%- options.scriptAttrs %>>。其中 setup 只在 create-uniapp-view.template 为 vue3 时出现，所以想复用这两个片段的 vue3 项目要把 template 保持在 vue3。

行为说明：

设了自定义模板，create-uniapp-view.template 就被整份忽略（填了非法值也不会报错）；typescript / style / scoped / setup 只通过上面两个属性片段间接生效；directory 与 name 照常起作用。
模板文件不存在、或 ejs 标签写错时，插件报错并中止，不会创建目录，也不会写入 pages.json。
ejs 会把文件里的 <% 当作标签，普通 Vue 模板里不会出现这个序列；万一需要输出字面量，用 <%%。

从用户代码片段迁移

插件读取的是普通文本文件，不是 VSCode 的 snippets。把片段里的 body 数组合并成文件，再做两处替换即可：

${1:占位文字} → 占位文字（或者直接删掉这段占位）
${TM_FILENAME_BASE} → <%= options.name %>

扩展设置

所有设置项都在 create-uniapp-view. 命名空间下，可在 VSCode 设置中修改，默认值与 package.json 中声明一致。

设置项	默认值	说明
`create-uniapp-view.typescript`	`true`	创建视图时是否选择 TypeScript 为默认语言
`create-uniapp-view.directory`	`false`	创建视图时是否创建同名文件夹
`create-uniapp-view.name`	`index`	创建文件夹中生成的文件名，可选 `index` 或 `与文件夹同名`
`create-uniapp-view.style`	`css`	创建视图时 CSS 预处理器的类型，可选 `css`、`scss`、`less`、`stylus`、`sass`
`create-uniapp-view.scoped`	`true`	创建模板时，是否使用 `<style scoped>`
`create-uniapp-view.setup`	`true`	创建 vue3 模板时，是否使用 `<script setup>`
`create-uniapp-view.template`	`vue3`	选择创建的模板，可选 `vue2`、`vue3`、`composition-api(vue2)`
`create-uniapp-view.customPageTemplate`	空	自定义页面模板文件的路径，相对路径以工作区根为基准；留空则使用内置模板。设置后忽略 `template`
`create-uniapp-view.customComponentTemplate`	空	自定义组件模板文件的路径，相对路径以工作区根为基准；留空则使用内置模板。设置后忽略 `template`
`create-uniapp-view.nvue`	`false`	创建 nvue 页面或组件：生成 `.nvue` 文件并使用 nvue 模板

命令

命令	标题
`create-uniapp-view.createPage`	新建uniapp页面
`create-uniapp-view.createSubcontractPage`	新建uniapp页面(分包)
`create-uniapp-view.createComponent`	新建uniapp组件

三个命令都注册在资源管理器右键菜单中，仅在文件夹上显示；从命令面板调用时会提示先在资源管理器中右键目标文件夹。

参与贡献

欢迎通过 Issue 或 Pull Request 参与改进本项目。开始前请阅读 CONTRIBUTING.md，了解项目结构、本地开发流程、测试方式与提交规范。

uni-create-view

毛先生