Vue3实战教程（快速入门）

前言

本教程通过搭建一个简朴项目，帮助读者快速入门Vue3项目实战，把握Vue3、TS、Element Plus、axios等技术栈。
1.搭建脚手架

vue -V查看vue版本，必要在4.5.1版本之后，即可进行以下操作。
1.1 创建项目

（1）利用下令 vue create vue3-elementplus-demo 创建Vue项目。
（2）进入选项配置，选择 Manually select features，进行手动配置

（3）配置项如下

都选择完毕后，回车，项目即可创建完毕，利用VsCode大概按照提示进入和启动项目

1.2 清除多余文件，创建干净项目

（1）删除以下文件

（2）在views目录下创建Index.vue文件（反面处于方便，又将Index.vue修改成了Home.vue），内容如下：

1. <template>
2.   <div>首页</div>
3. </template>
5. <script>
6. export default {
7.   name: 'Index'
8. }
9. </script>
10. <style scoped></style>

复制代码

（3）修改router/index.ts路由文件：

1. import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
2. import Home from '../views/Home.vue'
4. const routes: Array<RouteRecordRaw> = [
5.   {
6.     path: '/',
7.     name: 'Index',
8.     component: () => import('../views/Index.vue')
9.   },
10. ]
12. const router = createRouter({
13.   history: createWebHistory(process.env.BASE_URL),
14.   routes
15. })
17. export default router

复制代码

（4）修改App文件：

1. <template>
2.   <div id="app">
3.     <router-view />
4.   </div>
5. </template>
7. <style>
8. html,
9. body,
10. #app {
11.   width: 100%;
12.   height: 100%;
13. }
14. </style>

复制代码

修改完毕后，查看结果

（5）新建css/resset.css文件（上网搜关键词reset.css就有），并在index.html文件中引入，初始化样式

1. /**
2. * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
3. * http://cssreset.com
4. */
6. html, body, div, span, applet, object, iframe,
7. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
8. a, abbr, acronym, address, big, cite, code,
9. del, dfn, em, img, ins, kbd, q, s, samp,
10. small, strike, strong, sub, sup, tt, var,
11. b, u, i, center,
12. dl, dt, dd, ol, ul, li,
13. fieldset, form, label, legend,
14. table, caption, tbody, tfoot, thead, tr, th, td,
15. article, aside, canvas, details, embed,
16. figure, figcaption, footer, header, hgroup,
17. menu, nav, output, ruby, section, summary,
18. time, mark, audio, video{
19.    margin: 0;
20.    padding: 0;
21.    border: 0;
22.    font-size: 100%;
23.    font: inherit;
24.    font-weight: normal;
25.    vertical-align: baseline;
26. }
27. /* HTML5 display-role reset for older browsers */
28. article, aside, details, figcaption, figure,
29. footer, header, hgroup, menu, nav, section{
30.    display: block;
31. }
32. ol, ul, li{
33.    list-style: none;
34. }
35. blockquote, q{
36.    quotes: none;
37. }
38. blockquote:before, blockquote:after,
39. q:before, q:after{
40.    content: '';
41.    content: none;
42. }
43. table{
44.    border-collapse: collapse;
45.    border-spacing: 0;
46. }
47.   
48. /* custom */
49. a{
50.    color: #7e8c8d;
51.    text-decoration: none;
52.    -webkit-backface-visibility: hidden;
53. }
54. ::-webkit-scrollbar{
55.    width: 5px;
56.    height: 5px;
57. }
58. ::-webkit-scrollbar-track-piece{
59.    background-color: rgba(0, 0, 0, 0.2);
60.    -webkit-border-radius: 6px;
61. }
62. ::-webkit-scrollbar-thumb:vertical{
63.    height: 5px;
64.    background-color: rgba(125, 125, 125, 0.7);
65.    -webkit-border-radius: 6px;
66. }
67. ::-webkit-scrollbar-thumb:horizontal{
68.    width: 5px;
69.    background-color: rgba(125, 125, 125, 0.7);
70.    -webkit-border-radius: 6px;
71. }
72. html, body{
73.    width: 100%;
74.    font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", "微软雅黑", sans-serif;
75. }
76. body{
77.    line-height: 1;
78.    -webkit-text-size-adjust: none;
79.    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
80. }
81. html{
82.    overflow-y: scroll;
83. }
84.   
85. /*清除浮动*/
86. .clearfix:before,
87. .clearfix:after{
88.    content: " ";
89.    display: inline-block;
90.    height: 0;
91.    clear: both;
92.    visibility: hidden;
93. }
94. .clearfix{
95.    *zoom: 1;
96. }
97.   
98. /*隐藏*/
99. .dn{
100.    display: none;
101. }

复制代码

1.3 创建登录页面

创建LoginRegister.vue文件：

1. <template>
2.   <div class="container">
3.     <!-- form表单容器 -->
4.     <div class="form-container">
5.       <div class="signin-signup">
6.         <!-- 登录 -->
7.         <h1>登录</h1>
8.         <!-- 注册 -->
9.         <h1>注册</h1>
10.       </div>
11.     </div>
12.   </div>
13. </template>
15. <script>
16. export default {
17.   name: 'LoginRegister'
18. }
19. </script>
20. <style scoped>
21. .container {
22.   position: relative;
23.   width: 100%;
24.   min-height: 100vh;
25.   background-color: #fff;
26.   overflow: hidden;
27. }
28. .form-container {
29.   position: absolute;
30.   left: 0;
31.   top: 0;
32.   width: 100%;
33.   height: 100%;
34. }
35. .signin-signup {
36.   position: relative;
37.   top: 50%;
38.   left: 75%;
39.   transform: translate(-50%, -50%);
40.   width: 44%;
41.   transition: 1s 0.7s ease-in-out;
42.   display: grid;
43.   grid-template-columns: 1fr;
44.   z-index: 5;
45. }
46. </style>

