1.安装node.js
node是js的运行库 可以不在浏览器中 独立运行js代码
安装nodejs 直接下一步
node.js中自带NPM包(管理js库文件)管理工具
测试NPM命令
npm -v 检查版本
npm config set registry https://registry.npmmirror.com 设置远程仓库2.安装vite
vite是前端服务的工具集 vue团队主持开发
使用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请求公共配置
统一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对象)