day7_vite 啊哈哈啊哈哈哈哈哈

day7_vite

vite(工具集 前端工程化项目使用的工具) 是vue官方退出的 编译 运行 工具

单页面应用 (全局只有一个页面 分别写一个个组件 由工具整体编译 通过js做内容替换)

1安装node.js

js运行时工具 脱离浏览器的js代码 都需要它才能运行

安装目录尽量不要改 目录中不要带中文

检查npm是否安装成功

2安装pnpm 包安装工具

https://pnpm.nodejs.cn/installation/ 官网

全局安装pnpm包管理工具

npm install -g pnpm@latest-10

安装完成

3vite安装

https://cn.vitejs.dev/guide/ vite官网

安装vite 创建vite项目

pnpm create vite

注意:这个命令会安装vite 创建项目 在要创建项目的目录敲命令

安装完成

4.创建vite项目

选择选项

项目会自动创建 自动启动

vite服务器默认端口 5173

项目创建完成

5vite项目目录结构

需要项目编码时 写的 主要时src源码目录

把欢迎的多余文件删掉 只留这几个文件

6vite项目相关命令

1项目启动

启动测试环境 启动vite自带服务器 (开发时使用)
pnpm run dev
需要进入项目目录 有package.json文件的目录 才能使用

2项目关闭

控制台中 ctrl+c 杀当前进程

注意 ctrl+c不是复制 复制 鼠标左键拖中 点右键 再点右键 粘贴

3(根据package.json文件)安装全部依赖库

重建当前项目的依赖库

pnpm install

4项目打包

把当前项目打包到dist目录中 配合其他服务器 在生产环境(正式上线)中使用

pnpm run build

7通过开发工具启动关闭项目

终端常用两种形式

powerShell 执行脚本 设置脚本权限命令 Set-ExecutionPolicy Unrestricted 之后才可以执行脚本

cmd cmd控制台 可以直接执行

8开发工具相关配置

配置vue模板

自定义模板文件

{
    // Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and 
    // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
    // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
    // same ids are connected.
    // Example:
    "vue3templage": {
        "prefix": "vue3",
        "body": [
                "<script setup>",
                "import { ref } from 'vue' ",
                "</script>",
                "",
                "<template>",
                " ",
                "</template>",
                "",
                "<style scoped>",
                "",
                "</style>"
​
        ],
        "description": "vue3templage"
    }
}

安装插件

官方插件 语法变色

9项目运行启动配置 vite.config.js

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
​
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
    //配置根路径，这个不配置会导致部署之后访问不到
    base: './',
    //  构建
    build: {
      outDir: 'dist', //指定打包输出路径
      assetsDir: 'assets', //指定静态资源存放路径
      cssCodeSplit: true, //css代码拆分,禁用则所有样式保存在一个css里面
      sourcemap: false, //是否构建source map 文件
  
      // 生产环境取消 console
      minify: 'terser',
      terserOptions: {
        compress: {
          drop_console: true,
          drop_debugger: true
        }
      },
  
      //会打包出 css js 等文件夹 目录显得清晰
      rollupOptions: {
        output: {
          chunkFileNames: 'js/[name]-[hash].js',
          entryFileNames: 'js/[name]-[hash].js',
          assetFileNames: '[ext]/[name]-[hash].[ext]'
        }
      }
    },
    resolve: {
      alias: {
        //别名，给./src目录，起个别名@，在文件中就可以使用@替换src了
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    },
    // 本地服务
    server: {
      host: "0.0.0.0", // 可以通过ip访问前端服务
      port: 5173,  // 端口号
      open: true,  // 是否自动在浏览器打开
      https: false, // 是否开启 https
      cors: true, // 允许跨域
    }
})
​

主要的效果 引入文件时 可以使用别名@ 替代/src

启动服务器后 自动弹出浏览器 方便测试

注意:vite服务器 如果当前端口号被占用 会自动往后移一个

10 xxx.vue文件

spa(单页面应用)项目中的组件 作为模板 在根页面中替换显示

<script setup>
    写js代码
    //相当与setup函数中的位置
    //直接写变量函数 不需要return
</script>
​
<template>
    写html代码
    <!-- 写html标签代码 vue中的各种指令 -->
</template>
​
<style scoped>
    写css代码
    /* 
    scoped  样式只对当前vue文件生效 
    写css代码 
    
    */
</style>
​

1vue文件当做页面使用

table显示数据示例

<script setup>

  import { ref,onMounted } from 'vue'

  const students = ref([])


  onMounted(()=>{
    //从后端加载数据
    students.value = [{ id: 1, name: '张三', age: 18 }, 
                        { id: 2, name: '李四', age: 19 }, 
                        { id: 3, name: '王五', age: 20 }]
  })
