Vue3实战教程（快速入门）

Posted Sheldon一蓑烟雨任平生

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue3实战教程（快速入门）相关的知识，希望对你有一定的参考价值。

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），内容如下：

<template>
  <div>首页</div>
</template>

<script>
export default 
  name: 'Index'

</script>
<style scoped></style>

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

import  createRouter, createWebHistory, RouteRecordRaw  from 'vue-router'
import Home from '../views/Home.vue'

const routes: Array<RouteRecordRaw> = [
  
    path: '/',
    name: 'Index',
    component: () => import('../views/Index.vue')
  ,
]

const router = createRouter(
  history: createWebHistory(process.env.BASE_URL),
  routes
)

export default router

（4）修改App文件：

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<style>
html,
body,
#app 
  width: 100%;
  height: 100%;

</style>

修改完毕后，查看效果

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

/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
 
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
 del, dfn, em, img, ins, kbd, q, s, samp,
 small, strike, strong, sub, sup, tt, var,
 b, u, i, center,
 dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend,
 table, caption, tbody, tfoot, thead, tr, th, td,
 article, aside, canvas, details, embed, 
 figure, figcaption, footer, header, hgroup, 
 menu, nav, output, ruby, section, summary,
 time, mark, audio, video
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   font-weight: normal;
   vertical-align: baseline;
 
 /* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure, 
 footer, header, hgroup, menu, nav, section
   display: block;
 
 ol, ul, li
   list-style: none;
 
 blockquote, q
   quotes: none;
 
 blockquote:before, blockquote:after,
 q:before, q:after
   content: '';
   content: none;
 
 table
   border-collapse: collapse;
   border-spacing: 0;
 
  
 /* custom */
 a
   color: #7e8c8d;
   text-decoration: none;
   -webkit-backface-visibility: hidden;
 
 ::-webkit-scrollbar
   width: 5px;
   height: 5px;
 
 ::-webkit-scrollbar-track-piece
   background-color: rgba(0, 0, 0, 0.2);
   -webkit-border-radius: 6px;
 
 ::-webkit-scrollbar-thumb:vertical
   height: 5px;
   background-color: rgba(125, 125, 125, 0.7);
   -webkit-border-radius: 6px;
 
 ::-webkit-scrollbar-thumb:horizontal
   width: 5px;
   background-color: rgba(125, 125, 125, 0.7);
   -webkit-border-radius: 6px;
 
 html, body
   width: 100%;
   font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", "微软雅黑", sans-serif;
 
 body
   line-height: 1;
   -webkit-text-size-adjust: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 
 html
   overflow-y: scroll;
 
  
 /*清除浮动*/
 .clearfix:before,
 .clearfix:after
   content: " ";
   display: inline-block;
   height: 0;
   clear: both;
   visibility: hidden;
 
 .clearfix
   *zoom: 1;
 
  
 /*隐藏*/
 .dn
   display: none;


1.3 创建登录页面

创建LoginRegister.vue文件：

<template>
  <div class="container">
    <!-- form表单容器 -->
    <div class="form-container">
      <div class="signin-signup">
        <!-- 登录 -->
        <h1>登录</h1>
        <!-- 注册 -->
        <h1>注册</h1>
      </div>
    </div>
  </div>
</template>

<script>
export default 
  name: 'LoginRegister'

</script>
<style scoped>
.container 
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-color: #fff;
  overflow: hidden;

.form-container 
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;

.signin-signup 
  position: relative;
  top: 50%;
  left: 75%;
  transform: translate(-50%, -50%);
  width: 44%;
  transition: 1s 0.7s ease-in-out;
  display: grid;
  grid-template-columns: 1fr;
  z-index: 5;

</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-loader
4.3.04.1.1
4.7.2$7.0.3/7.3.1
6.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

<template>
  <div class="not-found">
    <img src="../assets/img/404.gif" alt="" />
  </div>
</template>

<script>
export default 
  name: '404'

</script>
<style lang="scss" scoped>
.not-found 
  width: 100%;
  height: 100%;
  overflow: hidden;
  img 
    width: 100%;
    height: 100%;
  

</style>

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

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

3.1 实现布局左右切换动画

因为本篇文章主要讲解的是Vue3和element-plus的用法，css部分就省略说明，有兴趣的同学可以自行研究。

<template>
  <div class="container" :class=" 'sign-up-mode': signUpMode ">
    <!-- form表单容器 -->
    <div class="form-container">
      <div class="signin-signup">
        <!-- 登录 -->
        <h1>登录</h1>
        <!-- 注册 -->
        <h1>注册</h1>
      </div>
    </div>
    <!-- 左右切换动画 -->
    <div class="panels-container">
      <div class="panel left-panel">
        <div class="content">
          <h3>Row,row,row your boat</h3>
          <p>Gentlely down the stream</p>
          <button @click="signUpMode = !signUpMode" class="btn transparent">
            注册
          </button>
        </div>
        <!-- <img src="@/assets" alt=""> -->
      </div>
      <div class="panel right-panel">
        <div class="content">
          <h3>Merrily,merrily,merrily,merrily,</h3>
          <p>Life is but a dream</p>
          <button @click="signUpMode = !signUpMode" class="btn transparent">
            登录
          </button>
        </div>
        <!-- <img src="@/assets" alt=""> -->
      </div>
    </div>
  </div>
</template>

<script>
import  ref  from 'vue'
export default 
  name: 'LoginRegister',
  components: ,
  // Vue3语法糖
  // Vue2是通过data和methods传递数据和方法
  // Vue3将data和methods直接耦合在了一起
  setup() 
    // 登录/注册模式
    const signUpMode = ref(false)

    return  signUpMode 
  

</script>
<style scoped>
.container 
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-color: #fff;
  overflow: hidden;

.form-container 
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;

.signin-signup 
  position: relative;
  top: 50%;
  left: 75%;
  transform: translate(-50%, -50%);
  width: 44%;
  transition: 1s 0.7s ease-in-out;
  display: grid;
  grid-template-columns: 1fr;
  z-index: 5;


/* 左右切换动画 */
.social-text 
  padding: 0.7rem 0;
  font-size: 1rem;


.social-media 
  display: flex;
  justify-content: center;


.social-icon 
  height: 46px;
  width: 46px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0.45rem;
  color: #333;
  border-radius: 50%;
  border: 1px solid #333;
  text-decoration: none;
  font-size: 1.1rem;
  transition: 0.3s;


.social-icon:hover 
  color: #4481eb;
  border-color: #4481eb;


.btn 
  width: 150px;
  background-color: #5995fd;
  border: none;
  outline: none;
  height: 49px;
  border-radius: 49px;
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
  margin: 10px 0;
  cursor: pointer;
  transition: 0.5s;


.btn:hover 
  background-color: #4d84e2;

.panels-container 
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);


.container:before 
  content: '';
  position: absolute;
  height: 2000px;
  width: 2000px;
  top: -10%;
  right: 48%;
  transform: translateY(-50%);
  background-image: linear-gradient(-45deg, #4481eb 0%, #04befe 100%);
  transition: 1.8s ease-以上是关于Vue3实战教程（快速入门）的主要内容，如果未能解决你的问题，请参考以下文章
 

 Vue3实战教程（快速入门）


 最新教程：好程序员HTML5大前端Vue.js快速入门（附源码+笔记）


 Vue快速入门（附实战小项目：记事本天气预报音乐播放器）


 vue入门教程之-属性、事件和双向绑定


 vue.js+iview+node.js 前端快速开发框架搭建实战


 快速入门vue.js的3个小实例（附源码）