vue-cli-plugin-sexy-base 是一个 Vue CLI 插件，它提供了一些基础的配置和组件，可以帮助你快速搭建一个 Vue 项目，并且这些组件都有可自定义的样式。
安装
首先，你需要安装 Vue CLI。
npm install -g vue-cli
接着，新建一个 Vue 项目。
vue init webpack my-project cd my-project
然后安装 vue-cli-plugin-sexy-base。
vue add sexy-base
安装完成后，你会看到提示，让你选择需要添加的组件。
组件
vue-cli-plugin-sexy-base 包含了以下组件：
BaseHeader
顶部导航栏组件。
<base-header></base-header>
BaseNav
左侧导航栏组件。
<base-nav></base-nav>
BaseMain
页面主体组件。
<base-main></base-main>
BaseFooter
页面底部组件。
<base-footer></base-footer>
BaseButton
按钮组件。
<base-button>Click me!</base-button>
BaseInput
输入框组件。
<base-input v-model="message"></base-input>
BaseSelect
下拉选择框组件。
<base-select v-model="selected" :options="options"></base-select>
BaseCheckbox
复选框组件。
<base-checkbox v-model="checked">Check me out</base-checkbox>
BaseRadio
单选框组件。
<base-radio v-model="picked" :options="options"></base-radio>
自定义
如果你需要自定义组件的样式，你可以在项目根目录下创建一个名为 sexy-base.scss 的文件，然后在其中写样式。
例如，如果你想自定义 BaseButton 的样式，你可以这样写：
-- -------------------- ---- ------- -- -------------- ------- ------------------------------------------------------------------------ -- ---- ------ ------ ------------ - ----------------- ----- ------ ----- -
结语
vue-cli-plugin-sexy-base 可以帮助你快速搭建一个 Vue 项目，同时它的组件都具有可自定义的样式。如果你正在开发一个 Vue 项目，不妨试试这个插件吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d630d0927023822bb9