复制代码

在路由中引入

查看结果：

2.创建404页面（引入sass）

2.1 引入sass

（1）查看当前node版本

（2）引入对应版本的node-sass和sass-load

当前已知 node-sass 与 node 版本对应如下：https://github.com/sass/node-sass

node-sass 和 sass-loader 的常见版本对应关系如下：
node-sasssass-loader4.3.04.1.14.7.2$7.0.3/7.3.16.0.110.0.1 （3）如果引入出现了问题，基本上就是node版本和sass版本不一致导致。此时必要创建一个新项目，将新项目中的package.json和package-lock.json复制到当前项目中，然后重新 npm i 即可。
2.2 创建404页面

（1）assets下创建img文件夹，加入404.gif

（2）创建404.vue

1. <template>
2.   <div class="not-found">
3.     <img src="../assets/img/404.gif" alt="" />
4.   </div>
5. </template>
7. <script>
8. export default {
9.   name: '404'
10. }
11. </script>
12. <style lang="scss" scoped>
13. .not-found {
14.   width: 100%;
15.   height: 100%;
16.   overflow: hidden;
17.   img {
18.     width: 100%;
19.     height: 100%;
20.   }
21. }
22. </style>

复制代码

（3）router/index.ts中通过正则表达式匹配匹配失败的路由为404页面

3.构建登录注册页面（引入element-plus）

3.1 实现布局左右切换动画

因为本篇文章重要讲解的是Vue3和element-plus的用法，css部分就省略阐明，有爱好的同砚可以自行研究。

