import { DynFormMixin } from 'boot/mixins/dynform';

export default {
  name: 'DynForm1642641022119',
  mixins: [DynFormMixin],
使用cnpm：

npm install -g cnpm --registry=https://registry.npm.taobao.org


cnpm install

 

Vue的options

options是 new Vue 的参数，我们一般称之为选项或者构造选项

options的五类属性：

数据：data、 props、 propsData、 computed、methods、 Watch

DOM: el、 template、 render、 renderError

生命周期钩子: beforeCreate、 created、beforeMount、 mounted、 beforeUpdate、 updated、activated、 deactivated、 beforeDestroy、 destroyed、errorCaptured

资源: directives、 filters、 components

组合: parent, mixins、 extends、 provide、 inject

可以直接启动服务：

安装方法：npm install anywhere -g
使用方法：在你需要服务器访问的目录下打开cmd输入：anywhere 8080
然后浏览器访问：http://localhost:8080/该目录下的文件名
即可访问！


npm i babel-plugin-jsx-v-model -D

-D就是--save-dev 
这样安装的包的名称及版本号就会存在package.json的devDependencies这个里面，
而--save会将包的名称及版本号放在dependencies里面。

watch:

watch: {
    config: {
      deep: true,
      handler() {
      },
    },
    'config.type': {
      handler(n, o) {
        if (n !== o) {
          if (n === 'table' && this.chartSettingTab === 'chartTab') {
            this.chartSettingTab = 'tableTab';
          }
          if (n !== 'table' && this.chartSettingTab === 'tableTab') {
            this.chartSettingTab = 'chartTab';
          }
        }
      },
    },
  },

vuex

import Vue from 'vue';
import Vuex from 'vuex';

import User from './modules/user';
import Rule from './modules/Rule';

Vue.use(Vuex);

export default () => {
  const Store = new Vuex.Store({
    modules: {
      User,
      Rule,
    },
    strict: process.env.DEV,
  });

  return Store;
};


User.js

let t;
try {
  t = JSON.parse(localStorage.userInfo);
} catch (err) {
  t = {};
}

export default {
  namespaced: true,
  state: {
    info: t,
    authorization: localStorage.Authorization || '',
  },
  getters: {},
  mutations: {
    updateInfo(s, v) {
      localStorage.userInfo = JSON.stringify(v);
      s.info = v;
    },
    updateAuthorization(s, v) {
      localStorage.Authorization = v;
      s.authorization = v;
    },
    clear(s) {
      delete localStorage.userInfo;
      s.info = {};
      delete localStorage.Authorization;
      s.authorization = '';
    },
  },
  actions: {},
};

       




        this.$store.commit('User/clear');
        this.$store.commit('Rule/clear');

添加JSX


yarn add babel-plugin-syntax-jsx
yarn add babel-plugin-transform-vue-jsx
yarn add babel-helper-vue-jsx-merge-props

jsx事件绑定

    //组件 JSX语法
 
  components:{
    diglog,
    testCom:{
      props:{},
      render(h){
        //子组件this.$emit('getVlaue',this.digput)
        return (<diglog on-getVlaue={this.handleCom}></diglog>) 
             
      },
      methods:{
        handleCom(val){
           console.log(val);
        },
      },
    },
  },

babel.config.js

module.exports = {
  presets: [
    '@quasar/babel-preset-app',
  ],
  plugins: ['transform-vue-jsx'],
};

mixins:

1.方法参数不共享

2.组件中的data、methods,components会覆盖mixins中的，不相同的则混入。

3.created,mounted中的方法先调用mixins中的

1、linux 系统在安装依赖的时候会出现 node-sass 无法安装的问题

解决方案：

1. 单独安装：npm install --unsafe-perm node-sass 
2. 直接使用：npm install --unsafe-perm
2、加速node-sass安装

https://www.ydyno.com/archives/1219.html

browserslist

vscode常用插件

设置

{
    "breadcrumbs.enabled": false,
    "editor.fontLigatures": true,
    "editor.fontSize": 16,
    "editor.lineHeight": 24,
    "editor.minimap.showSlider": "always",
    "editor.tabSize": 2,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "emmet.triggerExpansionOnTab": true,
    "eslint.packageManager": "yarn",
    "explorer.confirmDelete": false,
    "explorer.confirmDragAndDrop": false,
    "files.autoSave": "onFocusChange",
    "files.eol": "\n",
    "vetur.experimental.templateInterpolationService": false,
    "window.title": "${dirty}${activeEditorShort}${separator}${activeFolderLong}",
    "emmet.includeLanguages": {
        "vue-html": "html",
    },
    "workbench.colorTheme": "Atom One Light",
    "editor.renderWhitespace": "none",
    "git.enableSmartCommit": true,
    "prettier.printWidth": 100,
    "[html]": {
        "editor.defaultFormatter": "vscode.html-language-features"
    },
    "workbench.editor.enablePreview": false,
    "fold.level": 4,
    "update.enableWindowsBackgroundUpdates": false,
    "update.mode": "none",
    "workbench.iconTheme": "vscode-icons",
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "html.format.wrapLineLength": 100,
    "beautify.language": {
        "beautify.language": {
            "html": ["htm", "html"]
        }
    },
}

快捷键

// Place your key bindings in this file to override the defaultsauto[]
[
  {
    "key": "ctrl+`",
    "command": "-workbench.action.terminal.toggleTerminal"
  },
  {
    "key": "f3",
    "command": "editor.action.nextSelectionMatchFindAction",
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+k",
    "command": "-editor.action.nextSelectionMatchFindAction",
    "when": "editorTextFocus"
  },
  {
    "key": "f4",
    "command": "editor.action.previousMatchFindAction",
    "when": "editorFocus"
  },
  {
    "key": "shift+f3",
    "command": "-editor.action.previousMatchFindAction",
    "when": "editorFocus"
  },
  {
    "key": "ctrl+shift+f",
    "command": "HookyQR.beautify",
    "when": "editorFocus"
  }
]

nodejs : 下载 | Node.js 中文网

npm install -g npm

npm 升级 yarn 

npm install yarn@1.22.5 -g

自动打开浏览器   --open

  "scripts": {
    "pre": "cnpm install || yarn --registry https://registry.npm.taobao.org || npm install --registry https://registry.npm.taobao.org ",
    "serve": "vue-cli-service serve --open",
    "dev": "vue-cli-service serve --open",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

eslint 要代码检查生效 vue文件需要和vue关联

npm config set registry http://registry.npm.taobao.org/
npm  install -g @vue/cli
npm install -g yarn
yarn config set registry https://registry.npm.taobao.org
yarn global add @vue/cli
yarn config get registry 
yarn global add @quasar/cli
npm install -g @quasar/cli
npm i -g eslint-plugin-vue


npm install eslint -g
npm install eslint-plugin-import -g
npm install eslint-config-airbnb -g
npm install eslint-plugin-jsx-a11y -g
npm install eslint-plugin-react -g
npm install babel-eslint -g

编译

npm run build

据说yarn更好，那就用这个吧

git clone xxx
yarn
yarn start

Yarn和npm命令对比

npmyarn
npm installyarn
npm install react --saveyarn add react
npm uninstall react --saveyarn remove react
npm install react --save-devyarn add react --dev
npm update --saveyarn upgrade

yarn安装源改为国内，不然没法用

yarn config set registry https://registry.npm.taobao.org/

将本地组件升级

yarn global upgrade -L

升级本地组件

yarn upgrade -L

yarn config get registry   # 查看当前设置的镜像源地址
# -> https://registry.yarnpkg.com

可以改成 taobao 的源：
yarn config set registry 'https://registry.npm.taobao.org'

node-sass 安装失败

npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

// 也可以设置系统环境变量的方式。示例
// linux、mac 下
SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ npm install node-sass

// window 下
set SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ && npm install node-sass

可以参考：https://segmentfault.com/a/1190000010984731

用yarn初始化命令如下

yarn config set registry https://registry.npm.taobao.org -g

yarn config get registry

yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g

element ui    添加脚手架

npm install -g @vue/cli

quasar 启动

yarn
yarn install
quasar dev

TypeError: this.CliEngine is not a constructor   找到对应的文件

//this.CliEngine = require(this.basicPath + "lib/cli-engine");
this.cliEngine = require(packagePath + "lib/cli-engine").CLIEngine;

npm WARN tar ENOENT: no such file or directory, open  .staging

npm cache clean -f
npm install -g npm

代码格式化后不符合要求

为了和前端保持一致换vscode

设置如下：

{
  "editor.tabSize": 2,
  "editor.fontFamily": "Fira Code",
  "editor.fontLigatures": true,
  "window.menuBarVisibility": "default",
  "window.titleBarStyle": "custom",
  "window.zoomLevel": 0,
  "files.autoSave": "off",
  "eslint.autoFixOnSave": true,
  "eslint.packageManager": "yarn",
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    },
  ],
  "emmet.includeLanguages": {
    "vue-html": "html",
  },
  "emmet.triggerExpansionOnTab": true,
  "files.eol": "\n",
  "markdown.preview.fontSize": 18,
  "editor.renderWhitespace": "boundary",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.renderControlCharacters": true,
  "breadcrumbs.enabled": false,
  "editor.minimap.enabled": false,
  "typescript.updateImportsOnFileMove.enabled": "always",
  "workbench.statusBar.visible": true,
  "workbench.activityBar.visible": true,
  "workbench.colorTheme": "Default Light+",
  "editor.quickSuggestions": {
    "strings": true
  },
  "git.autofetch": true,
  "terminal.integrated.cursorBlinking": true,
  "terminal.integrated.lineHeight": 1.2,
  "terminal.integrated.letterSpacing": 0.1,
  "terminal.integrated.fontSize": 15, //字体大小设置
  "terminal.integrated.fontFamily": "Lucida Console", //字体设置
}

解决eslint上存在的问题,一个快捷键搞定

eslint Cannot read property 'range' of null 解决方案如下： 

"babel-eslint": "8.0.1",
比较喜欢这个图标


                <q-btn
                  flat
                  round
                  dense
                  color="primary"
                  icon="mdi-cog-outline"
                  @click="edit(props.row)"
                >
                  <q-tooltip>字典配置</q-tooltip>
                </q-btn>
npm淘宝源

npm config set registry=https://registry.npm.taobao.org
npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
npm config set phantomjs_cdnurl=https://npm.taobao.org/mirrors/phantomjs/
npm config set electron_mirror=https://npm.taobao.org/mirrors/electron/

yarn淘宝源

yarn config set registry https://registry.npm.taobao.org
yarn config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/
yarn config set phantomjs_cdnurl https://npm.taobao.org/mirrors/phantomjs/
yarn config set electron_mirror https://npm.taobao.org/mirrors/electron/

  watch: {
    'form.field101': {
      handler(n, o) {
        if (n !== o && n) {
          console.log(n, o);
        }
      },
    },
  },

# vue.js # vscode # 前端
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue