zoukankan      html  css  js  c++  java
  • vue目录结构熟悉

     给项目的入口文件做点小改变:

    【补充:编辑器建议使用vscode,我还没装,暂时先用phpstorm】

    打开 APP.vue 文件,代码如下(解释在注释中)

    <template>
      <div id="app">
        <img src="./assets/logo.png">
        <router-view/>
        <hello></hello>
      </div>
    </template>
    
    <script>
      //导入组件
      import Hello from "./components/Hello"
      console.log(1)
    
    export default {
      name: 'App',
      components:{
        Hello
      }
    }
    </script>
    
    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

    修改 src/components/Hello.vue

    <template>
        <div class="hello">
            <h1>{{ msg }}</h1>
        </div>
    </template>
    
    <script>
    export default{
        name:"hello",
        data(){
            return {
                msg:"cyy要学习vue啦~"
            }
        }
    }
    </script>

    重新打开页面 http://localhost:8080/,一般修改后会自动刷新,显示效果

  • 相关阅读:
    博客园的商业模式
    读书单
    VC++学习笔记
    技术话题
    vc+学习遇到的问题
    常见的Java问题排查方法
    MSDN Library for vs 2010 下载和安装
    WT19i刷机过程
    随记
    WT19i的刷机
  • 原文地址:https://www.cnblogs.com/chenyingying0/p/12376777.html
Copyright © 2011-2022 走看看