1. <template>
2.   <div class="container" :class="{ 'sign-up-mode': signUpMode }">
3.     <!-- form表单容器 -->
4.     <div class="form-container">
5.       <div class="signin-signup">
6.         <!-- 登录 -->
7.         <h1>登录</h1>
8.         <!-- 注册 -->
9.         <h1>注册</h1>
10.       </div>
11.     </div>
12.     <!-- 左右切换动画 -->
13.     <div class="panels-container">
14.       <div class="panel left-panel">
15.         <div class="content">
16.           <h3>Row,row,row your boat</h3>
17.           <p>Gentlely down the stream</p>
18.           <button @click="signUpMode = !signUpMode" class="btn transparent">
19.             注册
20.           </button>
21.         </div>
22.         <!-- <img src="@/assets" alt=""> -->
23.       </div>
24.       <div class="panel right-panel">
25.         <div class="content">
26.           <h3>Merrily,merrily,merrily,merrily,</h3>
27.           <p>Life is but a dream</p>
28.           <button @click="signUpMode = !signUpMode" class="btn transparent">
29.             登录
30.           </button>
31.         </div>
32.         <!-- <img src="@/assets" alt=""> -->
33.       </div>
34.     </div>
35.   </div>
36. </template>
38. <script>
39. import { ref } from 'vue'
40. export default {
41.   name: 'LoginRegister',
42.   components: {},
43.   // Vue3语法糖
44.   // Vue2是通过data和methods传递数据和方法
45.   // Vue3将data和methods直接耦合在了一起
46.   setup() {
47.     // 登录/注册模式
48.     const signUpMode = ref(false)
50.     return { signUpMode }
51.   }
52. }
53. </script>
54. <style scoped>
55. .container {
56.   position: relative;
57.   width: 100%;
58.   min-height: 100vh;
59.   background-color: #fff;
60.   overflow: hidden;
61. }
62. .form-container {
63.   position: absolute;
64.   left: 0;
65.   top: 0;
66.   width: 100%;
67.   height: 100%;
68. }
69. .signin-signup {
70.   position: relative;
71.   top: 50%;
72.   left: 75%;
73.   transform: translate(-50%, -50%);
74.   width: 44%;
75.   transition: 1s 0.7s ease-in-out;
76.   display: grid;
77.   grid-template-columns: 1fr;
78.   z-index: 5;
79. }
81. /* 左右切换动画 */
82. .social-text {
83.   padding: 0.7rem 0;
84.   font-size: 1rem;
85. }
87. .social-media {
88.   display: flex;
89.   justify-content: center;
90. }
92. .social-icon {
93.   height: 46px;
94.   width: 46px;
95.   display: flex;
96.   justify-content: center;
97.   align-items: center;
98.   margin: 0 0.45rem;
99.   color: #333;
100.   border-radius: 50%;
101.   border: 1px solid #333;
102.   text-decoration: none;
103.   font-size: 1.1rem;
104.   transition: 0.3s;
105. }
107. .social-icon:hover {
108.   color: #4481eb;
109.   border-color: #4481eb;
110. }
112. .btn {
113.   width: 150px;
114.   background-color: #5995fd;
115.   border: none;
116.   outline: none;
117.   height: 49px;
118.   border-radius: 49px;
119.   color: #fff;
120.   text-transform: uppercase;
121.   font-weight: 600;
122.   margin: 10px 0;
123.   cursor: pointer;
124.   transition: 0.5s;
125. }
127. .btn:hover {
128.   background-color: #4d84e2;
129. }
130. .panels-container {
131.   position: absolute;
132.   height: 100%;
133.   width: 100%;
134.   top: 0;
135.   left: 0;
136.   display: grid;
137.   grid-template-columns: repeat(2, 1fr);
138. }
140. .container:before {
141.   content: '';
142.   position: absolute;
143.   height: 2000px;
144.   width: 2000px;
145.   top: -10%;
146.   right: 48%;
147.   transform: translateY(-50%);
148.   background-image: linear-gradient(-45deg, #4481eb 0%, #04befe 100%);
149.   transition: 1.8s ease-in-out;
150.   border-radius: 50%;
151.   z-index: 6;
152. }
154. .image {
155.   width: 100%;
156.   transition: transform 1.1s ease-in-out;
157.   transition-delay: 0.4s;
158. }
160. .panel {
161.   display: flex;
162.   flex-direction: column;
163.   align-items: flex-end;
164.   justify-content: space-around;
165.   text-align: center;
166.   z-index: 6;
167. }
169. .left-panel {
170.   pointer-events: all;
171.   padding: 3rem 17% 2rem 12%;
172. }
174. .right-panel {
175.   pointer-events: none;
176.   padding: 3rem 12% 2rem 17%;
177. }
179. .panel .content {
180.   color: #fff;
181.   transition: transform 0.9s ease-in-out;
182.   transition-delay: 0.6s;
183. }
185. .panel h3 {
186.   font-weight: 600;
187.   line-height: 1;
188.   font-size: 1.5rem;
189. }
191. .panel p {
192.   font-size: 0.95rem;
193.   padding: 0.7rem 0;
194. }
196. .btn.transparent {
197.   margin: 0;
198.   background: none;
199.   border: 2px solid #fff;
200.   width: 130px;
201.   height: 41px;
202.   font-weight: 600;
203.   font-size: 0.8rem;
204. }
206. .right-panel .image,
207. .right-panel .content {
208.   transform: translateX(800px);
209. }
211. /* ANIMATION */
213. .container.sign-up-mode:before {
214.   transform: translate(100%, -50%);
215.   right: 52%;
216. }
218. .container.sign-up-mode .left-panel .image,
219. .container.sign-up-mode .left-panel .content {
220.   transform: translateX(-800px);
221. }
223. .container.sign-up-mode .signin-signup {
224.   left: 25%;
225. }
227. .container.sign-up-mode form.sign-up-form {
228.   opacity: 1;
229.   z-index: 2;
230. }
232. .container.sign-up-mode form.sign-in-form {
233.   opacity: 0;
234.   z-index: 1;
235. }
237. .container.sign-up-mode .right-panel .image,
238. .container.sign-up-mode .right-panel .content {
239.   transform: translateX(0%);
240. }
242. .container.sign-up-mode .left-panel {
243.   pointer-events: none;
244. }
246. .container.sign-up-mode .right-panel {
247.   pointer-events: all;
248. }
250. @media (max-width: 870px) {
251.   .container {
252.     min-height: 800px;
253.     height: 100vh;
254.   }
255.   .signin-signup {
256.     width: 100%;
257.     top: 95%;
258.     transform: translate(-50%, -100%);
259.     transition: 1s 0.8s ease-in-out;
260.   }
262.   .signin-signup,
263.   .container.sign-up-mode .signin-signup {
264.     left: 50%;
265.   }
267.   .panels-container {
268.     grid-template-columns: 1fr;
269.     grid-template-rows: 1fr 2fr 1fr;
270.   }
272.   .panel {
273.     flex-direction: row;
274.     justify-content: space-around;
275.     align-items: center;
276.     padding: 2.5rem 8%;
277.     grid-column: 1 / 2;
278.   }
280.   .right-panel {
281.     grid-row: 3 / 4;
282.   }
284.   .left-panel {
285.     grid-row: 1 / 2;
286.   }
288.   .image {
289.     width: 200px;
290.     transition: transform 0.9s ease-in-out;
291.     transition-delay: 0.6s;
292.   }
294.   .panel .content {
295.     padding-right: 15%;
296.     transition: transform 0.9s ease-in-out;
297.     transition-delay: 0.8s;
298.   }
300.   .panel h3 {
301.     font-size: 1.2rem;
302.   }
304.   .panel p {
305.     font-size: 0.7rem;
306.     padding: 0.5rem 0;
307.   }
309.   .btn.transparent {
310.     width: 110px;
311.     height: 35px;
312.     font-size: 0.7rem;
313.   }
315.   .container:before {
316.     width: 1500px;
317.     height: 1500px;
318.     transform: translateX(-50%);
319.     left: 30%;
320.     bottom: 68%;
321.     right: initial;
322.     top: initial;
323.     transition: 2s ease-in-out;
324.   }
326.   .container.sign-up-mode:before {
327.     transform: translate(-50%, 100%);
328.     bottom: 32%;
329.     right: initial;
330.   }
332.   .container.sign-up-mode .left-panel .image,
333.   .container.sign-up-mode .left-panel .content {
334.     transform: translateY(-300px);
335.   }
337.   .container.sign-up-mode .right-panel .image,
338.   .container.sign-up-mode .right-panel .content {
339.     transform: translateY(0px);
340.   }
342.   .right-panel .image,
343.   .right-panel .content {
344.     transform: translateY(300px);
345.   }
347.   .container.sign-up-mode .signin-signup {
348.     top: 5%;
349.     transform: translate(-50%, 0);
350.   }
351. }
353. @media (max-width: 570px) {
354.   form {
355.     padding: 0 1.5rem;
356.   }
358.   .image {
359.     display: none;
360.   }
361.   .panel .content {
362.     padding: 0.5rem 1rem;
363.   }
364.   .container {
365.     padding: 1.5rem;
366.   }
368.   .container:before {
369.     bottom: 72%;
370.     left: 50%;
371.   }
373.   .container.sign-up-mode:before {
374.     bottom: 28%;
375.     left: 50%;
376.   }
377. }
379. /* 控制login & register显示 */
380. form {
381.   padding: 0rem 5rem;
382.   transition: all 0.2s 0.7s;
383.   overflow: hidden;
384. }
386. form.sign-in-form {
387.   z-index: 2;
388. }
390. form.sign-up-form {
391.   opacity: 0;
392.   z-index: 1;
393. }
395. /* register */
396. .loginForm,
397. .registerForm {
398.   margin-top: 20px;
399.   background-color: #fff;
400.   padding: 20px 40px 20px 20px;
401.   border-radius: 5px;
402.   box-shadow: 0px 5px 10px #cccc;
403. }
405. .submit-btn {
406.   width: 100%;
407. }
408. .tiparea {
409.   text-align: right;
410.   font-size: 12px;
411.   color: #333;
412.   width: 100%;
413. }
414. .tiparea a {
415.   color: #409eff;
416. }
417. </style>

复制代码

3.2 引入element-plus

（1）下载element-plus包：

1. npm i element-plus

复制代码

（2）在main.ts中引入

3.3 利用element-plus表单组件

（1）setup中加入登录表单loginUser

1. setup() {
2.     // 登录/注册模式
3.     const signUpMode = ref(false)
4.     // 登录表单
5.     const loginUser = reactive({
6.       email: '',
7.       password: ''
8.     })
9.     return { signUpMode, loginUser }
10.   }

复制代码

（2）利用表单组件

1. <!-- 登录 -->
2. <el-form
3.   :model="loginUser"
4.   label-width="100px"
5.   class="login-form sign-in-form"
6. >
7.   <el-form-item label="邮箱" prop="email">
8.     <el-input v-model="loginUser.email" placeholder="Enter Email..." />
9.   </el-form-item>
10.   <el-form-item label="密码" prop="password">
11.     <el-input
12.       v-model="loginUser.password"
13.       type="password"
14.       placeholder="Enter Password..."
15.     />
16.   </el-form-item>
17.   <el-form-item>
18.     <el-button type="primary" class="submit-btn">提交</el-button>
19.   </el-form-item>
20.   <!-- 找回密码 -->
21.   <el-form-item>
22.     <p class="tiparea">忘记密码<a>立即找回</a></p>
23.   </el-form-item>
24. </el-form>

复制代码

3.4 表单验证

（1）表单验证

关键代码：

1. // 校验规则
2. const rules = reactive({
3.   email: [
4.     {
5.       required: true,
6.       type: 'email',
7.       message: 'email格式错误',
8.       trigger: 'blur'
9.     }
10.   ],
11.   password: [
12.     { required: true, message: '密码不得为空', trigger: 'blur' },
13.     { min: 6, max: 30, message: '密码长度必须在6到30之间', trigger: 'blur' }
14.   ]
15. })

复制代码

（2）点击提交触发表单验证

关键代码：

1. <template>
2.   <div class="container" :class="{ 'sign-up-mode': signUpMode }">
3.     <!-- form表单容器 -->
4.     <div class="form-container">
5.       <div class="signin-signup">
6.         <!-- 登录 -->
7.         <el-form
8.           :model="loginUser"
9.           :rules="rules"
10.           ref="loginForm"
11.           label-width="100px"
12.           class="login-form sign-in-form"
13.         >
14.           <el-form-item label="邮箱" prop="email">
15.             <el-input v-model="loginUser.email" placeholder="Enter Email..." />
16.           </el-form-item>
17.           <el-form-item label="密码" prop="password">
18.             <el-input
19.               v-model="loginUser.password"
20.               type="password"
21.               placeholder="Enter Password..."
22.             />
23.           </el-form-item>
24.           <el-form-item>
25.             <el-button
26.               @click="handleLogin('loginForm')"
27.               type="primary"
28.               class="submit-btn"
29.               >提交</el-button
30.             >
31.           </el-form-item>
32.           <!-- 找回密码 -->
33.           <el-form-item>
34.             <p class="tiparea">忘记密码<a>立即找回</a></p>
35.           </el-form-item>
36.         </el-form>
37.         <!-- 注册 -->
38.         <!-- <h1>注册</h1> -->
39.       </div>
40.     </div>
41.     <!-- 左右切换动画 -->
42.     <div class="panels-container">
43.       <div class="panel left-panel">
44.         <div class="content">
45.           <h3>Row,row,row your boat</h3>
46.           <p>Gentlely down the stream</p>
47.           <button @click="signUpMode = !signUpMode" class="btn transparent">
48.             注册
49.           </button>
50.         </div>
51.         <!-- <img src="@/assets" alt=""> -->
52.       </div>
53.       <div class="panel right-panel">
54.         <div class="content">
55.           <h3>Merrily,merrily,merrily,merrily,</h3>
56.           <p>Life is but a dream</p>
57.           <button @click="signUpMode = !signUpMode" class="btn transparent">
58.             登录
59.           </button>
60.         </div>
61.         <!-- <img src="@/assets" alt=""> -->
62.       </div>
63.     </div>
64.   </div>
65. </template>
67. <script>
68. import { ref, reactive, getCurrentInstance } from 'vue'
69. export default {
70.   name: 'LoginRegister',
71.   components: {},
72.   // Vue3语法糖
73.   // Vue2是通过data和methods传递数据和方法
74.   // Vue3将data和methods直接耦合在了一起
75.   setup() {
76.     // 通过解构getCurrentInstance，获取this，这里的this就是ctx
77.     const { ctx } = getCurrentInstance()
78.     // 登录/注册模式
79.     const signUpMode = ref(false)
80.     // 登录表单
81.     const loginUser = reactive({
82.       email: '',
83.       password: ''
84.     })
85.     // 校验规则
86.     const rules = reactive({
87.       email: [
88.         {
89.           required: true,
90.           type: 'email',
91.           message: 'email格式错误',
92.           trigger: 'blur'
93.         }
94.       ],
95.       password: [
96.         { required: true, message: '密码不得为空', trigger: 'blur' },
97.         { min: 6, max: 30, message: '密码长度必须在6到30之间', trigger: 'blur' }
98.       ]
99.     })
100.     // 触发登录方法
101.     const handleLogin = (formName) => {
102.       console.log(ctx)
103.       ctx.$refs[formName].validate((valid) => {
104.         if (valid) {
105.           console.log('submit!')
106.         } else {
107.           console.log('error submit!')
108.           return false
109.         }
110.       })
111.     }
112.     return { signUpMode, loginUser, rules, handleLogin }
113.   }
114. }
115. </script>

复制代码

点击提交，完成验证：

4.范例匹配和代码抽离

4.1 代码抽离

创建utils文件夹和loginValidators.ts文件，将LoginRegister.vue中的loginUser和rules剪切抽离到该文件中，LoginRegister.vue再通过import导入。测试正常运行。

loginValidators.ts：

1. import { ref, reactive  } from 'vue'
3. // 登录表单
4. export const loginUser = reactive({
5.   email: '',
6.   password: ''
7. })
9. // 校验规则
10. export const rules = reactive({
11.   email: [
12.     {
13.       required: true,
14.       type: 'email',
15.       message: 'email格式错误',
16.       trigger: 'blur'
17.     }
18.   ],
19.   password: [
20.     { required: true, message: '密码不得为空', trigger: 'blur' },
21.     { min: 6, max: 30, message: '密码长度必须在6到30之间', trigger: 'blur' }
22.   ]
23. })

复制代码

4.2 范例匹配

4.2.1 ts文件范例匹配

将鼠标悬浮在 loginUser 的 reactive 上，可以看到对应的范例提示，写入interface User 并复制提示。rules重复操作。

1. import { ref, reactive  } from 'vue'
3. interface User{
4.   email: string;
5.   password: string;
6. }
8. // 登录表单
9. export const loginUser = reactive<User>({
10.   email: '',
11.   password: ''
12. })
14. interface Rules{
15.   email: {
16.       required: boolean;
17.       type: string;
18.       message: string;
19.       trigger: string;
20.   }[];
21.   password: ({
22.       required: boolean;
23.       message: string;
24.       trigger: string;
25.       min?: undefined;
26.       max?: undefined;
27.   } | {
28.       min: number;
29.       max: number;
30.       message: string;
31.       trigger: string;
32.       required?: undefined;
33.   })[];
34. }
36. // 校验规则
37. export const rules = reactive<Rules>({
38.   email: [
39.     {
40.       required: true,
41.       type: 'email',
42.       message: 'email格式错误',
43.       trigger: 'blur'
44.     }
45.   ],
46.   password: [
47.     { required: true, message: '密码不得为空', trigger: 'blur' },
48.     { min: 6, max: 30, message: '密码长度必须在6到30之间', trigger: 'blur' }
49.   ]
50. })

复制代码

此时如果将字段修改为不符合规范的范例，则会有报错提示

这对于初次利用ts的同砚可能不太适应，认为完全没有必要。但是这其实对于大型项目标维护来说，相对比js友好许多。
4.2.2 vue文件中的ts范例匹配

（1）在script标签中加入lang="ts"标识，发现参数都没有范例匹配。

（2）范例匹配
1、对于any范例的变量——ctx，利用// @ts-ignore进行范例忽略
2、对于其他范例的变量，在变量后加入:范例即可，比如formName:string和valid:boolean

5.抽离登录组件

（1）创建组件LoginForm.vue，将LoginRegister.vue中的表单内容（包括组件、数据、方法和样式，顺便对样式做了点优化）复制到该文件中。

LoginForm：

1. <template>
2.   <!-- 登录 -->
3.   <el-form
4.     :model="loginUser"
5.     :rules="rules"
6.     ref="loginForm"
7.     label-width="100px"
8.     class="login-form sign-in-form"
9.   >
10.     <el-form-item label="邮箱" prop="email">
11.       <el-input v-model="loginUser.email" placeholder="Enter Email..." />
12.     </el-form-item>
13.     <el-form-item label="密码" prop="password">
14.       <el-input
15.         v-model="loginUser.password"
16.         type="password"
17.         placeholder="Enter Password..."
18.       />
19.     </el-form-item>
20.     <el-form-item>
21.       <el-button
22.         @click="handleLogin('loginForm')"
23.         type="primary"
24.         class="submit-btn"
25.         >提交</el-button
26.       >
27.     </el-form-item>
28.     <!-- 找回密码 -->
29.     <el-form-item>
30.       <p class="tiparea">忘记密码<a>立即找回</a></p>
31.     </el-form-item>
32.   </el-form>
33. </template>
35. <script lang="ts">
36. import { getCurrentInstance } from 'vue'
37. export default {
38.   name: 'LoginForm',
39.   props: {
40.     loginUser: {
41.       type: Object,
42.       required: true
43.     },
44.     rules: {
45.       type: Object,
46.       required: true
47.     }
48.   },
49.   setup() {
50.     // 通过解构getCurrentInstance，获取this，这里的this就是ctx
51.     // @ts-ignore
52.     const { ctx } = getCurrentInstance()
53.     // 触发登录方法
54.     const handleLogin = (formName: string) => {
55.       console.log(ctx)
56.       ctx.$refs[formName].validate((valid: boolean) => {
57.         if (valid) {
58.           console.log('submit!')
59.         } else {
60.           console.log('error submit!')
61.           return false
62.         }
63.       })
64.     }
65.     return { handleLogin }
66.   }
67. }
68. </script>
69. <style scoped>
70. /* register */
71. .login-form,
72. .register-form {
73.   background-color: #fff;
74.   padding: 50px 80px 20px 20px;
75.   border-radius: 5px;
76.   box-shadow: 0px 5px 10px #cccc;
77. }
79. .submit-btn {
80.   width: 100%;
81. }
82. .tiparea {
83.   text-align: right;
84.   font-size: 12px;
85.   color: #333;
86.   width: 100%;
87. }
88. .tiparea a {
89.   color: #409eff;
90. }
91. </style>

复制代码

6. 实现注册表单

其实完全可以仿照登录组件的写法，先在LoginRegister.vue中写出form组件，填充form数据，实现表单验证，末了再抽离出来。但是如果已经熟练的话，发起可以直接分为3个部分写完（ts——对应的数据和验证规则，component——组件，vue——引入到父组件中）
6.1 创建注册表单ts——存放注册表单及其验证规则

创建registerValidator.ts文件，用于存放注册表单及其验证规则。
可以先复制之前的loginValidator.ts文件的内容，然后进行修改（注意确认暗码password2的验证规则写法）。

registerValidator.ts：

1. import { reactive  } from 'vue'
3. interface RegisterUser{
4.   name:string;
5.   email: string;
6.   password: string;
7.   password2: string;
8.   role:string
9. }
11. // 登录表单
12. export const registerUser = reactive<RegisterUser>({
13.   name:'',
14.   email: '',
15.   password: '',
16.   password2: '',
17.   role:''
18. })
20. interface RegisterRules{
21.   name: {
22.     required: boolean;
23.     message: string;
24.     trigger: string;
25. }[];
26.   email: {
27.       required: boolean;
28.       type: string;
29.       message: string;
30.       trigger: string;
31.   }[];
32.   password: ({
33.       required: boolean;
34.       message: string;
35.       trigger: string;
36.   } | {
37.       min: number;
38.       max: number;
39.       message: string;
40.       trigger: string;
41.   })[];
42.   password2: ({
43.       required: boolean;
44.       message: string;
45.       trigger: string;
46.   } | {
47.       min: number;
48.       max: number;
49.       message: string;
50.       trigger: string;
51.   } | {
52.     validator:(rule: RegisterRules, value: string, callback: any)=>any;
53.     trigger:string
54.   })[];
55.   role: {
56.     required: boolean;
57.     message: string;
58.     trigger: string;
59. }[];
60. }
62. const validatePass2 = (rule: RegisterRules, value: string, callback: any) => {
63.   if (value === '') {
64.     callback(new Error('请再次输入密码'))
65.   } else if (value !== registerUser.password) {
66.     callback(new Error("两次输入的密码不一致!"))
67.   } else {
68.     callback()
69.   }
70. }
72. // 校验规则
73. export const registerRules = reactive<RegisterRules>({
74.   name: [
75.     {
76.       required: true,
77.       message: '用户名不得为空',
78.       trigger: 'blur'
79.     }
80.   ],
81.   email: [
82.     {
83.       required: true,
84.       type: 'email',
85.       message: 'email格式错误',
86.       trigger: 'blur'
87.     }
88.   ],
89.   password: [
90.     { required: true, message: '密码不得为空', trigger: 'blur' },
91.     { min: 6, max: 30, message: '密码长度必须在6到30之间', trigger: 'blur' }
92.   ],
93.   password2: [
94.     { required: true, message: '确认密码不得为空', trigger: 'blur' },
95.     { min: 6, max: 30, message: '密码长度必须在6到30之间', trigger: 'blur' },
96.     { validator: validatePass2, trigger: 'blur' }
97.   ],
98.   role: [
99.     {
100.       required: true,
101.       message: '角色不得为空',
102.       trigger: 'blur'
103.     }
104.   ],
105. })

复制代码

完成后将 registerUser 和 registerRules 引入到LoginRegister.vue中备用。

6.2 创建注册表单组件

创建注册表单组件RegisterForm.vue，模拟大概直接复制LoginForm.vue组件，稍作修改（包括样式、数据和方法）

1. <template>
2.   <!-- 登录 -->
3.   <el-form
4.     :model="registerUser"
5.     :rules="registerRules"
6.     ref="registerForm"
7.     label-width="100px"
8.     class="register-form sign-up-form"
9.   >
10.     <el-form-item label="用户名" prop="name">
11.       <el-input v-model="registerUser.name" placeholder="Enter Name..." />
12.     </el-form-item>
13.     <el-form-item label="邮箱" prop="email">
14.       <el-input v-model="registerUser.email" placeholder="Enter Email..." />
15.     </el-form-item>
16.     <el-form-item label="密码" prop="password">
17.       <el-input
18.         v-model="registerUser.password"
19.         type="password"
20.         placeholder="Enter Password..."
21.       />
22.     </el-form-item>
23.     <el-form-item label="确认密码" prop="password2">
24.       <el-input
25.         v-model="registerUser.password2"
26.         type="password"
27.         placeholder="Enter Password again..."
28.       />
29.     </el-form-item>
30.     <el-form-item label="角色" prop="role">
31.       <el-select v-model="registerUser.role">
32.         <el-option label="管理员" value="admin"></el-option>
33.         <el-option label="用户" value="user"></el-option>
34.         <el-option label="游客" value="visitor"></el-option>
35.       </el-select>
36.     </el-form-item>
37.     <el-form-item>
38.       <el-button
39.         @click="handleRegister('registerForm')"
40.         type="primary"
41.         class="submit-btn"
42.         >提交</el-button
43.       >
44.     </el-form-item>
45.   </el-form>
46. </template>
48. <script lang="ts">
49. import { getCurrentInstance } from 'vue'
50. export default {
51.   name: 'registerForm',
52.   props: {
53.     registerUser: {
54.       type: Object,
55.       required: true
56.     },
57.     registerRules: {
58.       type: Object,
59.       required: true
60.     }
61.   },
62.   setup() {
63.     // 通过解构getCurrentInstance，获取this，这里的this就是ctx
64.     // @ts-ignore
65.     const { ctx } = getCurrentInstance()
66.     // 触发登录方法
67.     const handleRegister = (formName: string) => {
68.       console.log(ctx)
69.       ctx.$refs[formName].validate((valid: boolean) => {
70.         if (valid) {
71.           console.log('submit!')
72.         } else {
73.           console.log('error submit!')
74.           return false
75.         }
76.       })
77.     }
78.     return { handleRegister }
79.   }
80. }
81. </script>
82. <style scoped>
83. /* register */
84. .login-form,
85. .register-form {
86.   background-color: #fff;
87.   padding: 50px 80px 20px 20px;
88.   border-radius: 5px;
89.   box-shadow: 0px 5px 10px #cccc;
90. }
92. .submit-btn {
93.   width: 100%;
94. }
95. .tiparea {
96.   text-align: right;
97.   font-size: 12px;
98.   color: #333;
99.   width: 100%;
100. }
101. .tiparea a {
102.   color: #409eff;
103. }
104. </style>

复制代码

6.3 在LoginRegister.vue中引入利用

末了在LoginRegister.vue中引入利用即可

7. 封装axios

7.1 下载axios

（1）利用下令npm i axios下载axios

7.2 封装axios

创建utils/http.ts文件，用于封装axios哀求（为了避免紊乱，以是取名http.ts，不过叫做axios也无不可）。

http.ts：

1. import axios,{AxiosRequestConfig,AxiosResponse} from 'axios'
2. import { ElLoading } from 'element-plus'
3. import { ElMessage } from 'element-plus'
5. let loading:any;
6. const startLoading = () =>{
7.   interface Options{
8.     lock: boolean;
9.     text: string;
10.     background: string;
11. }
12.   const options:Options = {
13.     lock: true,
14.     text: 'Loading',
15.     background: 'rgba(0, 0, 0, 0.7)'
16.   }
17.   loading = ElLoading.service(options)
18. }
19. const endLoading = ()=>{
20.   loading.close()
21. }
24. // 请求拦截
25. axios.interceptors.request.use((config:AxiosRequestConfig<any>)=>{
26.   // 开始Loading
27.   startLoading()
28.   return config
29. })
31. // 响应拦截
32. axios.interceptors.response.use((res:AxiosResponse<any, any>)=>{
33.   // 结束Loading
34.   endLoading()
35.   // console.log('成功响应拦截',res)
36.   // 如果请求成功直接返回响应数据
37.   if(res.status === 200){
38.     return res.data
39.   }
40. },error=>{
41.   // 结束Loading
42.   endLoading()
43.   // console.log('失败响应拦截',error)
44.   const { response: res } = error
45.   const msg = typeof res.data === 'string' ? res.data: res.data.error || '请求失败，请稍后重试'
46.   ElMessage.error(msg)
47.   // 错误提醒
48.   return Promise.reject(error)
49. })
51. export default axios

复制代码

7.3 办理跨域问题（配置vue.config.js，设置代理）

创建vue.config.js文件，配置如下：

1. module.exports = {
2.   devServer: {
3.     open: true,
4.     host: 'localhost',
5.     port: 8080,
6.     https: false,
7.     hotOnly: false,
8.     // 设置跨域
9.     proxy: {
10.       '/api': {
11.         target: 'http://imissu.herokuapp.com',
12.         ws: true,
13.         changeOrigin: true,
14.         pathRewrite: {
15.           '^api': ''
16.         }
17.       }
18.     },
19.     before: (app) => {}
20.   }
21. }

复制代码

7.4 利用axios发起哀求

API地址：http://imissu.herokuapp.com/
7.4.1 创建api文件夹，规范利用api（推荐）

（1）创建api/loginRegister.ts，引入axios，规范export注册接口

1. import axios from '@/utils/http'
3. // 注册接口
4. export function register(params: any) {
5.   return axios({
6.     url: '/api/v1/auth/register',
7.     method: 'post',
8.     headers: {
9.       'Content-Type': 'application/json;charset=UTF-8'
10.     },
11.     data: params
12.   })
13. }

复制代码

（2）在注册组件中利用

1. <template>
2.   <!-- 登录 -->
3.   <el-form
4.     :model="registerUser"
5.     :rules="registerRules"
6.     ref="registerForm"
7.     label-width="100px"
8.     class="register-form sign-up-form"
9.   >
10.     <el-form-item label="用户名" prop="name">
11.       <el-input v-model="registerUser.name" placeholder="Enter Name..." />
12.     </el-form-item>
13.     <el-form-item label="邮箱" prop="email">
14.       <el-input v-model="registerUser.email" placeholder="Enter Email..." />
15.     </el-form-item>
16.     <el-form-item label="密码" prop="password">
17.       <el-input
18.         v-model="registerUser.password"
19.         type="password"
20.         placeholder="Enter Password..."
21.       />
22.     </el-form-item>
23.     <el-form-item label="确认密码" prop="password2">
24.       <el-input
25.         v-model="registerUser.password2"
26.         type="password"
27.         placeholder="Enter Password again..."
28.       />
29.     </el-form-item>
30.     <el-form-item label="角色" prop="role">
31.       <el-select v-model="registerUser.role">
32.         <el-option label="管理员" value="admin"></el-option>
33.         <el-option label="用户" value="user"></el-option>
34.         <el-option label="游客" value="visitor"></el-option>
35.       </el-select>
36.     </el-form-item>
37.     <el-form-item>
38.       <el-button
39.         @click="handleRegister('registerForm')"
40.         type="primary"
41.         class="submit-btn"
42.         >提交</el-button
43.       >
44.     </el-form-item>
45.   </el-form>
46. </template>
48. <script lang="ts">
49. import { getCurrentInstance } from 'vue'
50. import { useRouter } from 'vue-router'
51. import { register } from '@/api/loginRegister'
52. // import { ElMessage } from 'element-plus'
53. export default {
54.   name: 'registerForm',
55.   props: {
56.     registerUser: {
57.       type: Object,
58.       required: true
59.     },
60.     registerRules: {
61.       type: Object,
62.       required: true
63.     }
64.   },
65.   setup(props: any) {
66.     // 通过解构getCurrentInstance，获取this，这里的this就是ctx
67.     // @ts-ignore
68.     const { ctx, proxy } = getCurrentInstance()
69.     const router = useRouter()
70.     // 触发登录方法
71.     const handleRegister = (formName: string) => {
72.       console.log(ctx)
73.       ctx.$refs[formName].validate(async (valid: boolean) => {
74.         if (valid) {
75.           // const res = await proxy.$http({
76.           //   url: '/api/v1/auth/register',
77.           //   method: 'post',
78.           //   headers: {
79.           //     'Content-Type': 'application/json;charset=UTF-8'
80.           //   },
81.           //   data: props.registerUser
82.           // })
83.           const res = await register(props.registerUser)
84.           proxy.$message.success(res.data)
85.           router.push('/')
86.         } else {
87.           return false
88.         }
89.       })
90.     }
91.     return { handleRegister }
92.   }
93. }
94. </script>
95. <style scoped>
96. /* register */
97. .login-form,
98. .register-form {
99.   background-color: #fff;
100.   padding: 50px 80px 20px 20px;
101.   border-radius: 5px;
102.   box-shadow: 0px 5px 10px #cccc;
103. }
105. .submit-btn {
106.   width: 100%;
107. }
108. .tiparea {
109.   text-align: right;
110.   font-size: 12px;
111.   color: #333;
112.   width: 100%;
113. }
114. .tiparea a {
115.   color: #409eff;
116. }
117. </style>

复制代码

登录功能模拟注册功能即可。
7.4.2 全局注册axios（不推荐，也没必要）

（1）在main.ts中全局挂载axios

1. import axios from '@/utils/http'
2. app.config.globalProperties.$http = axios

复制代码

（2）在注册组件中利用，关键代码：

1. // @ts-ignore
2. const { ctx, proxy } = getCurrentInstance()
4. const res = await proxy.$http({
5.   url: '/api/v1/auth/register',
6.   method: 'post',
7.   headers: {
8.     'Content-Type': 'application/json;charset=UTF-8'
9.   },
10.   data: props.registerUser
11. })

复制代码

（3）不推荐的缘故原由是，随着版本的更替，貌似axios全局挂载的位置也发生了变革，之前是在ctx，之后的版本又换成了proxy；另外一个缘故原由是，这种方式不便于一个接口多处利用，复用性较差。
8.总结

Vue3 和 Vue2 的几个显着的区别：
（1）Vue2利用的选项式API，Vue3利用的是组合式API。前者随着项目页面体积的增大，对于代码的管理会给利用者带来更大的心智负担；后者组合式的写法，将data和methods等组合在一起，更容易理解和利用。不过对于初学者而言，可能会有些不太适应。
（2）Vue2利用的js构建的源码和利用方式，Vue3利用ts构建的源码，利用方式也支持ts，对于大型项目而言，更加友好，不过对于小型项目而言，往往利用者无法一下子看出ts对于强范例支持带来的好处，相反会觉得贫苦和没有必要。
（3）由于该项目是为了扼要阐明Vue3和Vue2在页面中的区别，方便急于利用Vue3的同砚构建项目和页面，以是没有将Vue3更多的特性展示出来。在下一篇文章中，将会通过一个更加完整的项目，对Vue3的更多其他特性以及和Vue2的区别进行深入的解析和阐明，敬请期待。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。