Vue3开发教程（一、学习Vue前需要了解的内容)

前言
本文是笔者学习vue前端技术过程的总结，其中包括vue开发需要了解的相关技术如：node、ES6、TypeScript、vite、ElementUI。以vue作为主线来介绍相关技术，最后通过一个典型的前端应用来体会vue的开发。希望笔者的内容能帮助将要学习vue的同学，由于本人对前端技术了解有限，如有理解不到位的地方希望各路大神给予意见。同时也欢迎大家的留言与交流。

提示：本文中的技术关键字可以链接到该技术的官网站

一、学习Vue前需要了解的内容
web基础知识
html、css、javascript

Node.js
官方的描述“Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时。”笔这认为就是一种编程语言的运行平台。类似java语言中的JVM。中文网站地址

NPM
npm包管理器，可用于管理node.js的开发依赖的类库。类似java开发中的maven或gradle。在npm网站可以查询各种开发资源。通过npm install 可以安装到本地。

npm install vue
TypeScript
官网描述"typescript是javascript类型的超集，它可以编译成纯javascript。"笔者人为javascript的的语法typescript都支持，但是typescript功能更加强大。下面介绍一下开发中比较常用的代码，更详细请参考用户指南。
变量
格式：<修饰符> 名称:<类型>

let isDone: boolean = false;
let decLiteral: number = 6;
let name: string = "bob";
let list: number[] = [1, 2, 3];
模块

导入：使用关键字 “import”来导入其它模块中的导出内容。

//导入一个模块中的某个导出内容
import { ZipCodeValidator } from "./ZipCodeValidator";
let myValidator = new ZipCodeValidator();

//对导入内容重命名
import { ZipCodeValidator as ZCV } from "./ZipCodeValidator";
let myValidator = new ZCV();

//将整个模块导入到一个变量，并通过它来访问模块的导出部分
import * as validator from "./ZipCodeValidator";
let myValidator = new validator.ZipCodeValidator();

导出：任何声明（比如变量，函数，类，类型别名或接口）都能够通过添加export关键字来导出。主要有以下三种导出方式：导出声明，语句导出，

//1.导出声明

//导出定义的接口
export interface StringValidator {
isAcceptable(s: string): boolean;
}

//2.语句导出

//导出类与设置导出别名
class ZipCodeValidator implements StringValidator {
isAcceptable(s: string) {
return s.length === 5 && numberRegexp.test(s);
}
}
export { ZipCodeValidator };
export { ZipCodeValidator as mainValidator };

//3.重新导出

//导出原先的验证器但做了重命名
export {ZipCodeValidator as RegExpBasedZipCodeValidator} from "./ZipCodeValidator";

//导出LettersOnlyValidator所有内容
export * from "./LettersOnlyValidator";

默认导出

//JQuery.d.ts
//导出默认$为JQuery
declare let $: JQuery;
export default $;


//App.ts
//导入默认的导出
import $ from "JQuery";
$("button.continue").html( "Next Step..." );
Vite
vite是一个前端构建工具，可在node环境运行。适合vue程序的开发，工程目录及文件命运要符合vite的要求。可以通过vite init创建一个空白的vue项目作为基础进行开发。

# npm 6.x
npm init vite@latest my-vue-app --template vue

# npm 7+, 需要额外的双横线：
npm init vite@latest my-vue-app -- --template vue
Element Plus
Element Plus 是基于Vue3开发的UI框架，其中包括大量封装好的组件可直接使用，使项目开发更容易。