vuecli+elementUI+vue-router+vueX

忘是亡心i 2022-12-27 01:29 225阅读 0赞

## 引入element ui: ##

1.下载
    npm i element-ui -S
    vue add element

2.在main.js中写入下面代码
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css'
    Vue.use(ElementUI)

## 引入vue-router ##

1.下载
    npm/cnpm install vue-router --save

2.在main.js中引入
    import VueRouter from 'vue-router'
    Vue.use(VueRouter)
    3.创建路由组件，在components文件夹中创建组件
    4.配置参数 如：
    const routes = [   {path:'/foo',component:foo}  ] 
    5.实例化vueRouter
    const router = new VueRouter({ routes})   //第五步中花括号里面的的routes要和第四步定义的同名
    6. 挂载路由
    new Vue({
     router, //增加内容
     render: h => h(App), }).$mount('#app')
     7.使用：
     <router-link to='/child'>child</router-link>
     <router-view></router-view>

vue项目启动命令：`npm run serve`

## 引入vueX（以及vueX的小例子） ##

1.下载：
    npm install vuex --save

2.在main.js中引入
    import Vuex from 'vuex'
    Vue.use(Vuex)
    Vue 实例上得挂载 上store

在src文件夹下新建一个store 文件夹，创建store .js然后写入下面内容，最后将store .js引入main.js中。参考（https://www.cnblogs.com/mica/p/10757965.html）

// store.js
    import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)
    const store=new Vuex.Store({
        state:{
            name:'超级玛丽',
            age:'20'
        },
        mutations:{
            showPeople(state,msg){
                state.name=msg
            }
        }
    })
    export default store

在任意页面打印this
        created(){
          console.log(this)
        }

如图，找到VueComponent下面我们定义的state和mutation  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70]

created(){
          console.log(this)
          console.log(this.$store.state.name)  //拿state的name
        }

![在这里插入图片描述][20201210102211754.png]  
通过`mutation`中的方法改变数据  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 1]  
![此时页面上][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 2]  
此时页面上的name已经改变，详细见vuex官网

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70]: /images/20221120/023e6b3bd4a34ea286478c4107222c5d.png
[20201210102211754.png]: /images/20221120/c2ff7d6f476d45fe8fa703b1a71b8b87.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201210103605450.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201210103642990.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ==,size_16,color_FFFFFF,t_70

vuecli+elementUI+vue-router+vueX

发表评论取消回复

还没有评论，来说两句吧...

相关阅读