{"_id":"14_vue_component","_rev":"1-d9504fb200a9ab10c38ecea70bd210b4","name":"14_vue_component","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"14_vue_component","version":"1.0.0","description":"A Vue.js project","author":{"name":"zjp"},"private":false,"scripts":{"dev":"webpack-dev-server --inline --progress --config build/webpack.dev.conf.js","start":"npm run dev","build":"node build/build.js"},"main":"dist/vue-zjp007-counter.min.js","dependencies":{"axios":"^0.21.0","element-ui":"^2.14.0","vue":"^2.5.2","vue-router":"^3.4.9","vuex":"^3.5.1"},"devDependencies":{"autoprefixer":"^7.1.2","babel-core":"^6.22.1","babel-helper-vue-jsx-merge-props":"^2.0.3","babel-loader":"^7.1.1","babel-plugin-component":"^1.1.1","babel-plugin-syntax-jsx":"^6.18.0","babel-plugin-transform-runtime":"^6.22.0","babel-plugin-transform-vue-jsx":"^3.5.0","babel-preset-env":"^1.3.2","babel-preset-stage-2":"^6.22.0","chalk":"^2.0.1","copy-webpack-plugin":"^4.0.1","css-loader":"^0.28.0","extract-text-webpack-plugin":"^3.0.0","file-loader":"^1.1.4","friendly-errors-webpack-plugin":"^1.6.1","html-webpack-plugin":"^2.30.1","node-notifier":"^5.1.2","optimize-css-assets-webpack-plugin":"^3.2.0","ora":"^1.2.0","portfinder":"^1.0.13","postcss-import":"^11.0.0","postcss-loader":"^2.0.8","postcss-url":"^7.2.1","rimraf":"^2.6.0","semver":"^5.3.0","shelljs":"^0.7.6","uglifyjs-webpack-plugin":"^1.1.1","url-loader":"^0.5.8","vue-loader":"^13.3.0","vue-style-loader":"^3.0.1","vue-template-compiler":"^2.5.2","webpack":"^3.6.0","webpack-bundle-analyzer":"^2.9.0","webpack-dev-server":"^2.9.1","webpack-merge":"^4.1.0"},"engines":{"node":">= 6.0.0","npm":">= 3.0.0"},"browserslist":["> 1%","last 2 versions","not ie <= 8"],"_id":"14_vue_component@1.0.0","_nodeVersion":"12.19.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-KxsRAz/TrP3jynF+Wp3Zx1Anrfw89hWIIz+5YZXQg6bVC69f18SkJMbT+luFpPRO+YcIFjIZ5vR8Lt2zIO5hVg==","shasum":"5263e60229bba9535991d4ca305f4f39eac64528","tarball":"https://registry.npmjs.org/14_vue_component/-/14_vue_component-1.0.0.tgz","fileCount":41,"unpackedSize":1825511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfphBtCRA9TVsSAnZWagAAz5gP/ioGM5REKSnl6LqpWKda\nu0AfL2m38wPMWllMRuEgXH0cG/MC/4t69sbLsqFRhec9Lx4MP8usuemAoO26\nOrTFBPUdfWeJPOtuB4Jo+LZfYMJaLoxZPkORF1GcHx8sNyCaH1mQ06JN9mMX\nEElfiIopIYCTVmkzdFzdeySqpZDJJ7+UEOR+90l5/K237d/tkvETLeBibivD\nVRi7pbDUcafiQ9SAmL0JpUO11q3kDgQggks6V/szjB02J5Jmy4v6S16r08Rs\nXLzi2e6AvXwypixHt8ybeFy5uTnGtwbaEk+OnROWj8E/27JxP2uXJIkFgKdL\nISprtpSFyWiBSf8h3wFs1rR5S0tDLle00wEsOqXSWLuFU3Qgv5kQSqtvn1Wx\n76CEgrgXDPu16ZzDp7Rz+Wdg9XR5tViouGjPypX/9AHUoqnDHLkR7r5cFtIv\nJ271n1t+/Gwdc9LePiHgy0puxQAfzBA0xXabneKL0q8AaZETrqRG2o6ko9bf\nrqkzdPxae8xFzUqEo22J7FkZ8jIOahQjMCaPeZ/T9kew3/UMo1DUVbhxoOd/\n/JEp05XHRmokdfrA0eapOQZB5HuN4qLVGrj3T8gm18v+dzoU5S2H13AK8tBe\nijH+OSkU0i/3PTCC/kcW7nDYdbJRkkedzd90mXkATvg7v4G/z5wMXE1lCuzg\nnYbI\r\n=PrsC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCQ1P9xERB+uiHvohoFEh4PcDr/e0NfuEFKj268AHGUCgIgSKovn8XBL6qX58Hp/FdIj6ne8SoJsmY7M9r1vgH+8o0="}]},"_npmUser":{"name":"zjp007","email":"906030149zhao@gmail.com"},"directories":{},"maintainers":[{"name":"zjp007","email":"906030149zhao@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/14_vue_component_1.0.0_1604718701254_0.33196867848884604"},"_hasShrinkwrap":false}},"time":{"created":"2020-11-07T03:11:41.253Z","1.0.0":"2020-11-07T03:11:41.535Z","modified":"2022-04-04T10:11:08.941Z"},"maintainers":[{"name":"zjp007","email":"906030149zhao@gmail.com"}],"description":"A Vue.js project","author":{"name":"zjp"},"readme":"1.单文件组件\n\t1.三个部分组成\n\t\t1.template\n\t\t\t只能存在一个根元素\n\t\t2.script\n\t\t3.style\n\t\t\tscoped: 样式只在当前组件内生效\n\t2.子父级组件交互（通信）\n\t\t父->子: props\n\t\t\t数据传递类型限制（验证）\n\t\t\t数据类型验证\n\t\t\t多数据类型验证\n\t\t\t必选项\n\t\t\t默认值\n\t\t\tobj、arr数据类型的默认值（返回Object）\n\t\t子->父: emit Event\n\t3.插槽\n\t\t单个插槽\n\t\t具名插槽\n\t\t作用域插槽（子传父）\n\t\t\t注意：在2.5.0之前,必须使用在template上\n\t4.动态组件\n\t\tkeep-alive\t<component :is=\"currentView\"></component>\n2.css过度与动画\n\t在CSS 过渡和动画中自动应用 \n\t\t过渡类名\n\t\t\tv-enter：进入开始\n\t\t\tv-enter-active；执行过程中\n\t\t\tv-enter-to：结束动画\n\t\t\tv-leave：离开开始\n\t\t\tv-leave-active：离开过程\n\t\t\tv-leave-to：离开结束\n\tclass可以配合使用第三方css动画库，如Animate.css\n\n3.自定义指令\n\t全局指令\n\t\tVue.directive('focus',{\n\t\t\tinserted: function(el){\n\t\t\t\tel.focus();\n\t\t\t}\n\t\t})\n\t局部指令\n\t\tdirectives:{\n\t\t\tfocus:{\n\t\t\t\tinserted: function(el){\n\t\t\t\t\tel.focus();\n\t\t\t\t}\n\t\t\t}\n\t\t}\nAxios\n\t1.安装 npm install axios\n\t2.引入加载 \n\t\timport Axios from 'axios'\n\t\tVue.prototype.$axios = Axios\n\t3.请求\n\t\tget请求：\n\t\t\tthis.$axios(\"http://localhost:8080/static/mock/data.json\",{\n\t\t      params:{\n\t\t        type:\"junshi\"\n\t\t      }\n\t\t    }).then(res=>{\n\t\t      console.log(res)\n\t\t    }).catch(error=>{\n\t\t      console.log(error)\n\t\t    })\n\t\tpsot请求：\n\t\t\tform-data: ?userId=admin&password=123\n\t\t\tx-www-from-urlencoded:{userId: \"admin\",password: 123}\n\t\t\t注意：axios接受的post请求的格式是from-data格式\n\t\t\tthis.$axios.post(\"http://localhost:8080/login\",\n\t\t      qs.stringify({\n\t\t        user_id:\"admin\",\n\t\t        password: 123\n\t\t    })).then(res=>{\n\t\t      console.log(res)\n\t\t    }).catch(error=>{\n\t\t      console.log(error)\n\t\t    })\n\t4.全局的axios默认值\n\t\tAxios.defaults.baseURL = 'http://localhost:8080';\n\t\tAxios.defaults.headers.common['Authorization'] = AUTH_TOKEN;\n\t\tAxios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';\n\t5.拦截器\n\t\t在请求then或catch处理前拦截它们\n\n\t6.跨域处理 \n\t\t1.修改config中的 index.js\n\t\t\tproxyTable: {\n\t\t        \"/api\": {\n\t\t            target: \"http://localhost:8080\",\n\t\t            changeOrigin: true,\n\t\t            pathRewrite: {\n\t\t                '^/api': ''\n\t\t            }\n\t\t        }\n\t\t    },\n\t\t2. mian.js 中添加HOST\n\t\t\tVue.prototype.HOST = '/api'\n\t\t3.使用\n\t\t\tthis.$axios.pos  t( this.HOST + \"/login\",\n\t\t\t\t\t\t      {\n\t\t\t\t\t\t        userId: 'admin',\n\t\t\t\t\t\t        password: '123456'\n\t\t\t\t\t\t      }\n\t\t\t\t\t\t      ).then(res=>{\n\t\t\t\t\t\t      console.log(res)\n\t\t\t\t\t\t    }).catch(error=>{\n\t\t\t\t\t\t      console.log(error)\n\t\t\t\t\t\t    });\n\t\t注意: 此种跨域解决方案，只能适用于测试阶段，打包的时候，不会具备服务\n\t\t不能跨域了，后端解决\nMock: 数据模拟\n\t1.自己创建JSON文件。使用get请求形式访问数据\n\t\t优点： 方便快捷\n\t\t缺点：只能存在get请求\n\t2.项目中集成服务器，模拟各种接口\n\t\t优点：模拟真实显示环境\n\t\t缺点：泽恩加开发成本\n\t3.直接使用线上数据\n\t\t优点：真实\n\t\t缺点：不一定每个项目都存在\n\t4.数据模拟库moackjs\n\n路由\n\t1.安装\n\t\tnpm install vue-router\n\t2.引用\n\t\timport VueRouter from 'vue-router'\n\t\tVue.use(VueRouter);\n\t3.路由嵌套\n\t\t1.children\n\t\t2.也要给显示位置（router-view）\n\nElementUI\n\t1.安装element-ui\n\t\tnpm i element-ui -S\n\t2.安装按需加载的依赖\n\t\tnpm install babel-plugin-component -D\n\t3.修改 .babelrc \n\t\t{\n\t\t  \"presets\": [\n\t\t    [\"env\", {\n\t\t      \"modules\": false,\n\t\t      \"targets\": {\n\t\t        \"browsers\": [\"> 1%\", \"last 2 versions\", \"not ie <= 8\"]\n\t\t      }\n\t\t    }],\n\t\t    \"stage-2\"\n\t\t  ],\n\t\t  \"plugins\": [\"transform-vue-jsx\", \"transform-runtime\",[\n\t\t      \"component\",\n\t\t      {\n\t\t        \"libraryName\": \"element-ui\",\n\t\t        \"styleLibraryName\": \"theme-chalk\"\n\t\t      }\n\t\t    ]]\n\t\t}\n\t4.引入组件\n\t\timport { Button, Select } from 'element-ui';\n\t\tVue.use(Button)\n\t\tVue.use(Select)\n\t5.使用element-ui\nVueX\n\tVuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。\n\n\t开发大型单页面应用时使用\n\n\tVueX状态管理\n\t\t view->(dispatch)Action->(Commit) Mutations->(Mutate)State->View\n\t\t 注意：Action不是必需品，如果有异步操作才可能用到，否则跨域不使用\n\n\t\t 使用\n\t\t \t1.安装\n\t\t \t\tnpm install vuex --save\n\t\t \t2.引入依赖\n\t\t \t\timport Vuex from 'vuex'\n\t\t \t\tVue.use(Vuex)\n\t\t \t3.创建 store 仓库\n\t\t \t\tconst store = new Vuex.Store({\n\t\t\t\t  state: {\n\t\t\t\t    count: 0\n\t\t\t\t  },\n\t\t\t\t  mutations: {\n\t\t\t\t    increment (state) {\n\t\t\t\t      state.count++;\n\t\t\t\t    },\n\t\t\t\t    desment(state){\n\t\t\t\t\t\tstate.count--;\n\t\t\t\t    }\n\t\t\t\t  },\n\t\t\t\t  actions:{\n\t\t\t\t  \tincrementA(context){\n\t\t\t\t  \t\tcontext.commit(\"increment\");\n\t\t\t\t  \t},\n\t\t\t\t  \tdesmentA(context){\n\t\t\t\t\t\tcontext.commit(\"desment\");\n\t\t\t\t    }\n\t\t\t\t  }\n\t\t\t\t})\n\t\t\t4.使用\n\t\t\t\t获取数据\n\t\t\t\t\tthis.$store.state.count\n\t\t\t\t调用 mutations 方法\n\t\t\t\t\tthis.$store.commit('increment');\n\t\t\t\t调用 actions \n\t\t\t\t\tthis.$store.dispatch(\"incrementA\");\n\t\t\t注意：\n\t\t\t\tAction 提交的是 mutation. 而不是直接改变状态\n\t\t\t\tAction 可以包含任意异步操作","readmeFilename":"README.md"}