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

  • 相关阅读:
    easyui 分页 MVC
    c#实现万年历示例分享 万年历农历查询
    GroupBy 带条件分组求和
    easyui_tree 复选框 动态加载树
    C#测试运行时间
    MVC 关于easyui-datebox 赋值问题
    MVC 上传 下载
    WindowsService 安装 cmd
    笔记 .Net反射机制
    C# 测试服务器连接 Ping
  • 原文地址:https://www.cnblogs.com/cyany/p/9231581.html
Copyright © 2011-2022 走看看