Vue3开发教程（全）

本文是笔者学习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框架，其中包括大量封装好的组件可直接使用，使项目开发更容易。

二、环境搭建

1.安装Node.js

下载对应操作系统的压缩包并解压到本地目录。下载地址
并在此目录中创建文件夹node_cache、node_global。

笔者的目录:D:\software\node-v16.14.0-win-x64

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5aCV6JC95bCP54yqX3p6eQ==,size_20,color_FFFFFF,t_70,g_se,x_16

新增环境变量

NODE_HOME=D:\software\node-v16.14.0-win-x64
NODE_PATH D:\software\node-v16.14.0-win-x64\node_global

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5aCV6JC95bCP54yqX3p6eQ==,size_20,color_FFFFFF,t_70,g_se,x_16

向Path环境变量添加这个两个环境变量

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5aCV6JC95bCP54yqX3p6eQ==,size_18,color_FFFFFF,t_70,g_se,x_16

配置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:

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5aCV6JC95bCP54yqX3p6eQ==,size_20,color_FFFFFF,t_70,g_se,x_16

提示：之后的命令都在终端中执行

3.创建Vue项目

初始化vue项目，项目名称为vue3-hello。

$ npm init vite@latest vue3-hello -- --template vue

使用vscode打开目录D:\vue3-hello

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5aCV6JC95bCP54yqX3p6eQ==,size_20,color_FFFFFF,t_70,g_se,x_16

4.运行一个Vue应用程序

安装vite

//安装vite
npm install vite

提示：安装vite后我们通过VSCode刷新工程目录，发现多了node_modules目录。这个目录就是项目运行依赖的模块，我们看到了vite和vue向模块以被载入，因此对与这个项目我们不要再安装vue了，也说明了vite的安装包依赖的vue。

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5aCV6JC95bCP54yqX3p6eQ==,size_14,color_FFFFFF,t_70,g_se,x_16

运行工程

//运行vite启动工程
npm run dev

通过浏览器访问 http://localhost:3000/ ，看到如下页面说明项目启动成功。

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5aCV6JC95bCP54yqX3p6eQ==,size_20,color_FFFFFF,t_70,g_se,x_16

打包文件

//npm打包文件
npm run build

打包后会在工程目录下新增dist文件加，dist文件加里的文件便是我们将vue应用打包成html、js、图片等静态的内容。通常这些静态文件在http服务器上就可以对外提供页面服务了。

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5aCV6JC95bCP54yqX3p6eQ==,size_12,color_FFFFFF,t_70,g_se,x_16

提示：vscode安装Live server插件就可以启动一个httpserver来运行我们的dist中的内容

扩展设置可以对Live server进行配置

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5aCV6JC95bCP54yqX3p6eQ==,size_20,color_FFFFFF,t_70,g_se,x_16

点击“在settings.json中编辑”则可通过json的方式进行配置

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5aCV6JC95bCP54yqX3p6eQ==,size_20,color_FFFFFF,t_70,g_se,x_16

点击右下角的go Live便可以运行，运行后会看到与之前通过vite运行一样的效果。

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5aCV6JC95bCP54yqX3p6eQ==,size_20,color_FFFFFF,t_70,g_se,x_16

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.vue
    var HelloWorld_vue = {
        props: {
            msg: String
        },
        data() {
            return {
                count: 0
            }
        },
        template: `
                <h1>{{ msg }}</h1>
                <button type="button" @click="count++">count is: {{ count }}</button>
        `
    };

    //对比上一节里的App.vue
    var 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#id
    var 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 router

3、编写第一个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开发应用

六、总结

堕落小猪_zzy

关注

47
点赞
踩
270

收藏

觉得还不错? 一键收藏
打赏
10
评论
Vue3开发教程（全）

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

扫一扫