“Vue”的版本间的差异
来自tomtalk
（→proxyTable配置） |
（→ESLint配置） |
||
| 第72行： | 第72行： | ||
</source> | </source> | ||
| − | == | + | ==ESLint、JSHint配置== |
<source lang="javascript"> | <source lang="javascript"> | ||
"eslint.options": { | "eslint.options": { | ||
| 第80行： | 第80行： | ||
"space-before-function-paren": [0, "always"] | "space-before-function-paren": [0, "always"] | ||
} | } | ||
| + | }, | ||
| + | "jshint.options": { | ||
| + | "esversion": 6 | ||
} | } | ||
</source> | </source> | ||
2021年7月26日 (一) 09:38的最后版本
proxyTable配置
proxyTable: { "/v1/products": { target: apiUrl, changeOrigin: true, pathRewrite: { "^/v1/products": "/v1/products" }, onProxyRes: function onProxyRes(proxyRes, req, res) { proxyRes.headers['connection'] = 'keep-alive'; // add new header to response } } }
https://github.com/chimurai/http-proxy-middleware
vscode配置
插件
- Vetur
- Prettier
- ESLint
- Vim
settings.json配置文件
{
"editor.renderIndentGuides": false,
"editor.wordWrapColumn": 150,
"editor.tabSize": 2,
"editor.formatOnSave": true, //每次保存自动格式化
"editor.rulers": [
150
],
"html.format.wrapLineLength": 150,
"prettier.singleQuote": true, //使用带引号替代双引号
"vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html
"vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_line_length": 150,
"wrap_attributes": "auto",
"end_with_newline": false
}
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
},
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
"eslint.autoFixOnSave": true, // 每次保存的时候将代码按eslint格式进行修复
"eslint.validate": [ //开启对.vue文件中错误的检查
"javascript",
"javascriptreact",
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
}
]
}ESLint、JSHint配置
"eslint.options": { "rules": { "semi": [0], "quotes": [0, "double"], "space-before-function-paren": [0, "always"] } }, "jshint.options": { "esversion": 6 }
Vue页面结构
<template> <div class="page">something</div> </template> <script> import sc from "@/mixins/index"; import Country from "@/components/Country.vue"; import { mapState, mapMutations } from "vuex"; import code from "@/utils/code"; import { uploadSingleFile } from "@/api"; import { checkResidentNumberIsExistForProduct } from "@/api"; import utils from "@tplhk-ui/utils"; export default { name: "Application", mixins: [sc], components: { Country }, data() { return { payment: this.$t("payment"), rules: { englishFamilyName: { required: true, validator: this.baseValidate.bind(this, /^[A-Za-z ]*$/), trigger: "blur" } } }; }, computed: { ...mapState(["forms", "style", "premium"]) }, watch: { "forms.residentCode": function(newValue) { this.residentCodeFn(newValue); } }, created() { if (this.$route.name === "confirm") { this.disabled = true; } this.residentCodeFn(this.forms.residentCode); Options.getPolicyPlanAlipay() .then(res => (this.policyPlanOpt = res)) .catch(() => {}); }, methods: { ...mapMutations(["set_forms", "set_state"]), residentCodeFn(newValue) { let flag = newValue === "NPHK" ? true : false; this.rules.nationalityCode.required = flag; } } }; </script> <style lang="scss"> .tpl-form-item-required .tpl-form-item-label:before { content: ""; } </style>