</script>

<template>
  <table border="1">
    <thead>
    <tr class="myHeader">
      <th>编号</th>
      <th>名称</th>
      <th>年龄</th>
      
    </tr>
    </thead>
    <tbody>
      <tr v-for="stu in students">
        <td>{{stu.id}}</td>
        <td>{{stu.name}}</td>
        <td>{{stu.age}}</td>
      </tr>

    </tbody>
  </table>
</template>

<style scoped>
  .myHeader {
    background-color: #F00;
  }
</style>

2vue文件当做组件 供其他页面使用

vue文件可以做自定义组件 给其他的页面引入使用

<script setup>
import { ref } from 'vue' 
</script>

<template>
    <div class="title">xxx管理系统</div>
 
</template>

<style scoped>
    .title{
        font-size: 30px;
        text-align: center;
        border-bottom: 1px solid #eee;
        height: 50px;
        line-height: 50px;
    }
</style>

其他vue文件可以引入这个vue文件 作为公共组件

<script setup>

  import { ref,onMounted } from 'vue'

  import Common from '@/components/common.vue'


  const students = ref([])


  onMounted(()=>{
    //从后端加载数据
    students.value = [{ id: 1, name: '张三', age: 18 }, 
                        { id: 2, name: '李四', age: 19 }, 
                        { id: 3, name: '王五', age: 20 }]
  })
</script>

<template>
  <Common></Common>

  <table border="1">
    <thead>
    <tr class="myHeader">
      <th>编号</th>
      <th>名称</th>
      <th>年龄</th>
      
    </tr>
    </thead>
    <tbody>
      <tr v-for="stu in students">
        <td>{{stu.id}}</td>
        <td>{{stu.name}}</td>
        <td>{{stu.age}}</td>
      </tr>

    </tbody>
  </table>
</template>

<style scoped>
  .myHeader {
    background-color: #F00;
  }
</style>

11vueRouter 路由组件

模拟多页面切换

https://router.vuejs.org/zh/installation.html 官网

1安装路由

pnpm add vue-router@4
要进入项目目录安装

2创建路由的配置文件

路由配置:

import { createRouter, createWebHistory } from 'vue-router'
//静态引入
//1先引入组件 2再配置路由对应关系
//import Login from './components/login.vue'

// 创建路由实例并传递 `routes` 配置
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes:[
    //配置地址与vue组件的对应关系
    //{path:'/login',component:Login}
    //动态引入
    //通过函数引入组件
    {path:'/login',component:()=>import('@/components/login.vue')}
  ]
})



export default router

注意:

静态引入

import Login from './components/login.vue'

routes:[
    //配置地址与vue组件的对应关系
    {path:'/login',component:Login}
]

动态引入(建议用这个)

routes:[
    //动态引入
    //通过函数引入组件
    {path:'/login',component:()=>import('@/components/login.vue')}
  ]

3main.js中引入路由配置

import { createApp } from 'vue'
import App from './App.vue'
// 如果文件名叫index.js 就可以省略
import router from './router'

//router是vue的        插件     插件需要多执行一个use命令
//如果与vue没有集成关系 js库叫依赖
const vue = createApp(App)
//启用router路由
vue.use(router)
//挂载
vue.mount('#app')

增加的内容:

// 如果文件名叫index.js 就可以省略
//引入刚才配置好的路由配置文件
import router from './router'  

//启用router路由
vue.use(router)

4.改造app.vue

app.vue 根组件 不要写页面

<script setup>

</script>

<template>
  <router-view></router-view>
</template>

<style scoped>

</style>

5.启动服务器 测试路径

浏览器敲配置的路径 显示指定对应的组件 (模拟多页面切换效果)

6配置欢迎页面

    //通过重定向 覆盖根组件路径 (配置欢迎页面)
    {path:'/',redirect:'/login'}

import { createRouter, createWebHistory } from 'vue-router'
//静态引入
//1先引入组件 2再配置路由对应关系
//import Login from './components/login.vue'

// 创建路由实例并传递 `routes` 配置
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes:[
    //配置地址与vue组件的对应关系
    //{path:'/login',component:Login}
    //动态引入
    //通过函数引入组件
    {path:'/login',component:()=>import('@/components/login.vue')},
    //通过重定向 覆盖根组件路径 (配置欢迎页面)
    {path:'/',redirect:'/login'}

  ]
})



export default router

7.使用views目录 和components目录 区分不同功能的vue文件

8如何在不同的vue文件间切换

通过router的自定义标签切换

<router-link to="/login">去登录</router-link>

通过router的js切换(推荐)

//导入自己配置的路由
import router from '@/router'

const myGo = ()=>{
    //通过router跳转路由
    router.push('/login')
}