@vue/cli 使用路由router,状态机vuex,sass, elementUi饿了么组件-智慧网

本文章主要介绍 @vue/cli 使用路由router,状态机vuex,sass, elementUi饿了么组件的安装以及使用时注意事项

安装

1.npm install vue-router

2.npm install vuex --save

3.npm install -D sass-loader node-sass

4.npm i element-ui -S

vue add element

相应的代码文件修改：

1.main.js中render页面时使用router属性

文件路径: src/router/index.js

import Vue from &#39;vue&#39;import Router from &#39;vue-router&#39;Vue.use(Router)export default new Router({  routes: [    {      path: &#39;/&#39;,      redirect: &#39;index&#39;    },    {      path: &#39;/index&#39;,      name: &#39;index&#39;,      redirect: &#39;homepage&#39;    },    {      path: &#39;/homepage&#39;,      name: &#39;homepage&#39;,      component: () =&gt; import(&#39;@/pages/Main&#39;),      children: [        {path: &#39;&#39;, component: () =&gt; import(&#39;@/components/content/middle/components/Test1&#39;)}      ]    }  ]})

2.src/main.js

import Vue from &#39;vue&#39;import vuex from &#39;vuex&#39;import App from &#39;./App.vue&#39;import &#39;./plugins/element.js&#39;import router from &#39;./router&#39;Vue.use(vuex)Vue.config.productionTip = falsenew Vue({  render: h =&gt; h(App),  router}).$mount(&#39;#app&#39;)

3.src/App.vue中配置顶层的router-view

&lt;template&gt;  &lt;div id=&#34;root&#34;&gt;    &lt;!-- &lt;img alt=&#34;Vue logo&#34; src=&#34;./assets/logo.png&#34;&gt; --&gt;    &lt;router-view/&gt;  &lt;/div&gt;&lt;/template&gt;

小总结：

1.当然如果不想将第一层的router-view写在App.vue文件里面的话，也可以写在别的文件里面。

2.根路径 '/' 直接指向的是main.js中render的组件(页面)。

3.vue-router实例中的routes属性，配置的都是children, 包括第一层数组也是children，属性名是routes。所以对于第一层的router-view可以有多个页面，就是通过第一层数组中的不同的path+component来配置

4.vue-router实例中的routes属性中的children中的每个对象，都可以再拥有自己的children。

github repo link: https://github.com/mxlgsq/vue3-demo.git