zoukankan      html  css  js  c++  java
  • vue-实践1

    1.基本框架配置

    npm install vue --save
    npm install --global vue-cli
    vue init webpack compare-vue
    cd compare-vue
    npm install
    npm run dev
    


    2.路由配置
    增加页面

    <template>
    	<div class="login">
    		{{name}}
    	</div>
    </template>
    <script>
    	export default{
    		name:'login',
    		data(){
    			return {
    				name:'this is login page !'
    			}
    		},
    		methods:{
    
    		}
    	}
    </script>
    <style scoped>
    	
    </style>
    

    在router文件夹下面的index.js进行配置

    import login from '@/view/login'
    {
          path: '/login',
          name: 'login',
          component: login
        }
    


    3.配置elementui

    npm i element-ui -S 安装UI
    
    在main.js加上下面代码
    import Vue from 'vue';
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    import App from './App.vue';
    
    Vue.use(ElementUI);
    //如果需要改变默认大小或则层级的话Vue.use(Element, { size: 'small', zIndex: 3000 });
    
    new Vue({
      el: '#app',
      render: h => h(App)
    });
    代码结束!!!!!
    
    之后开始copy and paste
    http://element.eleme.io/#/zh-CN/component/container
    


    4.axios配置

    import axios from 'axios'
    
    methods:{
        requestData(){
          axios.get('https://jsonplaceholder.typicode.com/photos')
          .then((data)=>{
            console.log(data);
          })
          .catch((e)=>{
            console.log(e);
          });
        }
      }
    


    uploading-image-994782.png

  • 相关阅读:
    java多线程编程(一)
    java的本地文件操作
    Java基础总结(二)
    Gym 100851 Distance on Triangulation
    Gym 100851 题解
    Gym 101482 题解
    CodeForces Round 521 div3
    zoj 5823 Soldier Game 2018 青岛 I
    CodeForces round 520 div2
    CodeForces 1042 F Leaf Sets 贪心
  • 原文地址:https://www.cnblogs.com/cyany/p/9231581.html
Copyright © 2011-2022 走看看