跟着技术胖学Vue2.0—第一课：走起我的Vue2.0

最新推荐文章于 2024-09-15 21:49:51 发布

哎呦喂iuv

最新推荐文章于 2024-09-15 21:49:51 发布

阅读量682

点赞数 1

分类专栏： vue2.x学习记录文章标签： vue.js 前端

本文链接：https://blog.csdn.net/ll282991823/article/details/122168330

版权

vue2.x学习记录专栏收录该内容

19 篇文章 4 订阅

订阅专栏

前言

秋招结束后，自己签了一个前端的工作，正好趁着公务员事业单位的笔试也结束后，给自己定下新的学习目标，开始重温前端。向hr了解到公司需要用到vue和node技术栈，so我就开始先学vue吧，用博客记录自己的学习路程，希望可以坚持下去！

我选的教程是技术胖的学习教程，是一个前端工作同学给我推荐的，今天从第一课开始。

学习回顾

课程主要内容

1、下载vue

2、新建一个项目

3、安装一个服务器live-server

4、初始化项目

5、成功运行项目，显示helloworld

操作步骤

1、下载vue

很简单，网址是vuejs.org，不过我新学到的一个点是中文版网址为cn.vuejs.org。打开网址后从学习-教程进去

找到安装，下载里面的开发版本。其实教程里两种都下了，不过最后只用了开发版本。这里又get到新知识点——开发版本适合程序员开发用，因为有完整的警告和调试模式，而生产版本就少了一些东西。

2、新建一个项目

第一步：在自己的本地新建一个空文件夹，然后打开编译器——Visual Studio Code，将文件夹拖入到编译器中就可以打开。

第二步：在文件夹下新建两个文件夹，一个是assets，一个是example，前者放css、js的库，后者放咱们自己写的代码。在assets文件夹里新建css和js文件夹，并将之前下载的vue.js放在js文件夹下。

第三步：example里面建立一个helloworld.html，并在example文件夹外同级建一个index.html。前者是咱们本次写的vue小实例，后者是程序运行后的入口。

index.html文件中的主要代码如下：

<body>
    <h1>Vue2.0实例</h1>
    <br>
    <ol>
        <li><a href="#">第一个Vue2.0实例</a></li>
    </ol>
</body>

example.html文件中的主要代码如下：

<body>
    <h1>Hello World</h1>
    <hr>
    <div id = 'app'>
        {{message}}
    </div>

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

上述的代码是比较核心的，重点是div中引用div里的数据是需要使用双花括号，以及Vue对象里面的参数写法。括号容易写错对于我这种小白来说还是很常见的错误呢。

3、安装一个服务器live-server，并初始化项目

安装很简单，使用控制命令cnpm install -g live-server，然后回车，等待安装完成就好啦。我之前写的是npm install live-server -g，真的是照着写都会出错啊，不知道这个命令的写法对不对，反正没安装上。

4、初始化项目

使用命令npm init，然后一顿操作，这一部分可以随意点。完成后会生成一个package.json文件，刚刚的内容都会存储在这个文件中。