Vite – neet`s Blog

# 1.安装node.js

node是js的运行库可以不在浏览器中独立运行js代码

![image-20241129100100435](http://43.155.216.63:21080/wp-content/uploads/2025/12/image-20241129100100435.png

安装nodejs 直接下一步

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

测试NPM命令

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

# 2.安装vite

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

https://www.vitejs.net/ 官网

使用vite安装命令

![image-20241129100358047](http://43.155.216.63:21080/wp-content/uploads/2025/12/image-20241129100358047.png

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

会触发创建项目

![image-20241129100503672](http://43.155.216.63:21080/wp-content/uploads/2025/12/image-20241129100503672.png

![image-20241129100759664](http://43.155.216.63:21080/wp-content/uploads/2025/12/image-20241129100759664.png

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

![image-20241129100828943](http://43.155.216.63:21080/wp-content/uploads/2025/12/image-20241129100828943.png

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

通过vscode打开创建好的项目

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

#### vscode中安装插件

![image-20241129104048408](http://43.155.216.63:21080/wp-content/uploads/2025/12/image-20241129104048408.png

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

![image-20241129104150318](http://43.155.216.63:21080/wp-content/uploads/2025/12/image-20241129104150318.png

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

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

#### vue中代码结构

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

“`vue

“`

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

![image-20241129104611750](http://43.155.216.63:21080/wp-content/uploads/2025/12/image-20241129104611750.png

![image-20241129104635061](http://43.155.216.63:21080/wp-content/uploads/2025/12/image-20241129104635061.png

vue.json vue语法提示模板

“`json
{
// 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": [
"“,
“”,
““,
“”,
“

"
],
"description": "vue3 template"
}
}
“`

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

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

![image-20241129104958862](http://43.155.216.63:21080/wp-content/uploads/2025/12/image-20241129104958862.png

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

全局建立一个vue对象

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

安装路由组件

在当前项目下使用命令

![image-20241129111420618](http://43.155.216.63:21080/wp-content/uploads/2025/12/image-20241129111420618.png

“`js
npm install vue-router@4
“`

做路由配置

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

![image-20241129111546395](http://43.155.216.63:21080/wp-content/uploads/2025/12/image-20241129111546395.png

“`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中启用插件

![image-20241129111647712](http://43.155.216.63:21080/wp-content/uploads/2025/12/image-20241129111647712.png

“`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作为根组件显示其他组件

“`vue

“`

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

vue文件通过页面功能跳转

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

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

# 6.跨域请求

http:// localhost : 8080 /day11/area

协议地址端口

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

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

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

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

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

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

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

“`java
/* 允许跨域的主机地址 */
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 项目运行配置和插件配置

“`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请求公共配置

统一ajax请求格式

![image-20241129154946694](http://43.155.216.63:21080/wp-content/uploads/2025/12/image-20241129154946694.png

“`js
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对象)

发送评论 编辑评论

发送评论编辑评论