Vue3开发教程（全）
目录
前言
一、学习Vue前需要了解的内容
web基础知识
Node.js
NPM
TypeScript
Vite
Element Plus
二、环境搭建
1.安装Node.js
2.安装VScode
3.创建Vue项目
4.运行一个Vue应用程序
安装vite
运行工程
打包文件
5.工程文件讲解
index.html
main.js
App.vue
HelloWorld.vue
三、原生Vue程序
编写html文件
通过Live server查看结果
结论
四、Vue-router
1、安装vue-router
2、配置vue-router
创建router
配置router
3、编写第一个vue-router应用
创建视图文件
将试图配置到router中
添加router-view与router-link
运行并查看结果
4、带参数的路由
创建文件User.vue
User.vue
/router/index.ts
App.vue
运行并查看结果
5、嵌套路由
创建Profile.vue，Posts.vue页面
Profile.vue
Posts.vue
User.vue
/router/index.ts
运行并查看结果
6.编程式导航
Posts.vue
Profile.vue
运行并查看结果
五、使用element plus开发应用
六、总结
前言
本文是笔者学习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 vueTypeScript
官网描述"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 vueElement Plus
Element Plus 是基于Vue3开发的UI框架，其中包括大量封装好的组件可直接使用，使项目开发更容易。
二、环境搭建
1.安装Node.js
下载对应操作系统的压缩包并解压到本地目录。下载地址
并在此目录中创建文件夹node_cache、node_global。
笔者的目录:D:\software\node-v16.14.0-win-x64
新增环境变量
NODE_HOME=D:\software\node-v16.14.0-win-x64
NODE_PATH D:\software\node-v16.14.0-win-x64\node_global
向Path环境变量添加这个两个环境变量
配置Nodejs
cmd中执行以下命令
//设置全局模块
npm config set prefix "D:\software\node-v16.14.0-win-x64\node_global"
//设置缓存
npm config set cache "D:\software\node-v16.14.0-win-x64\node_cache"2.安装VScode
下载地址
在vscode中新建终端，用于执行npm命令。
//进入到D盘根路径
cd D:
提示：之后的命令都在终端中执行
3.创建Vue项目
初始化vue项目，项目名称为vue3-hello。
$ npm init vite@latest vue3-hello -- --template vue使用vscode打开目录D:\vue3-hello
4.运行一个Vue应用程序
安装vite
//安装vite
npm install vite
提示：安装vite后我们通过VSCode刷新工程目录，发现多了node_modules目录。这个目录就是项目运行依赖的模块，我们看到了vite和vue向模块以被载入，因此对与这个项目我们不要再安装vue了，也说明了vite的安装包依赖的vue。
运行工程
//运行vite启动工程
npm run dev通过浏览器访问 http://localhost:3000/ ，看到如下页面说明项目启动成功。
打包文件
//npm打包文件
npm run build打包后会在工程目录下新增dist文件加，dist文件加里的文件便是我们将vue应用打包成html、js、图片等静态的内容。通常这些静态文件在http服务器上就可以对外提供页面服务了。
提示：vscode安装Live server插件就可以启动一个httpserver来运行我们的dist中的内容
扩展设置可以对Live server进行配置
点击“在settings.json中编辑”则可通过json的方式进行配置
点击右下角的go Live便可以运行，运行后会看到与之前通过vite运行一样的效果。
5.工程文件讲解
提示：具体代码的讲解请看代码上方的备注。
index.html
应用的入口文件，浏览器通过index.html作为入口来访问这个应用。
//index.html通过script标签引入main.js并执行。
<script type="module" src="/src/main.js"></script>main.js
主应用程序文件，vue应用的初始化脚本程序，包括一些模块的引用和设置。
//main.js介绍//从Vue中导入createApp对象，用于创建vue的应用程序
import { createApp } from 'vue'//导入一个自定义的Vue与应用（页面），并命名为APP对象。
import App from './App.vue'//创建APP应用，并把vue渲染的html挂载到index.html的<div id="app"></div>元素中。
createApp(App).mount('#app')App.vue
Vue单页面的主应用程序。
//App.vue
//引入自定义组件HelloWorld
import HelloWorld from './components/HelloWorld.vue'
<!--App.vue文件
定义应用的html渲染模板
--><template><!-- 加载一个vue logo 的图片--> <img alt="Vue logo" src="./assets/logo.png" /><!-- 使用HelloWorld组件，并给组件传递一个msg的参数其值为："Hello Vue 3 + Vite" --><HelloWorld msg="Hello Vue 3 + Vite" />
</template>HelloWorld.vue
自定义的Vue组件，通过组件可以实现功能或页面的复用。
//HelloWorld.vue//导入vue中的ref对象，ref可理解为此组件的引用。
import { ref } from 'vue'//定义组件属性
defineProps({msg: String
})//设置一个计数变量（组件内）
const count = ref(0)
<!--将组件属性msg绑定到h1标签上
-->
<h1>{{ msg }}</h1><!--将组件中的变量count绑定到button上，设置button的onclick事件为表达式count++
-->
<button type="button" @click="count++">count is: {{ count }}</button>三、原生Vue程序
提示：上一节我们使用vite体验了一下Vue的开发，这一节我们主要使用原生js的方式来学习vue。通过这两种方式的学习可以更好的理解vue的使用。
编写html文件
在dist中新建vue3-demo.html文件
提示：以下为内容，请读者对比上一节中的内容来理解。
<html>
<head><title>原生vue3演示</title><!-- 通过script标签加载vue的js文件相当于man.js 中的import { createApp } from 'vue'--><script src="https://unpkg.com/vue@next"></script><style>#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;}</style>
</head>
<!-- 对比上一节中的index.html -->
<div id="app"><HelloWorld msg="Hello Vue 3 + Vite" />
</div>
<script>//对比上一节里的HelloWorld.vuevar HelloWorld_vue = {props: {msg: String},data() {return {count: 0}},template: `<h1>{{ msg }}</h1><button type="button" @click="count++">count is: {{ count }}</button>`};//对比上一节里的App.vuevar App_vue = {template: `<HelloWorld msg="Hello Vue 3 + Vite" />`}//对比上一节中的main.js//创建一个Vue 应用var createApp = Vue.createApp(App_vue)//注册HelloWorld组件createApp.component('HelloWorld', HelloWorld_vue)//挂载App到div#idvar vm = createApp.mount('#app')
</script></html>通过Live server查看结果
点击按钮可以看到数字在累加。
结论
以上就是用原生js来创建的vue应用，作者写这部分内容主要是让读者可以更好的理解vue的使用。细心的读者会发现这总方式开发vue所有的内容都写在一个html中。在实际开发中要比这个demo要复杂的多，这样就会导致文件过大无法协同工作和难于维护。所以在日常的开发中还是推荐使用vite来做开发与构建。
四、Vue-router
由于vue一般是单页面程序，但是实际上我们会有很多的页面试图。基于这个需求就需要一个路由通过某种路径来展示不同的视图。这一节我们来学习Vue-router
1、安装vue-router
vscode终端中执行以下命令安装
npm install vue-router@4安装后我们在node_modules中可以看到vue-router
2、配置vue-router
创建router
在src下创建目录router，并在router下创建index.ts文件
index.ts文件内容
//导入vue-router
import { createRouter, createWebHashHistory } from "vue-router"//创建路由表
const routes = []//创建路由
const router = createRouter({history: createWebHashHistory(),routes
})配置router
添加或修改main.js为以下内容
import { createApp } from 'vue'
import App from './App.vue'
//导入router
import router from './router'//应用使用router
createApp(App).use(router).mount('#app')//将router作为默认导出
export default router3、编写第一个vue-router应用
创建视图文件
在src下创建views目录，并新建Home.vue和About.vue文件
Home.vue
<template><div>Home</div>
</template>About.vue
<template><div>About</div>
</template>将试图配置到router中
修改src/rourer/index.ts中的路由表，分别将配置Home与About的路由path。
//创建路由表
const routes = [{path:'/home', component: () => import('../views/Home.vue')},{path:'/about', component: () => import('../views/About.vue')}
]添加router-view与router-link
修App.vue template为如下内容
<template><img alt="Vue logo" src="./assets/logo.png" /><HelloWorld msg="Hello Vue 3 + Vite" /><p><!--使用 router-link 组件进行导航 --><router-link to="/home">Home</router-link> |<router-link to="/about">About</router-link> </p><div>这是router-view<!-- 路由匹配到的组件将渲染在这里 --><router-view></router-view></div>
</template>运行并查看结果
点击Home会显示home视图，点击About则显示About视图。同时浏览器的地址也会改变为配置的path，说明我们的路由生效了。
提示：直接通过浏览器输入对应的路由也可以改变视图
4、带参数的路由
vue中支持带有参数的路径。例如/user/1，如果想获取这个url中的1可以使用$route.params.id。
创建文件User.vue
User.vue
<template><div>User {{ $route.params.id }}</div>
</template>/router/index.ts
//创建路由表
const routes = [{path:'/home', component: () => import('../views/Home.vue')},{path:'/about', component: () => import('../views/About.vue')},//动态路由url:/user/1 id为1{path:'/user/:id', component: () => import('../views/User.vue')}
]App.vue
<p><!--使用 router-link 组件进行导航 --><router-link to="/home">Home</router-link> |<router-link to="/about">About</router-link>|<!--添加路由的参数--> <router-link to="/user/1">User</router-link>
</p>运行并查看结果
点击User可以看到下方router-view内容的变化，修改url为/user/3后内容也会变化。
5、嵌套路由
嵌套路由顾名思义就是已经被路由的页面内部还有路由，下面我们就在User页面下做两个嵌套路由的页面Profile.vue，Posts.vue
创建Profile.vue，Posts.vue页面
Profile.vue
<template><div>user profile</div>
</template>Posts.vue
<template><div>user posts</div>
</template>User.vue
<template><div>User {{ $route.params.id }}</div><div><router-view></router-view></div>
</template>/router/index.ts
const routes = [{ path: '/home', component: () => import('../views/Home.vue') },{ path: '/about', component: () => import('../views/About.vue') },//动态路由url:/user/1 id为1{path: '/user/:id', component: () => import('../views/User.vue'),children: [{// 当 /user/:id/profile 匹配成功// UserProfile 将被渲染到 User 的 <router-view> 内部path: 'profile',component: () => import('../views/user/Profile.vue')},{// 当 /user/:id/posts 匹配成功// UserPosts 将被渲染到 User 的 <router-view> 内部path: 'posts',component: () => import('../views/user/Posts.vue')}]}
]运行并查看结果
可以看到输入/user/2/profile User页面显示user profile 输入/user/2/posts显示user posts，说明User页面内部的路由已经生效。
6.编程式导航
Vue可以使用内置对象$router来进行路由切换从而实现页面的变化。
下面我们修改Posts.vue、Profile.vue页面，通过$router实现两个页面的相互跳转。
Posts.vue
<script lang="ts">
export default {methods: {gotoProfile() {console.log("gotoProfile");//使用绝对路径返回到this.$router.push("/user/2/profile");}}
}
</script>
<template><div>user posts</div><button @click="gotoProfile()">goto Profile</button>
</template>Profile.vue
<script lang="ts">
export default {methods: {gotoPosts() {console.log("gotoPosts");//使用相对路径返回//router.replace它的作用类似于 router.push，唯一不同的是，它在导航时不会向 history 添加新记录this.$router.replace("./posts");}}
}
</script>
<template><div>user profile</div><button @click="gotoPosts()">goto Posts</button>
</template>运行并查看结果
点击按钮我们可以看到Posts与Profile页面相互切换。
提示：router.replace它的作用类似于 router.push，唯一不同的是，它在导航时不会向 history 添加新记录。
五、使用element plus开发应用
六、总结
Vue3开发教程（全）相关推荐
- Vue3开发教程（一、学习Vue前需要了解的内容)
前言 本文是笔者学习vue前端技术过程的总结,其中包括vue开发需要了解的相关技术如:node.ES6.TypeScript.vite.ElementUI.以vue作为主线来介绍相关技术,最后通过一个 ...
- Vue3 Typescript + Axios 全栈开发教程：手把手教你写「待办清单」APP
本文完整版:<Vue3 Typescript + Axios 全栈开发教程:手把手教你写「待办清单」APP> Vue3 Typescript + Axios 全栈开发教程 前端 Vue3 ...
- .Net魔法堂：史上最全的ActiveX开发教程——发布篇
一. 前言 接着上一篇<.Net魔法堂:史上最全的ActiveX开发教程--开发篇>,本篇讲述如何发布我们的ActiveX. 二.废话少讲,马上看步骤! 1. 打包 C#开发的Activ ...
- iOS开发教程：Storyboard全解析-第二部分
如果你想了解更多Storyboard的特性,那么你就来对了地方,下面我们就来接着上次的内容详细讲解Storyboard的使用方法. 在上一篇<iOS开发教程:Storyboard全解析-第一部分 ...
- 微信公众帐号开发教程第13篇-图文消息全攻略
引言及内容概要 已经有几位读者抱怨"柳峰只用到文本消息作为示例,从来不提图文消息,都不知道图文消息该如何使用",好吧,我错了,原本以为把基础API封装完.框架搭建好,再给出一个文本 ...
- .Net魔法堂：史上最全的ActiveX开发教程——部署篇
一.前言 接<.Net魔法堂:史上最全的ActiveX开发教程--发布篇>,后我们继续来部署吧! 二. 挽起衣袖来部署 ActiveX的部署其实就是客户端安装ActiveX组件,对未签 ...
- ESP-01S开发环境搭建及新手教程点灯教程全解详细配图（ESP8266-01s）
ESP-01S开发环境搭建及新手教程点灯教程全解相当详细(ESP8266-01s) 一.模组简介 二.开发工具 三.开发软件 四.点亮第一盏灯 五.至此完成了ESP-01S在arduino开发环境下点 ...
- 微信公众帐号开发教程第13篇-图文消息全攻略 -- 转载
引言及内容概要 已经有几位读者抱怨"柳峰只用到文本消息作为示例,从来不提图文消息,都不知道图文消息该如何使用",好吧,我错了,原本以为把基础API封装完.框架搭建好,再给出一个文本 ...
- [037] 微信公众帐号开发教程第13篇-图文消息全攻略
引言及内容概要 已经有几位读者抱怨"柳峰只用到文本消息作为示例,从来不提图文消息,都不知道图文消息该如何使用",好吧,我错了,原本以为把基础API封装完.框架搭建好,再给出一个文本 ...
- Flask全栈开发教程
Flask全栈开发教程 成为使用 Flask.Python.HTML.CSS 和 MongoDB 的全栈 Web 开发人员! 课程英文名:Web Developer Bootcamp with Fla ...
最新文章
- Unbuntu18.04通过apt源方式安装mysql5.7.22
- ATL是如何实现线程安全的引用计数和多线程控制的
- 无限复活服务器,绝地求生无限复活模式怎么玩 无限复活玩法说明介绍
- 3d激光雷达开发（基于参数模型的滤波）
- 微软发布2016年5月安全补丁 提醒及时修复
- [Apio2012]dispatching 左偏树
- 单片机(ISIS 7 Professional)：实现简易十字路口红绿灯代码项目
- EXCEL中所有函数的使用
- python 查找字符第一次出现位置_python 字符串第n次出现的位置 | 学步园
- 戴尔t620服务器怎么进bios设置u盘启动(戴尔进入u盘启动设置)
- iOS输入框搜索节流输入框输入拼音的问题 (防抖)
- 麒麟linux硬盘安装,U盘安装中标麒麟Linux桌面版的方法
- json schema php解析,php的json校验json-schema
- 高级测试开发进阶知识详解
- 小鱼的航程（两种解决方法）
- Mybatis学习 association关联 和 collection集合
- 计算机数据结构英语作文,计算机-数据结构基本英语(4)
- [Android 之美] 那些你不知道的APK 瘦身，让你的APK更小
- 汇编语言实现两个多位十进制数相减实验
- mac下如何运行sh文件