全民Vue——1.如何理解前端和Vue

最近身边学习 Vue 的人也越来越多了,大家都有很多的疑问,为什么前端要用框架、Vue 做了些什么、要怎么上手,等等。距离上一次写 Vue 也过去三年了,是时候再把这三年自己的理解再整理进去了。由于这个系列主要是希望写给可能前端掌握也不深的人,所以会铺垫一些自己认为需要的内容,本节先来讲讲入门前端,作为铺垫,来理解 Vue 这个框架吧。

前端页面解析

页面组成

我们打开一个前端项目,经常会看到很多不同后缀的文件,例如一个页面可能包括a.htmla.css、a.js,用了 Vue 还有a.vue,再加上 Typescript 可能还有a.ts

相信有些没写过前端的开发们是有点崩溃的,我们先来分别看看一个前端页面都是由什么组成的。其实最终跑在浏览器中的代码,主要包括三种:HTML、CSS、Javascript。

HTML


直接从代码说起,最简单的莫过于:

<html>
    <head>head>
    <body>
        <h1>我的第一个标题h1>
        <p>我的第一个段落。p>
    body>
html>

这里面包括两个子模快:

  • :常包括控制样式的标签、控制浏览器特殊逻辑的标签、控制代码执行逻辑的的方式去引用。

    当一个网站依赖的代码越来越多,其实管理依赖和版本是一件很麻烦的事情。然后 npm 就出现了,作为一个把这些代码集中到一起来管理的工具。

    同时,我们可以结合一些 tree shaking 的能力,在本地构建的时候,把使用的别人的依赖包里没用用到的部分去掉,减小代码包的大小等。

    在安装 Node.js 的时候,npm 的能力也会一块提供到,按照完之后就能直接在机器终端使用npm install xxx这种能力啦,需要安装什么依赖包呢,你可以去npmjs官网搜一下。

    vue cli


    通常来说,脚手架可以让你快速地生成示例代码、搭建本地环境,也可以更新依赖的版本等,避免了每个开发者自行调整开发环境、打包逻辑等配置。
    Vue cli 也提供了这样的能力,更多的可以参考官方文档。

    Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题。

    使用方式很简单:

    // 安装脚手架
    npm install -g @vue/cli
    // 脚手架生成 vue 项目,同时会自动安装依赖
    vue create vue-cli-demo
    

    生成之后的代码目录是这样的:
    全民Vue——1.如何理解前端和Vue_第3张图片

    启动项目


    一般来说,项目会有个 README.md 文件,你能看到一些简单的说明,例如这里生成的:

    # Project setup
    yarn install
    # Compiles and hot-reloads for development
    yarn run serve
    # Compiles and minifies for production
    yarn run build
    # Run your tests
    yarn run test
    # Lints and fixes files
    yarn run lint
    

    yarn 跟 npm 都是差不多的包管理器,区别在于 yarn 在安装时会速度更快(并行、离线等),以及版本统一管理的比较好。但如果你不是有特殊的喜好或者习惯,其实两个都可以用,例如这里的yarn run serve也可以用npm run serve来运行。

    如果有些习惯不好的项目缺了 README,这种时候要怎么去启动一个项目呢?可以查看package.json文件:

    {
      "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint"
      }
    }
    

    一般来说,开发环境是devserve等,生产环境是buildscripts里是一些任务,运行命令npm run taskName就可以启动了。

    全民Vue——1.如何理解前端和Vue_第4张图片

    上图中,我们可以看到任务已经启动了,访问输出的地址(这里是http://localhost:8080/或者http://10.40.120.53:8080/)就能看到我们的项目跑起来了。
    全民Vue——1.如何理解前端和Vue_第5张图片

    结束语


    第一 part 结束了,更多的内容还是前端相关。这些主要是这几年对页面渲染的一些新的理解,然后简单用脚手架启动了个 demo 项目。内容是按照自己觉得较清晰的逻辑展开来讲的,如果说你有更好的想法,或是发现我的描述中有哪些不到位的地方,也十分欢迎来交流。
    工具始终是工具没错,但一个工具为什么受这么多人追捧,它到底解决了什么,你可以从中学习到什么,这些才是个人认为的在使用工具时候收获的很重要的东西。在 Vue 官方文档很完善的情况下,我来给你们补上文档以外的一些技巧和内容吧。

你可能感兴趣的:(全民Vue——1.如何理解前端和Vue)