一、项目初始化

使用 Vue CLI 初始化项目

  1. # 如果已经安装过了则不需要重新安装
  2. npm install -g vue-cli
  4. # 基于 webpack 模板初始化一个名称为 admin-vue 的项目
  5. vue init webpack admin-vue

一、项目初始化 - 图1

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

启动开发模式：

  1. cd admin-vue
  2. npm run dev

项目结构介绍

xxx

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

代码风格

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

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

说了那么多，看看这个遵循了 Standard 规范的示例文件 中的代码吧。或者，这里还有一大波使用了此规范的项目 代码可供参考。

自定义代码规范

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

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

  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.   }
  10. }

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

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

  • “off” or 0 - 关闭不校验
  • “warn” or 1 - 警告
  • “error” or 2 - 错误

例如我们修改校验规则必须有分号：

  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. }

完整版的校验规则列表参考，详见官方文档 - Rules。

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

  1. /* eslint-disable */
  3. alert('foo');
  5. /* eslint-enable */
  1. /* eslint-disable no-alert, no-console */
  3. alert('foo');
  4. console.log('bar');
  6. /* eslint-enable no-alert, no-console */
  1. alert('foo'); /* eslint-disable-line no-alert */

参考链接：

加入 Git 版本控制

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

  1. git init
  2. git status
  3. git add --all
  4. git commit -m ":tada: Initial commit"

在 GitHub 上创建一个在线仓库。

将本地项目推送到 GitHub。

  1. git remote add origin https://github.com/你的GitHub用户名/admin-vue.git
  2. git push -u origin master