::: tip 如果装包的过程长时间不动,建议 打断安装,自己手动在该项目中执行 npm install :::

    启动开发模式:

    1. cd admin-vue
    2. npm run dev

    1. .
    2. ├── build webpack打包相关配置文件目录
    3. ├── config webpack打包相关配置文件目录
    4. ├── node_modules 第三方包
    5. ├── src 源代码
    6. ├── assets 存放一些静态资源,例如 cssimgfonts
    7. ├── components 业务组件
    8. ├── router
    9. ├── └── index.js 路由配置文件
    10. ├── App.vue 根组件
    11. └── main.js 项目启动入口文件
    12. ├── static 静态资源
    13. └── .gitkeep 没啥用,用来充当一个文件就可以提交我们的 static 目录,未来有了其它文件可以把它删掉
    14. ├── .babelrc es6es5配置文件,给 babel 编译器用的
    15. ├── .editorconfig 给编辑器看的
    16. ├── .eslintrc.js eslint代码风格校验工具使用的,用来配置代码风格校验规则
    17. ├── .gitignore git使用的,用来配置忽略上传的文件
    18. ├── package.json 项目说明,用来保存依赖项等信息
    19. ├── package-lock.json 锁定第三方包的版本,以及保存包的下载地址
    20. ├── .postcssrc.js postcss用的,postcss类似于 lesssass 预处理器
    21. └── README.md 项目说明文档

    我们的项目采用 代码风格,以下是一些基本规范细则。

    • 使用两个空格 – 进行缩进
    • 字符串使用单引号 – 需要转义的地方除外
    • 不再有冗余的变量 – 这是导致 大量 bug 的源头!
    • 无分号不骗你!
    • 行首不要以 (, [, or ``` 开头
      • 这是省略分号时唯一会造成问题的地方 – 工具里已加了自动检测!
    • 关键字后加空格 if (condition) { ... }
    • 函数名后加空格 function name (arg) { ... }
    • 坚持使用全等 === 摒弃 == 一但在需要检查 null || undefined 时可以使用 obj == null
    • 一定要处理 Node.js 中错误回调传递进来的 err 参数。
    • 使用浏览器全局变量时加上 window 前缀 – documentnavigator 除外
      • 避免无意中使用到了这些命名看上去很普通的全局变量, open, length, event 还有 name

    我们项目中所使用的 JavaScript Standard Style 代码规范是由大部分开发者所认可约定的。但是也难免有些开发者不喜欢,所以说规范虽然是死的,但是人是活的,我们可以按照自己的喜欢对原有规范做一些适当调整用以满足我们自己的风格。

    我们可以通过修改 ESLint 的配置文件 .eslintrc.js 中的 来修改定制自己的规则。

    rules 是一个对象,其中对象的键为代码规则的代号,值为校验该规则的级别状态。

    规则的校验级别状态可以被设置为:

    • “off” or 0 - 关闭不校验
    • “warn” or 1 - 警告
    1. module.exports = {
    2. // ...
    3. // ...
    4. rules: {
    5. // allow async-await
    6. 'generator-star-spacing': 'off',
    7. // allow debugger during development
    8. 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    9. 'semi': ['error', 'always']
    10. }
    11. }

    完整版的校验规则列表参考,详见。

    也可以单独设定某一段代码的校验规则:

    1. /* eslint-disable */
    2. alert('foo');
    3. /* eslint-enable */
    1. alert('foo'); /* eslint-disable-line no-alert */

    初始化本地仓库并完成一次提交。

    1. git init
    2. git status
    3. git add --all

    将本地项目推送到 GitHub。