vue快速建站（vue快速搭建网站）

本文目录一览：

• 1、Vue 项目创建基础配置
• 2、学会CabloyJS，5分钟就能建网站
• 3、Vite+Vue3+Vant快速构建项目

Vue 项目创建基础配置

Vue 项目创建时候的一些基础配置小记：

CLI 即 @vue/cli 全局安装的 npm 包用于终端提供 vue 相关的拍烂指令，可用来创建工程、启动服务等；

CLI service 即 @vue/cli-service 开举扰发环境的依赖，构建于 webpack 和 webpack-dev-server，可用来serve 启服务、编译构建 build 工程、配置 css、配置 webpack 等；

CLI 插件可以集成一些架包快速配置项目等；

项目创建，cd 到指定的目录下，执行

创建项目 create 后会有几个袭答漏配置选项，具体如下：

1.use history mode for router - Y

即 vue-router 利用浏览器自身的 hash 模式和 history 模式特性实现前端路由

其中 hash 模式浏览器 url 地址中会带有 # 号，而history 则利用 html5 的 history interface 中新增的 pushState 和 replaceState 方法

2.Pick a CSS pre-processor - stylus

SCSS/SASS：scss 是 sass3 的新语法，完全兼容css3 且继承于 sass；sass 需 ruby环境，在服务端处理

LESS：借助 node.js 通过编译处理输出 css 至浏览器，同时兼容客户端与服务端运行

Stylus：用于给 node 项目进行 css 预处理支持，stylus 功能上更加强壮和 js 关系更加紧密

3.Pick a linter / formatter config - ESLint + Prettier

ESLint with error prevention only: 仅错误预防

ESLint + Airbnb config

ESLint + Standard config: 标准模式

ESLint + Prettier: 使用较多，推荐

4.Pick additional lint features - Lint on save

(·) Lint on save：保存即检查

( ) Lint and fix on commit： fix 和 commit 的时候才检查

5.Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys) - In dedicated config files

In dedicated config files：独立文件中放置

In package.json：放在 package.json 中

6.Save this as a preset for future projects - N

是否记录本次创建工程的如上配置选项并起个名称

安装时可能需要的一些资源： nodejs 、 Homebrew

以上便是此次分享的全部内容，希望能对大家有所帮助！

学会CabloyJS，5分钟就能建网站

引言

凡是可以用 JavaScript 来写的应用，最终都会用 JavaScript 来写 | Atwood 定律

目前市面上出现的大多数与 NodeJS 相关的框架，基本都将 NodeJS 定位在工具层、聚合层、中间层、代理层，很少在业务层面进行深耕，认为这是 JAVA 的领域，NodeJS 不适合。这种思潮明显是与Atwood 定律相悖的

如果您想感受不同的 NodeJS 全栈开发体验，一定要试试自带工作流引擎的 CabloyJS 全栈开源框架。为了提升业务层面的开发效率和开发体验，CabloyJS 在前端和后端均提供了大量实用的工具和组件

CabloyJS可以开发什么系统

可以开发多租户SAAS业务系统

可以开发前后端分离的后台业务管理系统，如OA、CRM、ERP、电商，等等

可以开发JAMStack架构的CMS内容管理系统，支持SEO优化，如博客、技术文档、社区、知识店铺，等等

既可以先开发后台业务管理系统，再延伸开发CMS内容管理系统；也可以反过来，先开发CMS内容管理系统，再延伸开发后台业务管理系统

可以通过Cordova开发各类App应用，支持IOS、Android

可以通过Electron开发桌面应用

可以开发微信公众号、企业微信、钉钉，等第三方平台的应用，解决信息孤岛的问题

可以为Uniapp小程序开发后端API接口

CabloyJS是什么样的框架

CabloyJS 是一款自带工作流引擎的 Node.js 全栈框架，一款面向开发者的低代码开发平台，更是一款兼具低代码的开箱即用和专业代码的灵活定制的 PAAS 平台

CabloyJS 内置的每一项特性都做到精心调校，均体现了从开箱即用到灵活定制的无缝衔接，包括：角色系统、用户认证、菜单权限、数据权限、表单渲染、表单验证、工作流引擎、字典、仪表板、在线推送、页面主题、多语言国际化、CMS 渲染引擎、微信接口、企业微信接口、钉钉接口，等等

技术栈

场景 技术栈

前端 vue2 + framework7

后端 koa2 + egg2

数据库 mysql

分布式（缓存/队列/消息） redis、bullmq、websocket

Markdown 富文本编辑 Prosemirror

CabloyJS 解决了哪些悄旅渣现实痛点问题？

在 NodeJS 开发领域，目前(截止 2022 年 1 月)存在以下几个痛点问题：

1. 中后台管理系统如何更优雅的支持移动端？

随着移动终端的普及和升级换代，大量业务场景都需要移动端的支持，比如管理层需要通过手机查看统计数据、审核业务单据；运维人员通过手机远程查看服务器状态，并进行调整优化

我们知道，市面上大多数中后台管理系统，都是优先适配 PC 端，然而移动端体验却不佳，处于勉强可用，但不好用的阶段

此外，大多数XXX Admin框架和中后台管理框架其本质是代码模版。在具体开发项目时，直接在代码模版中编写代码。这样，虽然修改起来很直接，但是不利于模版的持续升级和优化；也不利于业务代码的持续沉淀和迁启悄移（至其他项目）。因镇悔此，当把代码模版从源码仓库下载下来之后，修改三分之一，增加三分之一，删减三分之一，从此就与代码模版的后续升级版本绝缘了

2. NodeJS 领域没有好用的工作流引擎！

如果单说 CRUD，大多数编程语言的开发框架都可以轻松实现，这不应该成为 NodeJS 开发业务系统的核心优势。若要让 NodeJS 深入业务领域的开发，工作流引擎是一个绕不过去的核心组件

3. 拖拽式低代码平台已经成为鸡肋方案！

大多数业务表单不仅仅是一些字段的简单组合和增删改查，不同的业务都有自己独特的业务诉求，往往需要前端界面的定制和后端逻辑的定制。拖拽式低代码平台，对于业务人员而言没有足够的工具进行深入定制，对于研发人员而言也没有足够的机制深入开发

许多拖拽式低代码平台认识到了这一点，所以针对不同的业务场景提供官方预配置的套装解决方案，这同样也把业务人员和研发人员置于不上不下的尴尬境地，成为食之无味 弃之可惜的鸡肋平台

Vite+Vue3+Vant快速构建项目

随着 Vue3 和 Vite 版本的不槐迅亩断更新完善，开发体验有了质的飞跃。因此昌坦，越来越多的大厂也逐步拥抱 Vue3 。

利用 Vite 脚手架工具可以很轻松生成以 Vue3 为模板的项目，但是作为 Vue 全家桶的 vue-router 、 vuex 、 axios 等成员，需要自己一个一个去配铅森置。于是便自行开发了本文讲到的 tive-cli 脚手架模板工具，只需短短几个命令便能快速生成配置健全的 Vue3全家桶 项目，并且集成了 VantUI ，内置了 rem 移动端适配，真正做到了 开箱即用 。

执行次命令后，会出现命令行交互式选择，可使用上（ ↑ ）下（ ↓ ）箭头进行选择，如下：

提示： 该脚手架内置了 Vue2.0 和 Vue3.0 两个版本所对应的 Vue全家桶 模板，可根据项目需要自行选择。

回车（ enter ）确认后，会输出：

接下来就可以按照提示的命令进行操作：

不出意外项目就成功启动了。

欢迎访问： 天问博客