vue配置相关

一字一句的搞懂vue-cli之vue webpack template配置

基于Vue实现后台系统权限控制

手摸手，带你用vue撸后台

深入理解vue中的slot与slot-scope

网页制作中在头部固定悬浮table表头(thead)的方法

插件配置

• eslint 依次点击 文件 > 首选项 > 设置 打开 VSCode 配置文件,添加如下配置

    "files.autoSave":"off",
    "eslint.validate": [
       "javascript",
       "javascriptreact",
       "html",
       { "language": "vue", "autoFix": true }
     ],
     "eslint.options": {
        "plugins": ["html"]
     }

 "eslint.autoFixOnSave": true, 
    "eslint.validate": [ 
        "javascript",
        { "language": "vue", "autoFix": true },
        "html", 
        "vue" 
    ]

• 完整的package.json

{
  "name": "Hello World",  //name属性就是你的模块名称
  "version": "0.0.1", //version必须可以被npm依赖的一个node-semver模块解析
  "author": "张三",  //"author"是一个码农
  "description": "第一个node.js程序", //一个描述，方便别人了解你的模块作用，搜索的时候也有用。
  "mian":"index.js", //main属性指定了程序的主入口文件.
  "keywords":["node.js","javascript"],  //一个字符串数组，方便别人搜索到本模块
  "repository": { //指定一个代码存放地址，对想要为你的项目贡献代码的人有帮助。
    "type": "git",
    "url": "https://path/to/url"
  },
  "license":"MIT", //你应该为你的模块制定一个协议，让用户知道他们有何权限来使用你的模块，以及使用该模块有哪些限制,如BSD-3-Clause 或 MIT之类的协议
  "engines": {"node": "0.10.x"},
  "bugs":{ //填写一个bug提交地址或者一个邮箱，被你的模块坑到的人可以通过这里吐槽
    "url":"https://github.com/xxx",
    "email":"[email protected]"
    }, 
  "contributors":[{"name":"李四","email":"[email protected]"}], // "contributors"是一个码农数组。
  "scripts": { //指定了运行脚本命令的npm命令行缩写。比如：输入npm run start时，所要执行的命令是node index.js。
    "start": "node index.js"
  },
  "dependencies": { //指定了项目运行所依赖的模块
    "express": "latest",
    "mongoose": "~3.8.3",
    "handlebars-runtime": "~1.0.12",
    "express3-handlebars": "~0.5.0",
    "MD5": "~1.2.0"
  },
  "devDependencies": { //指定项目开发所需要的模块
    "bower": "~1.2.8",
    "grunt": "~0.4.1",
    "grunt-contrib-concat": "~0.3.0",
    "grunt-contrib-jshint": "~0.7.2",
    "grunt-contrib-uglify": "~0.2.7",
    "grunt-contrib-clean": "~0.5.0",
    "browserify": "2.36.1",
    "grunt-browserify": "~1.3.0",
  }
}

ps:package.json具体解释请看阮一峰的教程

• .gitignore 文件

作用：

在git中如果想忽略掉某个文件，不让这个文件提交到版本库中，可以使用修改 .gitignore 文件的方法。

这个文件每一行保存了一个匹配的规则例如：

# 此为注释 – 将被 Git 忽略
*.a       # 忽略所有 .a 结尾的文件
!lib.a    # 但 lib.a 除外
/TODO     # 仅仅忽略项目根目录下的 TODO 文件，不包括 subdir/TODO
build/    # 忽略 build/ 目录下的所有文件
doc/*.txt # 会忽略 doc/notes.txt 但不包括 doc/server/arch.txt

image

常用的.gitignore文件

# Logs
logs
*.log
.vscode
# Runtime data
pids
*.pid
*.seed
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage/
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# node-waf configuration
.lock-wscript
# Dependency directory
# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
node_modules/
# IDE config
.idea
# output
output/
output.tar.gz
runtime/
app/
.history
config.development.js
adapter.development.js

上图：

1、上传某个项目到Github，在当前文件下新建文件.gitgnore,内容为node_modules。作用：不会把node_modules文件夹一起上传。
2、反之从Github上下载到本地，需要下载node_modules文件，cd到package.json目录下，在命令行输入：npm install 即可安装所有依赖项。

推荐：

• 常用eslint规则
  https://github.com/PanJiaChen/vue-element-admin/blob/master/.eslintrc.js

• VSCode拓展插件推荐（前端开发）
  https://github.com/varHarrie/varharrie.github.io/issues/10

• 接口文档工具
  https://swagger.io/

• mock
  https://easy-mock.com/login
  https://www.jianshu.com/p/5dfa9f0bb11e

• iconfont
  阿里： https://www.iconfont.cn/

• 前端常见跨域解决方案（全）
  https://segmentfault.com/a/1190000011145364