vite项目

vite项目

1、什么是vite

Vite（法语意为 "快速的"，发音 /vit/，发音同"veet"）是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：

（1）一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。

（2）一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。

2、模板

3、搭建vite项目

（1）使用如下代码安装vite

$ npm create vite@latest

（2）按照提示进行操作即可

（3）实践

<script>
    // 在这里写vue代码
</script>
<template>
  <transition name="fade">
    <div class="alert"></div>
  </transition>
  <div id="login">
    <div class="form-group">
      <label for="exampleInputUsername">用户名：</label>
      <input
        type="text"
        id="exampleInputUsername"
        placeholder="请输入用户名"
      />
    </div>
    <div class="form-group">
      <label for="exampleInputPassWord">密码：</label>
      <input
        type="password"
        id="exampleInputPassWord"
        placeholder="请输入密码"
      />
    </div>
    <button type="submit" style="background-color: #9763fe;">登录</button>
  </div>
</template>
<style scoped>
.alert {
  position: absolute;
  width: 290px;
  top: 50px;
  margin: 0 auto;
  padding: 10px 0;
  background: #e76a6a;
  border-radius: 8px;
  opacity: 1;
  text-align: center;
  transition: opacity 0.3s ease;
}
/* 定义名为'fade'的过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.form-group {
  margin-bottom: 1em;
  text-align: left;
}
input {
  outline-style: none;
  border: 1px solid #c0c4cc;
  border-radius: 5px;
  width: 100%;
  height: 100%;
  padding: 0;
  padding: 10px 15px;
  box-sizing: border-box;
  font-family: "Microsoft soft";
  &:focus {
    border-color: #f07b00;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px
            rgba(0, 0, 0, 0.075),
        #f07b00;
 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
        #f07b00;
  }
}
</style>

• 删除HelloWorld.vue,在components下创建 Login.vue,对App.vue里的文件引入进行修改
• 创建userName和passWord字符串型变量并绑定在用户名、密码上（双向绑定）。
• 创建message字符串型变量并绑定在class名为alert的 div上（文本输出）。
• 创建msgShow布尔型变量并绑定在class名为alert的 div上（显示控制）。
• 创建checkLogin方法绑定在登录按钮上并对登录用户的输入进行校验，将相应信息输出给message（输入为空要提示，输错要提示）。
• 只有当用户输入用户名：studies ，密码：qzzg 时才能正确登录。

4、什么是 Vue Router

Vue Router是Vue.js的官方路由。它与Vue.js核心深度集成，让用Vue.js构建单页应用变得轻而易举。功能包括：

• 嵌套路由映射
• 动态路由选择
• 模块化、基于组件的路由配置
• 路由参数、查询、通配符
• 展示由 Vue.js 的过渡系统提供的过渡效果
• 细致的导航控制
• 自动激活 CSS 类的链接
• HTML5 history 模式或 hash 模式
• 可定制的滚动行为

• URL 的正确编码

  （1）安装

  npm install vue-router@4
  

  （2）使用

  在src目录下创建router文件夹，并在该目录下创index.js 文件。
  我们需要使用createRouter创建路由，设置路由的模式，示例代码选择createWebHashHistory模式，然后我们先设置 Login.vue 的路由配置，代码如下：

import { createRouter, createWebHashHistory } from 'vue-router'
import Login from '../components/Login.vue'
export default createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/login',
      component: Login
    }
  ],
})

之后我们需要在入口文件 main.js 导入并使用它：

import { createApp } from 'vue'
import router from './router/index'
import './style.css'
import App from './App.vue'
createApp(App).use(router).mount('#app')

最后我们需要在根文件 App.vue 里把 router 显示出来：

<script>
export default {
  name: 'app'
}
</script>
<template>
  <router-view />
</template>

请注意：代码中两个 svg 文件被挪到 Login 里了。

<template>
  <transition name="fade">
    <div class="alert" v-show="msgShow" v-text="message"></div>
  </transition>
  <div id="login">
    <a href="https://vitejs.dev" target="_blank">
      <img src="../../public/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="../assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
    ...... 其他原代码
  </div>
</template>
<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
...... 其他原代码
</style>

（3）实践

现在我们可以进行页面之间的跳转了，所以我们需要建立新的页面。
main.vue 页面的代码：

<script>
  export default {
    name: 'appMain'
  }
</script>
<template>
  <div>main</div>
</template>

• 在components目录下创建Main.vue文件
• 在router/index.js中配置Main.vue文件的路由，它的路径（path）为 '/'
• 修改checkLogin方法，登录成功之后跳转到'/'