【Vue2 零基础学习】编写你的第一个 Vue2 应用

291 阅读2分钟

文章为作者最初学习 Vue 记录的一些笔记,供大家参考学习。

前后端分离

  • 原来的前后端不分离,系统的显示与逻辑耦合在一起
  • 手机为代表的移动终端的出现,导致多个客户端(前端)对应同一服务端(后端)的需求
    • 淘宝:网页端,Android,iOS
  • 前后端分离后
    • 后端提供逻辑,前端提供数据显示与交互
    • 便于接入新的客户端
    • 前后端可由不同的团队独立开发,采用不同的技术与框架
    • 前端通过调用后端的接口(API)获取数据
    • 前端拿到数据后进行渲染显示

编写你的第一个 Vue2 应用

使用脚手架创建应用

vue create hello-world
  • 项目结构

    • node_modules:用于存放项目依赖包
    • public:公共资源,打包时不会被编译
    • src
      • assets: 放置图片、文件等资源,打包时会被编译
      • components:放置组件,即 .vue 文件
      • App.vue:入口组件
      • main.js:入口 js 文件
    • package.json:项目依赖管理
  • 运行项目

    • 打开 package.json

    • 点击 "serve": "vue-cli-service serve"

image.png

image.png

修改应用

  • 删除 App.vue 所有内容

  • 将 App.vue 的内容替换为

    <template>
      <div>
        <h4>Counter: {{ counter }}</h4>
        <button v-on:click="increase">点一次加1</button>
      </div>
    </template>
    <script>
    export default {
      data() {
        return ({
          counter: 0
        })
      },
      methods: {
        increase() {
          this.counter++;
        }
      }
    }
    </script>
    
  • 打开浏览器,执行效果为

image.png

如何部署应用

  • 为使应用最小化,可以删除 src\components 以及 src\assets 目录

  • 打开 package.json,点击 build 前面的绿色按钮,然后选择 "run build"

image.png

  • build 结束后,将会在工程根目录下多出一个 dist 目录

image.png

  • dist 目录里包含了完整的、优化且压缩过的应用代码
    • 单页应用:只有一个页面 index.html
    • 所有的组件、逻辑、资源(如图片)依赖都被打包进 js 下面的 .js 文件中
    • 尺寸很小:去掉没有使用的包以后,只有 500KB
  • 可以将这里 dist 目录里的代码部署到 HTTP 服务器上
    • 下载 nginx:nginx.org/en/download…
    • 把下载后的 zip 文件解压到任意目录,比如 D:\nginx
    • 把 dist 目录下的文件复制到 nginx 安装目录下的 html 目录
    • 双击 nginx 安装目录下面的 nginx.exe 启动服务器
    • 打开浏览器,输入 http://localhost
    • 可以看到与之前本地完全相同的运行结果

什么是单页应用

  • SPA:Single Page Application
  • 只有一个页面
  • 优点:
    • 只需要一次下载,对服务器压力小
    • 内容的改变不需要重新加载整个页面
  • 缺点:
    • 不利于搜索引擎优化(SEO:Search Engine Optimization)
    • 初次加载比较耗时
  • 服务器端渲染ssr.vuejs.org/zh/#%E4%BB%…