# eglpt-vue

**Repository Path**: wenwang2000/eglpt-vue

## Basic Information

- **Project Name**: eglpt-vue
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-03-08
- **Last Updated**: 2022-04-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# eglpt-vue
# 参考资料
 https://cn.vuejs.org
 
# 项目搭建

方式 1    

    vue init webpack eglpt-vue
    cd  eglpt-vue
    cnpm install   /  npm install 如果创建项目的时候没有报错，这一步可以省略。如果报错了 cd到项目里面运行  cnpm install  /  npm install		
    npm run dev
方式 2（推荐）
		
    vue init webpack-simple eglpt-vue
    cd  eglpt-vue		
    cnpm install   /  npm install        	
    npm run dev
# 知识点
  绑定数据：v-bind: || :
  绑定样式： v-bind:class="{ active: isActive }"    v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"
  绑定html: v-html="h"
  MVVM双项数据绑定 ：model改变会影响视图view，view视图改变反过来影响model
  触发事件 ： v-on:click="getMsg()"  @click="setMsg()"
  
# 生命周期函数/生命周期钩子  

    组件挂载、以及组件更新、组件销毁、的时候触发的一系列的方法  这些方法就叫做生命周期函数
   
    beforeCreate(){
       console.log('实例刚刚被创建1');
    },
    created(){
       console.log('实例已经创建完成2');
    },
    beforeMount(){
       console.log('模板编译之前3');
    },
    mounted(){     /*请求数据，操作dom , 放在这个里面  mounted*/
       console.log('模板编译完成4');
    },
    beforeUpdate(){
       console.log('数据更新之前');
    },
    updated(){
       console.log('数据更新完毕');
    },
    /*页面销毁的时候要保存一些数据，就可以监听这个销毁的生命周期函数*/
    beforeDestroy(){   
       console.log('实例销毁之前');
    },
    destroyed(){
       console.log('实例销毁完成');
    }
# 请求数据
 
 vue-resource  官方提供的 vue的一个插件  https://github.com/pagekit/vue-resource [推荐使用]
      
    1、需要安装vue-resource模块，  注意加上  --save 插件写入package.json 
      npm install vue-resource --save /  cnpm install vue-resource --save  
    2、main.js引入 vue-resource
        import VueResource from 'vue-resource';   
    3、main.js  Vue.use(VueResource); 
    4、在组件里面直接使用
        this.$http.get(地址).then(function(){
    
        })
        
axios 第三方插件 https://github.com/axios/axios
    
    1、安装  cnpm  install  axios --save
    2、哪里用哪里引入axios

fetch-jsonp  https://github.com/camsong/fetch-jsonp
  
# 父-》子组件传值

    1.父组件调用子组件的时候 绑定动态属性  (可以传数据，也可以传方法，也可以是整个对象)
         <v-header :title="title" :run="run"  :home="this"></v-header>
    2、在子组件里面通过 props接收父组件传过来的数据  String； Number；  Boolean； Array；  Object； Date；  Function； Symbol
          /*无验证*/
         props:['title',"run","home"]
         /*有验证*/
         props:{
             'title':String,
             'run':Function,
             'home':Object
         }
# 父组件主动获取子组件的数据和方法：
 
     1.调用子组件的时候定义一个ref
         <v-header ref="header"></v-header>
     2.在父组件里面通过
         this.$refs.header.属性
         this.$refs.header.方法

# 子组件主动获取父组件的数据和方法：  
 
         this.$parent.数据
         this.$parent.方法
         
# 非父子组件传值
      1、新建一个js文件   然后引入vue  实例化vue  最后暴露这个实例
      2、在要广播的地方引入刚才定义的实例   
      3、通过 VueEmit.$emit('名称','数据')     
      4、在接收收数据的地方通过 $om接收广播的数据
        VueEmit.$on('名称',function(){
        
            })
# Vue Router     

    参考资料：https://router.vuejs.org/zh/
    
    1.安装npm install vue-router  --save   / cnpm install vue-router  --save
  
    2.引入 Vue.use(VueRouter)   (main.js)
  		import VueRouter from 'vue-router'
  		Vue.use(VueRouter)
  	3.配置路由
  	  1、创建组建 引入组建
  	  2、定义路由（建议复制js）
  	  const routes = [
      			  { path: '/foo', component: Foo },
      			  { path: '/bar', component: Bar },
      			  { path: '*', redirect: '/home' }   /*??????·??*/
      			]
      3、实例化VueRouter
           
            const router = new VueRouter({
              routes // （缩写）相当于 routes: routes
            })
      4、挂载
        new Vue({
      		  el: '#app',
      		  router，
      		  render: h => h(App)
      		})
     5 <router-view></router-view> 放在 App.vue
     
# 路由传值

    1、配置动态路由
       routes: [
        // 动态路径参数 以冒号开头
        { path: '/user/:id', component: User }
      ]
    2、在对应的页面
      this.$route.params获取动态路由的值
# get传值
    
    1、 :to="'/productContent?id='+key"     
    2、this.$route.query
    
