{"id":3235,"date":"2022-08-15T00:04:52","date_gmt":"2022-08-14T16:04:52","guid":{"rendered":"http:\/\/blog.odjbinail.cn\/?p=3235"},"modified":"2023-02-13T17:45:04","modified_gmt":"2023-02-13T09:45:04","slug":"%e7%bb%83%e6%89%8b%e9%a1%b9%e7%9b%ae%e4%b8%80%e5%ae%bf%e8%88%8d%e7%ae%a1%e7%90%86%e7%b3%bb%e7%bb%9fvue3element-plus","status":"publish","type":"post","link":"https:\/\/blog.odjbinail.cn\/?p=3235","title":{"rendered":"\u5bbf\u820d\u7ba1\u7406\u7cfb\u7edfvue3+element-plus"},"content":{"rendered":"<h1>\u5b89\u88c5 element-ui \u6846\u67b6<\/h1>\n<ul>\n<li>npm uninstall -g @vue\/cli \u5378\u8f7d vue<\/li>\n<li>npm install <a href=\"mailto:vue@2.6.14\">vue@2.6.14<\/a> \u4e0b\u8f7d vue<\/li>\n<li>npm install -g @vue\/cli<\/li>\n<li>vue create do<\/li>\n<li>npm i element-ui -S<\/li>\n<li>\u6309\u9700\u5f15\u5165 npm install babel-plugin-component -D<\/li>\n<li>babel.config.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>module.exports = {\n  presets: [\n    &#039;@vue\/cli-plugin-babel\/preset&#039;,\n    [&#039;@babel\/preset-env&#039;, { modules: false }]\n  ],\n  plugins: [\n    [\n      &#039;component&#039;,\n      {\n        libraryName: &#039;element-ui&#039;,\n        styleLibraryName: &#039;theme-chalk&#039;\n      }\n    ]\n  ]\n}<\/code><\/pre>\n<ul>\n<li>main.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>\/\/ \u5f15\u5165 Vue\nimport Vue from &#039;vue&#039;\n\/\/ \u5f15\u5165 App\nimport App from &#039;.\/App.vue&#039;\n\/\/ \u5b8c\u6574\u5f15\u5165\n\/\/ \u5f15\u5165 ElementUI \u7ec4\u4ef6\u5e93\n\/\/ import ElementUI from &#039;element-ui&#039;\n\/\/ \u5f15\u5165 ElementUI \u5168\u90e8\u6837\u5f0f\n\/\/ import &#039;element-ui\/lib\/theme-chalk\/index.css&#039;\nimport router from &#039;.\/router&#039;\nimport store from &#039;.\/store&#039;\n\/\/ \u6309\u9700\u5f15\u5165\nimport { Button, Row, DatePicker } from &#039;element-ui&#039;\nVue.component(&#039;el-button&#039;, Button)\nVue.component(&#039;el-row&#039;, Row)\nVue.component(&#039;el-date-picker&#039;, DatePicker)\n\/\/ \u5173\u95ed vue \u7684\u751f\u4ea7\u63d0\u793a\nVue.config.productionTip = false\n\/\/ \u5e94\u7528 ElementUI\n\/\/ Vue.use(ElementUI)\n\/\/ \u521b\u5efa vm\nnew Vue({\n  router,\n  store,\n  render: h =&gt; h(App)\n}).$mount(&#039;#app&#039;)<\/code><\/pre>\n<h2>\u9047\u5230\u7684\u95ee\u9898<\/h2>\n<h3>header \u533a \u5c55\u5f00\u56fe\u6807\u4e0e&quot;\u5bbf\u820d\u7ba1\u7406\u7cfb\u7edf&quot;,\u4e0d\u5728\u4e00\u6761\u7ebf,\u6587\u5b57\u51fa\u683c .collapse-btn{ float:left; } .header .logo{ float: left; }<\/h3>\n<h3>\u62a5\u9519:Component inside \uff1cTransition\uff1e renders non-element root node that cannot be animated.<\/h3>\n<ul>\n<li>\u5207\u6362\u9875\u9762,\u662f\u5426\u663e\u793a\u95ee\u9898<\/li>\n<li>\u5728 Vue3 \u4e2d\u4f7f\u7528<keep-alive><\/keep-alive>\u505a\u9875\u9762\u7f13\u5b58\u540e\uff0c\u68c0\u67e5\u6bcf\u4e2a\u9875\u9762\u662f\u5426\u6709\u6839\u6807\u7b7e\uff0c\u5728 Vue3 \u4e2d\u53ef\u4ee5\u4e0d\u5199\u8ddf\u6807\u7b7e\uff0c\u4f46\u505a\u7f13\u5b58\u7684\u65f6\u5019\u8981\u52a0\u4e0a\u3002<\/li>\n<\/ul>\n<h3>vue3 element plus el-input \u65e0\u6cd5\u8f93\u5165\u95ee\u9898<\/h3>\n<pre class=\"prettyprint linenums\" ><code>import { reactive } from &#039;vue&#039;\n const queryParams = reactive({\n      name: &#039;&#039;\n    })<\/code><\/pre>\n<h3>\u6e05\u7a7a el-input \u5185\u5bb9<\/h3>\n<pre class=\"prettyprint linenums\" ><code>    \/** \u91cd\u7f6e\u6309\u94ae\u64cd\u4f5c *\/\n    const queryForm=ref()\n    const resetQuery = () =&gt; {\n      queryForm.value.resetFields()\n      \/\/ this.handleQuery()\n    }<\/code><\/pre>\n<h3>setup \u7684\u67e5\u8be2\u6240\u6709\u5bbf\u820d\u64cd\u4f5c<\/h3>\n<pre class=\"prettyprint linenums\" ><code> \/** \u67e5\u8be2\u6240\u6709\u5bbf\u820d\u64cd\u4f5c *\/\n    const loading = ref(true)\n    const tableData = ref([]);\n    const getDorm = async () =&gt; {\n      loading.value = true\n      axios.get(&#039;\/dorm\/getdorm&#039;, {}).then((response) =&gt; {\n        let results = response.data || []\n        if (results &amp;&amp; results.length &gt; 0) {\n          tableData.value = results\n          loading.value = false\n        }\n      }).catch(function (error) {\n        console.log(error)\n      })\n    }\n    getDorm();<\/code><\/pre>\n<h3>el-form-item \u65e0\u6cd5\u8f93\u5165<\/h3>\n<ul>\n<li>\u672a\u5728 el-form-item \u6dfb\u52a0 prop=&quot;\u76f8\u5e94\u7684 v-model \u7684\u503c&quot;<\/li>\n<\/ul>\n<h3>\u6570\u636e\u8868\u5220\u9664\u4e00\u6761\u8bb0\u5f55\u540e,id \u4e0d\u8fde\u7eed<\/h3>\n<ul>\n<li>\u5728\u67e5\u8be2\u91cc\u9762\u8fd0\u884c\u4e0b\u5217 sql<\/li>\n<li>\u5b58\u5728\u5916\u952e\u7ea6\u675f\u65f6\u66f4\u6539\u4e0d\u6210\u65f6: <\/li>\n<li>\u5148\u5173\u95ed\u5916\u952e\u7ea6\u675f  SET FOREIGN_KEY_CHECKS=0;<\/li>\n<li>\u64cd\u4f5c\u5b8c\u6210\u540e,\u518d\u91cd\u65b0\u5f00\u542f\u5916\u952e\u7ea6\u675f SET FOREIGN_KEY_CHECKS=1;<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>SET @i=0;\n\nUPDATE `notice` SET `id`=(@i:=@i+1);\n\nALTER TABLE `notice` AUTO_INCREMENT=0<\/code><\/pre>\n<h3>\u4e0d\u7528\u540e\u7aef\u63a5\u53e3\u7684\u641c\u7d22\u67e5\u8be2<\/h3>\n<pre class=\"prettyprint linenums\" ><code> let sea = queryParams.stuName\n      if (sea) {\n        loading.value = false\n        tableData.value = tableData.value.filter(function (a) {\n          return Object.keys(a).some(function () {\n            return String(a[&#039;stuName&#039;]).toLowerCase().indexOf(sea) &gt; -1\n          })\n        })\n      } else {\n        getStu()\n      }<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\u5b89\u88c5 element-ui \u6846\u67b6 npm uninstall -g @vue\/cli \u5378\u8f7d vue npm i [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-3235","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3235","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3235"}],"version-history":[{"count":9,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3235\/revisions"}],"predecessor-version":[{"id":3918,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3235\/revisions\/3918"}],"wp:attachment":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3235"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3235"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3235"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}