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

 前言

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

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

一、学习Vue前需要了解的内容

web基础知识

html、css、javascript

ode.js

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

PM

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, ];

模块

导入：使用关键字 “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 && (s);}
}
export { ZipCodeValidator };
export { ZipCodeValidator as mainValidator };//.重新导出//导出原先的验证器但做了重命名
export {ZipCodeValidator as RegExpBasedZipCodeValidator} from ./ZipCodeValidator;//导出LettersOnlyValidator所有内容
export * from ./LettersOnlyValidator; 

默认导出

//JQuery.
//导出默认$为JQuery
declare let $: JQuery;
export default $;//
//导入默认的导出
import $ from JQuery;
$().html( ext 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 是基于Vue开发的UI框架，其中包括大量封装好的组件可直接使用，使项目开发更容易。