24/11/29 Vite

安装nodejs 直接下一步

node.js中自带NPM包(管理js库文件)管理工具

测试NPM命令

npm -v  检查版本
npm config set registry https://registry.npmmirror.com  设置远程仓库

2.安装vite

vite是前端服务的工具集 vue团队主持开发

Vite 官网

使用vite安装命令

这个命令是安装vite 创建项目的一体命令

会触发创建项目

在哪个目录创建项目 就在哪个目录执行

如果正确启动后 可以通过浏览器查看默认欢迎页面

3.在vscode中打开vite项目 配置vscode与vue相关插件

通过vscode打开创建好的项目

vue项目与开发工具没有强制关联

vscode中安装插件

启动关闭服务 使用vscode中的终端命令行

注意:终端不要一次开启多个

vite启动服务器时 如果端口占用 会自动尝试下个端口 5173开了 会用5174

vue中代码结构

vue项目中 是单页面应用 所以之后写的都是vue文件

<template>
<!-- 写html代码 -->


</template>


<script setup>

//setup 语法糖 不用再写setup函数和return了
//写js代码


</script>

<style scoped>

/**
scoped 样式只对当前vue文件生效
写样式代码
*/
</style>

通过自定义语法模版 生成自己的vue模板

vue.json 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:
    "vue3 template": {
        "prefix": "vue3",
        "body": [
            "<template>",
            "",
            "</template>",
            "",
            "<script setup>",
            "import {ref,reactive,onMounted} from 'vue'",
            "",
            "</script>",
            "",
            "<style scoped>",
            "",
            "</style>"
        ],
        "description": "vue3 template"
    }
}

4.vue项目目录和代码结构

vue使用单页面应用 全局只有一个html 通过框架 替换vue文件中的 html css javascript 到根页面中

index.html 读取 main.js 引入 App.vue 加载和渲染 到index.html中

全局建立一个vue对象

5.通过路由 在单页面应用下切换页面

安装路由组件

在当前项目下使用命令

npm install vue-router@4

做路由配置

在src下 建立router目录 index.js配置文件

//作为路由的配置文件
/**
 * 一切路由相关的配置都在这里
 */
//引入 vue-router插件
import { createRouter, createWebHistory } from 'vue-router'
//引入一个Vue文件，可以使用 Home 这个名字来指向它，这个名字随意起
//此处引入自己写的vue文件
// import Myvue from '../components/myvue.vue'
//有两种路径模式 历史模式 哈希模式
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    //在这配置路径 与组件之间的对应关系  
    {
            path: '/myvue',//浏览器输入 http://[ip]:[port]/hello的时候 指向这里
            component: () => import('../components/myvue.vue')//转发到HelloWorld.vue
            //这样不需要在上面单独引入，属于懒加载，这个路径被访问了才会加载
    },  
    {
        path: '/myvue2',
        component: () => import('../components/myvue2.vue')
    }, 
    {path:'/',redirect:'/myvue'}
  ]
})

export default router

在main.js中启用插件

import { createApp } from 'vue'
import App from './App.vue'
//router单独的配置文件
import router from './router'


let myVue = createApp(App)
//vue插件 与vue高度集成
//启动router插件
myVue.use(router)
myVue.mount('#app')

app.vue作为根组件 显示其他组件

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

</template>

<script setup>

</script>

<style scoped>

</style>

配置完成后 可以通过路径 切换不同的vue文件

vue文件通过页面功能跳转

a标签 location.href 也可以生效  不建议使用(刷新页面)

router.push('/myvue2')               推荐使用路由跳转

6跨域请求

http:// localhost : 8080 /day11/area

协议 地址 端口

协议 地址 端口 只要有一个不同 都算跨域

浏览器会按照同源策略的标准 检查请求 (method = options )

请求数据时 会先做预检请求(检查对方是否允许访问 是否有响应头 Access-Control-Allow-Origin 允许当前域的访问 )

如果没有 会报错 警告请求被阻止

CORS同源策略 默认只允许出自同源的访问 浏览器会按照同源策略 阻止数据

服务端需要设置 允许前端服务器访问

在servlet的service方法中 加入响应头

        /* 允许跨域的主机地址 */
        resp.setHeader("Access-Control-Allow-Origin", "http://localhost:5173");
        /* 允许跨域的请求⽅法GET, POST, HEAD 等 */
        resp.setHeader("Access-Control-Allow-Methods", "*");
        /* 重新预检验跨域的缓存时间 (s) */
        resp.setHeader("Access-Control-Max-Age", "3600");
        /* 允许跨域的请求头 */
        resp.setHeader("Access-Control-Allow-Headers", "*");
        /* 是否携带cookie */
        resp.setHeader("Access-Control-Allow-Credentials", "true");

7项目优化配置

7.1 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, // 允许跨域
    }
})

7.2ajax请求公共配置

安装npm install axios

统一ajax请求格式

import axios from 'axios';

axios.defaults.baseURL = 'http://localhost:8080/day11/';
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';


const get = (url,params)=>{
    return axios({
        method:'GET',
        url:url,
        params:params,
    })
}

const post = (url,params)=>{
    return axios({
        method:'POST',
        url:url,
        data:params
    })
}

export {get,post}

设置公共url

设置公共请求头

统一get/post方法的格式

get(请求地址,json对象)

post(请求地址,json对象)

npm install terser npm run build 可完成打包