# 重定向、别名

    “重定向”的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b，那么“别名”又是什么呢？  
    const router = new VueRouter({
      routes: [
        { path: '/a', redirect: '/b' }
      ]
    })  
    重定向的目标也可以是一个命名的路由：
    const router = new VueRouter({
      routes: [
        { path: '/a', redirect: { name: 'foo' }}
      ]
    })
    
    
    “别名”的功能让你可以自由地将 UI 结构映射到任意的 URL，而不是受限于配置的嵌套路由结构。
     { path: '/a', component: A, alias: '/b' }
# HTML5 History 模式

如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

    const router = new VueRouter({
      mode: 'history',
      routes: [...]
    })
     不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。
     你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。
     
     nginx
     location / {
       try_files $uri $uri/ /index.html;
     }

# 路由的嵌套
     1.配置路由
      {
         path: '/user',
         component: User,
         children:[
           { path: 'useradd', component: UserAdd },
   
           { path: 'userlist', component: Userlist }
   
         ]
   
       }
   
     2.父路由里面配置子路由显示的地方   <router-view></router-view>      
# Vue UI框架

		Element Ui    基于vue  pc端的UI框架    http://element.eleme.io/     https://element.eleme.cn/#/zh-CN/component/installation
		
		1.找官网  
        2.安装  cnpm i element-ui -S         -S表示  --save
		3.引入element UI的css 和 插件
            import ElementUI from 'element-ui';
            import 'element-ui/lib/theme-chalk/index.css';
            Vue.use(ElementUI);
        4、*webpack.config.js  配置file_loader      http://element.eleme.io/1.4/#/zh-CN/component/quickstart

		  {
			test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
			loader: 'file-loader'
	          }
	    5.看文档直接使用。
	    
	    element UI组件的单独使用（第一种方法）：
            1、cnpm install babel-plugin-component -D    
            2、找到.babelrc 配置文件
                    把        
                    {
                      "presets": [
                        ["env", { "modules": false }],
                        "stage-3"
                      ]
                    }          
                    改为  注意：  
                    {
                      "presets": [["env", { "modules": false }]],
                      "plugins": [
                        [
                          "component",
                          {
                        "libraryName": "element-ui",
                        "styleLibraryName": "theme-chalk"
                          }
                        ]
                      ]
                    }
            
                3、
                import { Button, Select } from 'element-ui';
                Vue.use(Button)
                Vue.use(Select)
	    element UI组件的单独使用（第二种方法）：
	    
            import { Button, Select } from 'element-ui';      
            Vue.use(Button)
            Vue.use(Select)                
            引入对应的css      
                import 'element-ui/lib/theme-chalk/index.css';        
            如果报错： webpack.config.js  配置file_loader
                  {
                    test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
                    loader: 'file-loader'
                      }
	    
		
     	MintUi         基于vue 移动端的ui框架  http://mint-ui.github.io/#!/zh-cn  http://mint-ui.github.io/docs/#/zh-cn2
        1.找官网        
        2.安装   npm install mint-ui -S         -S表示  --save    
        3.引入mint Ui的css 和 插件
            import Mint from 'mint-ui';
            Vue.use(Mint);
            import 'mint-ui/lib/style.css'            
        4.看文档/样例 直接使用。 创建项目的时候要选择 scss
           
           在mintUi组件上面执行事件的写法  @click.native
           
# vuex

    https://vuex.vuejs.org/zh/ (适用于大项目，小项目建议使用 localStorage 和 SessonStorage)
    Vuex 是一个专为 Vue.js 设计的状态管理模式  ,
    vuex解决了组件之间同一状态的共享问题  （解决了不同组件之间的数据共享） ,
    组件里面数据的持久化
    
# vuex的使用：
    1、src目录下面新建一个vuex的文件夹
    2、vuex 文件夹里面新建一个store.js
    3、安装vuex  
         cnpm install vuex --save
    4、在刚才创建的store.js引入vue  引入vuex 并且use vuex
        import Vue from 'vue'
        import Vuex from 'vuex'
        Vue.use(Vuex)
    5、定义数据
            /*1.state在vuex中用于存储数据*/
            var state={
                count:1
            }
    6、定义方法	 mutations里面放的是方法，方法主要用于改变state里面的数据  
            var mutations={
                incCount(){
                ++state.count;
                }
            }
    暴露
		const store = new Vuex.Store({
		    state,
		    mutations
		})		
		export default store;
    组建里面使用vuex：
    
    1.引入 store
    	 mport store from '../vuex/store.js';
    2、注册  
         export default{
            data(){
                return {               
                   msg:'我是一个home组件',
                value1: null,
                }
            },
            store,
            methods:{
                incCount(){
                this.$store.commit('incCount');   /*触发 state里面的数据*/
                }
            }
            }
        3、获取state里面的数据    
            this.$store.state.数据
        4、触发 mutations 改变 state里面的数据    			
            this.$store.commit('incCount');
    
    
    

# 问题

## 1.TypeError: this.getResolve is not a function

    npm uninstall sass-loader（卸载当前版本）
    npm install sass-loader@7.3.1 --save-dev

# 感谢支持
<table>
    <tr>
        <td><img src="http://oss.eglpt.com/img/4787496998721892352.jpg"/></td>
    </tr>
</table>