c42-template-vue

基于 vue 的前端项目样板

安装

按照 克隆项目 的提示，克隆本项目到本地，并 copy 到你真正的开发目录。

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

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

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

开发

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

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

Storybook

yarn start # 启动 storybook

storybook 是一种组件展示技术，可以展示组件在各种调用环境下的外观和行为，一般用于半自动化测试组件。展示内容列表写在 ./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

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

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

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

构建

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

1. 如果开发的是一个完整的 vue app，不应该存在 src/export.js。此时构建以 src/main.js 为入口。
2. 如果开发的是一个需要对外发布的 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。

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

发布

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

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

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

Caveats

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

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

只能写：

import Child from 'path/to/child'

export default {
  components: {
    Child,
  },
}

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

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

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