zoukankan      html  css  js  c++  java
  • 参考书籍《Vue.js快跑:构建触手可及的高性能Web应用》第1章 Vue.js基础-----1-2安装和设置

    安装Vue不需要任何特殊的工具,使用下面的代码就可以实现:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Vue</title>
    </head>
    
    <body>
      <div id="app"></div>
    
      <script src="https://unpkg.com/vue"></script>
      <script>
        new Vue({
          el: "#app",
          created() {
            //这段代码启动时会运行
            alert("与vueJs的美好邂逅")
          }
        })
      </script>
    </body>
    </html>

    注意:

    1. 首先有一个ID为app的div元素用于初始化Vue——因为多种原因,不能在body元素上进行初始化。
    2. 在页面上引用CDN版本的Vue文件。当然也可以下载到本地并引用。
    3. 创建一个Vue的实例,并将该实例的el属性指向之前提到的div元素。

    上述方式适合用于单页面的引用,对于复杂项目希望使用类似webpack这样的打包工具。

    1. 安装nodeJs
    2. 安装webpack。
    3. 安装vue-cli
      1. npm install --global vue-cli
      2. vue init webpack

        

    npm run dev 启动

    访问:http://localhost:8080

    恭喜——你已经创建了你的第一个Vue工程!

  • 相关阅读:
    maven学习(二)
    maven学习(一)
    一步步点亮led之软硬件分析
    mkv210添加校验和
    led部分Makefile
    makefile
    交叉编译工具链
    基础知识
    C语言复杂表达式与指针应用
    指针
  • 原文地址:https://www.cnblogs.com/cuilichao/p/14892296.html
Copyright © 2011-2022 走看看