vite项目

vite项目

1、什么是vite

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

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

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

2、模板

3、搭建vite项目

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

$ npm create vite@latest

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

（3）实践

• 删除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 显示出来：

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

（3）实践

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

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