• Vue第一个简单的例子


     一、基本环境配置

    1、安装NodeJS

      https://nodejs.org/en/download/

    2、设置淘宝镜像:大家都知道国内直接使用 npm 的官方镜像是非常慢的,这里推荐使用淘宝 NPM 镜像。

    npm install -g cnpm --registry=https://registry.npm.taobao.org (安装淘宝镜像)

    3、安装webpack

      cnpm install webpack -g

    4、安装vue脚手架

      npm install vue-cli -g

    5、新建一个文件夹,在该文件下打开命令行,执行以下命令,创建项目

      vue init webpack projectName

    二、新建一个项目

    三、对新建的项目文件进行修改

    1、首先在components目录下添加HelloVue.vue文件

    <template>
      <div id="vue">Hello Vue {{message}}</div>
    </template>
    
    <script>
    export default { //这里需要将模块引出,可在其他地方使用
      name: 'HelloVue',
      data () {
        return {
          message: 'xxx'
        }
      }
    }
    </script>
    
    <style>
      #vue {
        color: green;
        font-size: 28px;
      }
    </style>
    

      

    2、在HelloWorld.vue内容中添加

        <h1>
          <router-link to="day01">HelloVue</router-link>
        </h1>
    

      

    3、在index.js文件进行相应的修改

    4、运行结果

  • 相关阅读:
    java静态导入
    java导出javadoc文档
    Java编程规范
    Java谜题——类谜题(二)
    JS注意事项
    JS——实现短信验证码的倒计时功能(没有验证码,只有倒计时)
    Java网络通信——XML和JSON
    JS基础知识——定时器
    JS的事件动态绑定机制
    JS基础知识(五)
  • 原文地址:https://www.cnblogs.com/wylwyl/p/10719652.html
Copyright © 2020-2023  润新知