初始vue3，小试牛刀~

奔跑圈圈
494 阅读5分钟

这是我参与8月更文挑战的第14天，活动详情查看：8月更文挑战

vue3中文文档

www.vue3js.cn/docs/zh/api…

英文文档 v3.vuejs.org/guide/intro… 图片.png

typescript知识

前置知识

  1. 希望你会 TypeScript，本套课程会全程使用 TS 的语法来编写程序。如果不会，技术胖有完全免费的视频课程，地址：TypeScript 从入门到精通图文视频教程-2020 年新版
  2. 希望你做过或者有 Vue2 的基础就更好了。如果不会，技术胖有完全免免费的视频课程：Vue2.x 学习路线
  3. 希望你会基本的 npm 或者 yarn 的包管理应用。对不起，这个专门的课程我还没出,但课程中我会详细讲解 图片.png

官方网站地址: v3.vuejs.org

  • 首先是向下兼容，Vue3 支持大多数 Vue2 的特性。我们同事甚至开玩笑说，我就拿 Vue2 的语法开发 Vue3，也是没有任何问题的。
  • 性能的提升，每个人都希望使用的框架更快，更轻。Vue3 做到了，给开发者一个极致的体验。官方网站给出的数据是：打包大小减少 41%，初次渲染快 55%，更新快 133%，内存使用减少 54%（惊艳到的请把惊艳两个字打到公屏上）。
  • 新推出的Composition API ，在 Vue2 中遇到的问题就是复杂组件的代码变的非常麻烦，甚至不可维护。说白了就是封装不好，重用不畅。这个Composition API一推出，立马解决了这个问题，本套课程中也会重点介绍这部分内容。它是一系列 API 的合集。
  • 其他新特性：Teleport(瞬移组件)、Suspense(解决异步加载组件问题)和全局 API 的修改和优化。
  • 更好TypeScript支持，我以前在开发 Vue2 的时候，是不适用TypeScript的，因为集成时很困难，疼点太多。但 Vue3 解决了这个问题，Vue3 的源代码就是使用TypeScript进行开发的。所以在新的版本上使用TS也更加顺畅无阻。

vue-cli 搭建vue3开发

安装vue-cli

参考官网 cli.vuejs.org/zh/guide/in…

建议使用npm进行安装，而且要做全局安装。因为我在使用yarn进行安装后，也可以安装成功，但是安装完成不能使用vue命令。安装时间两分钟左右，安装完成会有success的提示。如果你以前安装过，需要检查一下版本，升级到最新版本，因为只有最新版本(V4.5.4 以上版本)才有创建 Vue3 的选项。

vue --version

这时候可以展示出类似这样的版本信息@vue/cli 4.5.6。如果你的版本低于这个，可以再使用npm install -g @vue/cli来进行安装。

图片.png

创建vue3项目

图片.png

04 项目初始结构和重要文件讲解

|-node_modules       -- 所有的项目依赖包都放在这个目录下|-public             -- 公共文件夹

---|favicon.ico      -- 网站的显示图标

---|index.html       -- 入口的html文件|-src                -- 源文件目录，编写的代码基本都在这个目录下

---|assets           -- 放置静态文件的目录，比如logo.pn就放在这里

---|components       -- Vue的组件文件，自定义的组件都会放到这

---|App.vue          -- 根组件，这个在Vue2中也有

---|main.ts          -- 入口文件，因为采用了TypeScript所以是ts结尾

---|shims-vue.d.ts   -- 类文件(也叫定义文件)，因为.vue结尾的文件在ts中不认可，所以要有定义文件

|-.browserslistrc    -- 在不同前端工具之间公用目标浏览器和node版本的配置文件，作用是设置兼容性

|-.eslintrc.js       -- Eslint的配置文件，不用作过多介绍

|-.gitignore         -- 用来配置那些文件不归git管理

|-package.json       -- 命令配置和包管理文件

|-README.md          -- 项目的说明文件，使用markdown语法进行编写

|-tsconfig.json      -- 关于TypoScript的配置文件

|-yarn.lock          -- 使用yarn后自动生成的文件，由Yarn管理，安装yarn包时的重要信息存储到yarn.lock文件中

package.json中的三条命令

上两节课你可以使用npm run serve或yarn serve查看项目效果，就是因为有package.json中的scripts起到了作用。先来看一下这三条命令。

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

能使用vue-cli-service是因为vue-cli自动安装了cli-service这个工具，此处可以在devDependencies中看出哦。

这三个命令的意思是：

  • serve : 在开发时用于查看效果的命令，视频中演示看一下效果
  • build : 打包打码，一般用于生产环境中使用
  • lint : 检查代码中的编写规范

我们顺便讲一下package.json中另外两个比较重要的配置项dependencies和devDependencies。这两个都是用来记录安装包信息的，但如果要想完全搞清楚他们的区别，你先要弄清楚什么是开发环境和生产环境。

  • 开发环境： 作为一个程序员，每天作的事情都是在开发环境中，编写代码、测试代码、修改 Bug。也就说这些代码没有上线。
  • 生产环境：就是代码已经上线，放到了正式的服务器上，公司开始运营去赚钱的代码。

明白了这两个概念后，dependencies下的包是生产环境中必须用到的，当然开发环境也需要。devDependencies是只有开发环境中使用的，上线后这些包就没用了，打包后也不会打包进去的代码。

main.ts文件
import { createApp } from "vue"; // 引入vue文件，并导出`createApp`
import App from "./App.vue"; // 引入自定义组件，你在页面上看的东西基本都在这个组件里
createApp(App).mount("#app"); // 把App挂载到#app节点上，在public目录下的index.html找节点、

前端路漫漫其修远兮，吾将上下而求索，一起加油，学习前端吧

欢迎留言讨论~

avatar
文章
阅读
粉丝