# @c42/vue-b

> 基于 [vue](https://vuejs.org/) 的前端项目样板

Latest version **0.0.3** (published 2018-05-31) · UNLICENSED license · 0 weekly downloads

## Install

```sh
npm install @c42/vue-b
pnpm add @c42/vue-b
yarn add @c42/vue-b
bun add @c42/vue-b
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2018-05-31 |
| First published | 2018-05-31 |
| Weekly downloads | 0 |
| License | UNLICENSED |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 8.11.1 |
| Dependencies | 10 |
| Unpacked size | 152.4 KB |
| Known vulnerabilities | 0 (+25 in 2 direct dependencies) |
| Install scripts | no |
| Maintainers | beeplin |

## Links

- npm: https://www.npmjs.com/package/@c42/vue-b
- npm.io page: https://npm.io/package/@c42/vue-b

## Dependencies (10)

- [vue](https://npm.io/package/vue.md) ^2.5.16
- [vuex](https://npm.io/package/vuex.md) ^3.0.1
- [axios](https://npm.io/package/axios.md) ^0.18.0
- [dayjs](https://npm.io/package/dayjs.md) ^1.6.4
- [is-odd](https://npm.io/package/is-odd.md) ^2.0.0
- [vue-router](https://npm.io/package/vue-router.md) ^3.0.1
- [is-thirteen](https://npm.io/package/is-thirteen.md) ^2.0.0
- [@c42/commons](https://npm.io/package/@c42/commons.md) ^18.0.1
- [feathers-vuex](https://npm.io/package/feathers-vuex.md) ^1.4.2
- [babel-polyfill](https://npm.io/package/babel-polyfill.md) ^6.26.0

## Recent versions

- 0.0.3 (latest) — 2018-05-31

## README

# c42-template-vue

基于 [vue](https://vuejs.org/) 的前端项目样板

## 安装

按照 [克隆项目](https://code.aliyun.com/alphahr/tasks/tree/master#%E5%85%8B%E9%9A%86%E9%A1%B9%E7%9B%AE) 的提示，克隆本项目到本地，并 copy 到你真正的开发目录。

注意不要 copy /.git 目录，否则会把你真正开发项目的 .git 目录覆盖掉。

如果要使用 linux cp 命令移动项目，注意要加 `-a` 参数，以防遗漏隐藏文件。

克隆并 copy 完毕之后，进入你的开发项目目录，运行 `yarn` 进行初始化安装。强烈建议使用 `yarn` 代替 `npm`

## 开发

```bash
npm run dev # 启动 dev server，入口为 src/main.js -> App.vue。支持热重载
```

项目中 `src/store` `src/router` `src/components` `src/pages` 以及 `src/plugins` 中使用的 feathers、axios 均为示例文件，如项目不需要，请删除。

## Storybook

```bash
yarn start # 启动 storybook
```

[storybook](https://storybook.js.org) 是一种组件展示技术，可以展示组件在各种调用环境下的外观和行为，一般用于半自动化测试组件。展示内容列表写在 `./stories/xxx.stories.js` 中。

如果开发的是一个需要对外发布的 vue 组件，当然我们也可以手工构造 `src/main.js` `src/App.vue` 入口，在 `src/App.vue` 中调用你正在开发的组件，然后运行 `npm run dev` 来查看组件行为。
但是 `storybook` 是一种更方便的预览组件外观和行为的方式，它好处是可以预先定义很多 stories，在每个 story 里面给组件预先传入不同参数，快速预览组件在各种环境下的表现。

当然，storybook 并非组件开发模式专用。如果是开发一个完整的 app，也可以编写 stories 并且利用 storybook 来预览和调试其中的组件。

## lint

```bash
npm run lint # 运行 eslint、stylelint、stylues supremacy
```

每次 git commit 时都会自动先执行 `yarn lint`，所以 commit 一般会花十几秒钟才能完成。

如果 lint 不通过，则拒绝 commit。

## 构建

```bash
yarn build # 构建并打开构建报告 .build.report.html
```

1.  如果开发的是一个完整的 vue app，不应该存在 `src/export.js`。此时构建以 `src/main.js` 为入口。
1.  如果开发的是一个需要对外发布的 vue 组件，应该存在 `src/export.js`。此时构建以 `src/export.js` 为入口。

**请注意，`src/export.js` 文件是否存在，决定了构建的入口以及其他很多具体行为。`src/export.js` 非常重要！**

打包得到的 bundle 文件位置： `./dist/main.js`。如果开发的是一个需要对外发布的 vue 组件，则 bundle 中并不包含 `node_modules` 里面的模块。

构建完成后相关报告会保存在 `.build.report.html` 中。

## 配置

配置文件：`/vue.config.js`。参见 [https://github.com/vuejs/vue-cli/blob/dev/docs/config.md](https://github.com/vuejs/vue-cli/blob/dev/docs/config.md)。

如果开发的是一个需要对外发布的 vue 组件，请勿设置 `css.extract = true`，也不要修改 `baseUrl` `outputDir` 等。

## 发布

如果开发的是一个需要对外发布的 vue 组件，由 `src/export.js` 指定哪个文件是要对外发布的模块的入口。发布流程为：

```bash
npm version major|minor|patch # 发布前要先根据本次修改的性质升级版本号
npm publish # 之前需要先注册并登录 npmjs.com 帐号，并确保正在使用 npmjs.com 官方源。可以使用 nrm 来切换源。
```

如果开发的是一个完整的 app，则并不存在发布这个概念。**在此情况下，为了防止误操作发布，请设置 `package.json` 中的 `private` 字段为 `true`。**

## Caveats

如果开发的是一个需要对外发布的 vue 组件，组件内部不能使用异步加载子组件的语法加载其他**自定义**子组件或模块。也就是不能写：

```js
export default {
  components: {
    Child: () => import('path/to/child'),
  },
}
```

只能写：

```js
import Child from 'path/to/child'

export default {
  components: {
    Child,
  },
}
```

但是可以异步加载*第三方*组件或模块。也就是可以写：

```js
export default {
  async mounted() {
    const something = await import('something') // something 是第三方组件名，也就是 npm 包名
  },
}
```

所谓“自定义”和“第三方”组件、模块的区别，就是 `require` 或 `import` 的路径是否以 `./` 或 `../` 开头。自定义组件和模块是写在自己项目中并用相对路径引用的模块，而第三方组件和模块是通过 npm 安装在 `node_modules` 下的模块。

---
_Source: https://npm.io/package/@c42/vue-b · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._