VUE1——走起我的Vue2.0

版权声明:正在学习中,有错误欢迎指出。感谢比❤❤~ https://blog.csdn.net/gx17864373822/article/details/82224727

走起我的Vue2.0

1、下载Vue2.0的两个版本:

开发版本:包含完整的警告和调试模式(在开发时用这个)
生产版本:删除了警告,进行了压缩(项目发布时用这个)

2、项目结构搭建

这里写图片描述

1、assets:一般存放开发过程中自己写的静态资源(image, css, js等,如:shop.css, car.png, roomListUtil.js)
2、vue init 进行初始化,生成package.json文件
3、在example目录下存放网页

3、live-server的使用

  • 用npm进行全局安装
cnpm install live-server -g
  • 在项目目录中打开
live-server

4、index.html中

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Vue.js实例</title>
  </head>
  <body>
     <h1>VUE2.0实例</h1>
     <hr>
     <ol>
       <li><a href="./example/helloworld.html">Hello World实例!</a></li>
     </ol>
  </body>
</html>

5、编写第一个HelloWorld代码:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Hello World</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
  </head>
  <body>
    <h1>HelloWorld</h1>
    <hr>
    <div id="app">
       {{message}}
    </div>

    <script type="text/javascript">
      var app = new Vue({
         el:'#app',
         data: {
           message: 'Hello World!'
         }
      })
    </script>
  </body>
</html>

猜你喜欢

转载自blog.csdn.net/gx17864373822/article/details/82224727
今日推荐