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命令对比
npm | yarn |
---|---|
npm install | yarn |
npm install react --save | yarn add react |
npm uninstall react --save | yarn remove react |
npm install react --save-dev | yarn add react --dev |
npm update --save | yarn 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);
}
},
},
},