编译bundler
因为bootstrap 4.0.0将放弃less转用sass来处理css，所以开发环境需要装SASS插件（必须先安装Ruby）。
安装Ruby，略。
安装SASS
gem install sass
安装Node.js，略。
安装grunt
npm install -g grunt
安装node-sass，大多数环境正常。安装不成功的话可以看后面的手动编译css部分。
npm install -g node-sass
grunt打包，加强制参数
grunt --force
在dist目录下编译出下列文件
|-- dist
|-- css
|-- bootstrap.css
|-- bootstrap.css.map
|-- bootstrap.min.css
|-- bootstrap.min.css.map
|-- js
|-- bootstrap.js
|-- bootstrap.min.js
|-- npm.js
|-- umd
|-- alert.js
|-- button.js
|-- carousel.js
|-- collapse.js
|-- dropdown.js
|-- modal.js
|-- popover.js
|-- scrollspy.js
|-- tab.js
|-- tooltip.js
|-- util.js
scsslint检查时可能会报错，可以将bundleExcc关掉，不用本地的
//You can choose to have your gems installed via bundler and if so, set this option to true to use the local gems.
scsslint: {
options: {
bundleExec: false,
config: 'scss/.scss-lint.yml',
reporterOutput: null
},
src: ['scss/*.scss', '!scss/_normalize.scss']
}
手动编译css，进入scss目录会看到大量的scss文件。主要关注下面几个
|-- scss
|-- ...
|-- bootstrap.scss
|-- bootstrap-flex.scss
|-- bootstrap-grid.scss
|-- bootstrap-reboot.scss
|-- ...
可以用sass命令直接生成相应的css文件和map文件
sass bootstrap.scss bootstrap.css
sass bootstrap-flex.scss bootstrap-flex.css
sass bootstrap-grid.scss bootstrap-grid.css
sass bootstrap-reboot.scss bootstrap-reboot.css
‘贰’ vue3 模板编译报错
template 会在编译的时候警告
意思： 组件提供模板选项，但是在Vue的这个构建中不支持运行时编译，配置你的bundler别名 vue： vue/dist/vue.esm-bundler.js
vue 的使用环境，分为两种环境，一种是开发，一种是生产，
原文链接： https://blog.csdn.net/qq_41499782/article/details/112505665
‘叁’ 如何快速正确的安装 Ruby，Rails 运行环境 · Ruby China
安装 Ruby，Rails 运行环境首先确定操作系统环境，不建议在 Windows 上面搞，所以你需要用: Mac OS X 任意 Linux 发行版本(Ubuntu,CentOS, Redhat, ArchLinux ...) 强烈新手使用 Ubuntu 省掉不必要的麻烦！ 以下代码区域，带有 $ 打头的表示需要在控制台（终端）下面执行（不包括 $ 符号）步骤0 － 安装系统需要的包# For Mac # 先安装 [Xcode] 开发工具，它将帮你安装好 Unix 环境需要的开发包# 然后安装 [Homebrew]
$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
OS X 安装 Rails 必要的一些三方库
$ brew install libxml2 libxslt libiconv
步骤1 － 安装 RVMRVM 是干什么的这里就不解释了，后面你将会慢慢搞明白。
$ gpg --keyserver hkp://keys.gnupg.net --recv-keys $ curl -sSL https://get.rvm.io | bash -s stable
# 如果上面的连接失败，可以尝试:
$ curl -L https://raw.githubusercontent.com/wayneeseguin/rvm/master/binscripts/rvm-installer | bash -s stable
期间可能会问你 sudo 管理员密码，以及自动通过 Homebrew 安装依赖包，等待一段时间后就可以成功安装好 RVM。然后，载入 RVM 环境（新开 Termal 就不用这么做了，会自动重新载入的）$ source ~/.rvm/scripts/rvm修改 RVM 下载 Ruby 的源，到 Ruby China 的镜像:
echo "ruby_url=https://cache.ruby-china.org/pub/ruby" > ~/.rvm/user/db
检查一下是否安装正确
$ rvm -vrvm 1.22.17 (stable) by Wayne E. Seguin <[email protected]>, Michal Papis <[email protected]> [https://rvm.io/]
步骤2 － 用 RVM 安装 Ruby 环境$ rvm requirements$ rvm install 2.3.0同样继续等待漫长的下载，编译过程，完成以后，Ruby, Ruby Gems 就安装好了。步骤3 － 设置 Ruby 版本RVM 装好以后，需要执行下面的命令将指定版本的 Ruby 设置为系统默认版本$ rvm use 2.3.0 --default同样，也可以用其他版本号，前提是你有用 rvm install 安装过那个版本这个时候你可以测试是否正确
$ ruby -vruby 2.3.0 ...$ gem -v2.1.6$ gem sources --add https://gems.ruby-china.org/ --remove https://rubygems.org/
安装 Bundler$ gem install bundler步骤4 － 安装 Rails 环境上面 3 个步骤过后，Ruby 环境就安装好了，接下来安装 Rails$ gem install rails然后测试安装是否正确$ rails -vRails 4.2.5然后开始你的 Ruby，Rails 之旅吧。 欢迎来到 Ruby 的世界！
‘肆’ vue各版本命名
Vue的各种版本介绍：
cjs（两个版本都是完整版，包含编译器
）vue.cjs.js
vue.cjs.prod.js（开发版，代码进行了压缩）
global（这四个版本都可以在浏览器中直接通过scripts标签导入，导入之后会增加一个全局的Vue对象）
vue.global.js（完整版，包含编译器和运行时）
vue.global.prod.js（完整版，包含编译器和运行时，这是开发版本，代码进行了压缩）
vue.runtime.global.js
vue.runtime.global.prod.js
browser（四个版本都包含esm，浏览器的原生模块化方式，可以直接通过的方式来导入模块）
vue.esm-browser.js
vue.esm-browser.prod.js
vue.runtime.esm-browser.js
vue.runtime.esm-browser.prod.js
bundler（这两个版本没有打包所有的代码，只会打包使用的代码，需要配合打包工具来使用，会让Vue体积更小）
vue.esm-bundler.js
bue.runtime.esm-bundler.js
在vue的文档中我们可以了解到vue有两个版本（vue.js），完整版与不完整版(vue.runtime.js),其中的vue.min.js和vue.runtime.js是完整版与不完整版的缩小版，省去了里面的注释。
template标签在vue实例绑定的元素内部，它是可以显示template标签中的内容，但是查看后台的dom结构不存在template标签。如果template标签不放在vue实例绑定的元素内部默认里面的内容不能显示在页面上，但是查看后台dom结构存在template标签。
‘伍’ 如何利用 onion 管理 php 专案
相信只要是 Ruby 开发者，都会对 Gem 这个专案套件管理机制非常赞赏。而其中还有一个很棒的工具叫做 bundler，它能在我们布署专案时，协助我们处理专案所会相依的 gem 套件。
PHP 在这方面虽然旅脊余有 PEAR 这个套件管理库，但是能够处理专案相依套件的功能却付之阙如。所幸网路高手 c9s 也发现了这个问题，因此他便开发了 Onion 这个非常好用的 PEAR 套件管理工具。（http://hounwang.com/lesson.html）
在“ 利用 GitHub 建立自己的 PEAR 频道”一文中，笔者曾简单地介绍 Onion 建立 PEAR 套件的方式，本文将继续为大家介绍 Onion 的其他强项功能。
Onion 入门
1. 安装
Onion 的安装很简单，只要透过 curl 指令就可以快速安装：
$ curl -s http://install.onionphp.org/ | sh
这样一来， onion 指令会被安装在个人家目录的 bin 资料夹下。如果你不想放在这个路径，那麽你也可以从以下路径直接下载：
https://raw.github.com/c9s/Onion/master/onion
然后再将它设为可执行，
$ chmod u+x onion
并搬移至系统 PATH 环境变数所找到的路径下即可，例如 /usr/local/bin/ 。
2. 功能简介
安装好 onion 指令后，直接输入：
$ onion
将可以看到以下输出：
alt
▲ 1：onion 指令之输出
在 onion 中可以使用的指令有：
help：显示说明文件，如图1 所示。
init：初始化 package.ini 文件。
build：建立 PEAR 套件。
compile：将目前的专案编译为 Phar 格式的函式库。
install：在 vendor 目录下，安装目前专案所相依的套件。
bundle：同 install 指令，为旧版相容用。
self-update：自我更新成最新的版本。
以下为大家介绍如何使用这些功能。
3. 专案初始化
在新版的 Onion 中，我们可以直接利用 init 指令来帮我们建立一个预设的 package.ini 档案，语法格式如下：
$ onion init＜dir＞
package.ini 是 Onion 用来管理套件所必要的档案，稍后笔者会再为大家详细介绍它。
4. 建立 PEAR 套件
在“利用 GitHub 建立自己的 PEAR 频道”一文中，笔者已经介绍过 build 指令的用法：
$ onion build --pear
这样一来， Onion 会透过 PEAR 的内建功能，为我们把目前的专案打包成 PEAR 可以接受的压缩档格式。
5. 编译为 Phar 格式的函式库
PHP 的 Phar 格式类似 Java 中的 JAR 格式，可以将套件下所有的 PHP 档案全部包成一个压缩档，方法如下：
alt
▲ 2：onion compile 的范例指令
这麽一来我们会得到一个 example.phar 的档案，而程式进入点则为专案中的 example.php。以下方式就可以让这个 Phar 档直接执行：
$ mv example.phar example
$ chmod +x example
$ ./example
注：如果各位打算将套件打包成 Phar 档的话，那麽要注意 require(_once) 及 include(_once) 所引入的档案路径，必须是相对的才行
6. 安装目前专案所相依的套件
在开发 Ruby 专案时，我们可以用 Gemfile 来管理相依的套件；而这对 Onion 来说，也是很容易的事情。
在 package.ini 中定义好专案所相依的 PEAR 套件后，就可以用以下指令来安装：
$ onion install
接下来 Onion 就会把这些相依套件安装在专案的 vendor/pear 路径下。至于如何在 package.ini 设定相依套件，稍后笔者会再详细介绍。
7. 自我更新版本
c9s 所开发的 PHP 工具几乎都有这个强大的功能，可野州以自行将工具的版本升级，指令拆滚如下：
$ onion self-update
这样一来，就可以更新到最新的版本。
package.ini 常用设定介绍
接下来笔者要为大家介绍 package.ini 中，几个比较常用区段的设定说明。
1. package
这个区段是在执行完 init 指令后，就会自动建立好的。 Onion 会事先提供：name、 version、 desc 及 author 等四个参数；以下为目前所支援的参数说明，标明“选用”的参数可以不写：
[package]
; 套件名称
name = Your Package Name
; 套件描述
desc = Description
; 同 desc (选用)
summary = ....
; 套件的官方网站 (选用)
homepage = http://your.web.com
; 版权说明，预设为 PHP (选用)
license = PHP
; 版本号
version = 0.0.1
; API 的版本号，预设同 version (选用)
version.api = 0.0.1
; 套件频道，在打包成 PEAR 压缩档时会需要用到
; 预设为 pear.php.net (选用)
channel = pear.php.net
; 专案作者
author = Author Name ＜author＠example.com＞
; 专案有多个作者时可以用以下方式定义 (选用)
authors[] = Author Name ＜author＠example.com＞
authors[] = Author Name
; 程式码贡献者及维护者 (选用)
contributors[] = ...
maintainers[] = ...
2. require
这个区段主要描述专案所需要的环境及相依套件，它们在使用 install 指令时会用到；预设不会提供，需要自己加入。
[require]
; PHP 版本，可加入 ＞ 及 ＜ 等前置字符
php = '＞ 5.3'
; PEAR 安装程式版本
pearinstaller = '1.4.1'
; 专案所相依的 PEAR 套件，格式为“频道/套件名称 = 版本号”
; 其中版本号可以省略，这样 Onion 会直接下载最新版本
pear.channel.net/package = 1.1
; 相依套件的另一种写法，直接使用 URI 定义
package = http://www.example.com/Foo-1.3.0
; 专案会用到的 PHP extension
extensions[] = 'reflection'
extensions[] = 'ctype'
extensions[] = 'pcre'
3. roles
这个区段主要在定档套件中档案的角色，它们会依照角色的不同，被安装到适当的位置里。
[roles]
; 通常套件如果有提供 shell script 的话，可以将它放在 bin 目录下
; 并且给它 script 角色，那麽在透过 pear 指令安装时，
; 它就会被安装为系统指令
bin/your_script = script
; 其他副档名的角色，支援万用字符 (*)
*.md = doc
*.php = php
其他的区段在实务上笔者几乎用不到，若是有使用上的疑问，可以请教原作者 c9s。
范例
以下笔者将用 Library 及 Web Applicaton 这两种不同的范例，来介绍 Onion 在实际专案上是怎麽使用的。
1. Library
通常我们会希望开发出来的功能是可以被重复使用的，这时把它们打包成 library 是明智的选择。这里笔者将介绍
首先我们要依照 Onion 所规范的方式来定义专案的目录结构，假设专案的路径为 /path/to/library：
$ mkdir -p /path/to/library
$ cd /path/to/library
$ mkdir bin src docs tests
其中 bin 是放置 Shell Script，src 是存放 PHP 程式原始码；docs 则是用来存放文件，tests 则放置测试程式。
接下来我们要建立 package.ini ，执行：
$ onion init .
建立 package.ini 后，修改里面的内容：
[package]
name = UriFetcher
version = 0.0.1
desc = Fetch and cache data from URI
author = Jace Ju ＜jaceju＠example.com＞
channel = pear.jaceju.net
[require] php = "> 5.3"
pearinstaller = 1.4.1
[roles] bin/urifetcher = script
*.md = doc
*.php = php
这里我虚构了 UriFetcher 这个套件，它必须在 PHP 5.3 以上版本执行；另外这个套件也提供 urifetcher 这个 Shell Script ；当然，这里的内容只是范例，请大家依实际状况调整。
现在我们可以开始撰写套件内容了，这边就不再为大家详细介绍程式内容，只单纯列出这个套件的档案清单：
alt
▲ 3：onion - library tree layout
在 src 目录下，所有 PHP 类别档的命名与路径都要按照 PHP FIG PSR-0 的规范。
而在 tests 目录下，每个类别档的单元测试程式一样也是要遵守 PSR-0 规范。
在开发的过程中，各位可以选择使用 TDD 或其他惯用的开发流程。在确定功能无误后，我们就可以建立 package.xml，方便我们将套件安装到系统上测试；这个步骤可以透过以下指令来执行：
$ onion build
建立好 package.xml 后，就透过以下指令来进行安装测试：
$ pear config-set auto_discover 1
$ pear install -f package.xml
另外因为我们有加入 urifetcher 这个 shell script ，所以可以利用以下指令来查看它是否有被正常安装：
$ which urifetcher
在系统安装测试无误后，就可以按照“利用 GitHub 建立自己的 PEAR 频道”一文中所介绍的方式，来将套件打包并上传到我们自订的频道。
2. Web Application
Web Application 的开发方式其实与 Library 很像，差别在于它需要布署在 Web Server 上面来向浏览者提供服务，而非透过程式的呼叫。
通常它的目录结构会如下所示：
alt
▲ 4：onion - webapp tree layout
当然大家也可以采用目前一些常见 Web Framework 所定义好的目录结构，基本概念都是差不多的。
第一步我们当然是先初始化我们的 package.ini ，这里假设专案路径为 /path/to/webapp：
$ cd /path/to/webapp
$ onion init .
然后修改 package.ini 的内容：
[require]
pear.twig-project.org/Twig =
这里假设会在这个专案里面会用到 Twig 这个样版套件。
各位应该会发现笔者在这里只用到 require 这个区段，这是因为我们不需要打包 Web Application ，所以不需要把 package.ini 转译为 package.xml ；换句话说，在 Web Application 中，我们只需要透用 Onion 来管理相依套件。
接下来不论在在开发、测试或正式上线等环境，我们都可以用以下的方式来安装相依套件：
$ onion install
而在程式里面，我们必须在进入点 (通常是 index.php ) 的最上方，加入这段 PHP 码：
＜?php
// 加入此段程式码
set_include_path(implode(PATH_SEPARATOR, array(
__DIR__ . '/vendor/pear',
get_include_path(),
)));
// 自动载入的程式码
// ...
这样程式才能够先取用 vendor/pear 中的相依套件。
大致上笔者常用的功能就是这些，其他更进阶的功能，各位可以在 Onion 的官网与作者讨论。
心得
PHP 在第四版时，套件管理这个概念才正式进入 PHP ；而在实作上， PEAR 套件的开发方式也比其他语言的机制繁琐。
但即便如此，透过了 Onion 这个方便的工具，不但让我们能够轻松地管理专案的相依套件，也能够让我们能以简单的方式来设定自行开发的套件。
或许 PEAR 这个架构现在看起来是老旧了些，但还是有其他高手正努力为 PHP 开发更良好的套件管理机制。相信有一天，我们能够以更方便更快速的方式，来打造属于我们自己的 PHP 套件。
更多问题到问题求助专区 （http://bbs.hounwang.com/）