快速地^{start-simple-template} 创建 Web 单页应用

在线 Demo

特性

• ⚡️ Vue 2, vueCli@next, yarn - 很传统!!！

• 🗂 固定资源存放

• 📦 使用 vueRouter路由导航

• 🛒 使用 Vuex 的状态管理

• 🛴 lodash工具函数加持

• 🔨 vconsole 独特的调试方式

• 📑 目录系统归纳

• 🔥 使用 传统Option写法

• 🎭 使用 mock - 进行数据模拟

• 🎃 环境变量设定

• 🎄Less预处理器 样式处理

• ☁️ 零配置部署 Netlify

预配置

UI 框架

• ElementUI - 为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

• VantUI - 轻量、可靠的移动端 Vue 组件库

Icons

• Iconify - 使用任意的图标集，浏览：🔍Icônes
• UnoCSS 的纯 CSS 图标方案

插件

• babel-plugin-lodash - 按需加载 lodash 函数库

编码风格

• 使用 Composition API 地 <script setup> SFC 语法
• ESLint 配置为 @antfu/eslint-config, 单引号, 无分号.

衍生项目

由于这个模板的业务场景非常的局限，下面提供了一个精心策划的列表，列出了社区维护的具有不同偏好和功能集的衍生项目。也可以看看他们。当然也欢迎你 PR 提供自己的项目！

官方

• start-simple-template-lite - start-simple-template 的轻量版本
• start-simple-template-nuxt3 - start-simple-template 的 Nuxt 3 版本
• start-simple-template-nuxt-bridge - start-simple-template 的 Nuxt2 桥接版本
• start-simple-template-webext - 开箱即用的浏览器扩展 vite 模板

现在可以试试!

start-simple-template 需要 Node 版本 >=14

GitHub 模板

使用这个模板创建仓库.

克隆到本地

如果您更喜欢使用更干净的 git 历史记录手动执行此操作

npx degit dbudaiya/start-simple-template my-start-simple-template-app
cd my-start-simple-template-app
yarn i # 如果你没装过 yarn, 可以先运行: npm install -g yarn

清单

使用此模板时，请尝试按照清单正确更新您自己的信息

• 在 LICENSE 中改变作者名
• 在 App.vue 中改变标题
• 在 vue.config.ts 更改主机名
• 在 public 目录下改变favicon
• 整理 README 并删除路由

紧接着, 享受吧 :)

使用

开发

只需要执行以下命令就可以在 http://localhost:3333 中看到

yarn dev

构建

构建该应用只需要执行以下命令

yarn build

然后你会看到用于发布的 dist 文件夹被生成。

部署到 Netlify

前往 Netlify 并选择你的仓库, 一路 OK 下去，稍等一下后，你的应用将被创建.