bootstrap样式库： https://getbootstrap.com/
tailwindcss样式库: https://tailwindcss.com/
官方文档：https://cn.vuejs.org/guide/introduction.html
脚手架文档：https://cli.vuejs.org/zh/index.html
官方脚手架vite文档（推荐）：https://cn.vitejs.dev/guide/#scaffolding-your-first-vite-project
npm create vite@latest 然后一步步操作即可
查看node版本：
node -v
安装cli ：
npm install -g @vue/cli
查看cli版本：
创建一个项目
vue create my-project
然后如图即可：
然后第一个项目就创建好了
2、使用webstrom打开项目，如图：
2023-07-20 start:
vite创建一个vue项目
npm create vite@latest
npm install
npm run dev
跨域设置，在vite.config.ts中设置：
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
server: {
proxy: {
'/api': {
target: 'http://localhost:8082/', // 实际请求地址
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
})注意进行请求的时候不要输入具体完整的api，如：
本地开发时，使用内网地址进行调试，在package.json设置：
"scripts": {
"dev": "vite --host 0.0.0.0",
"build": "vue-tsc && vite build",
"preview": "vite preview"
},安装axios：
npm install axios@latest
npm install vue-router@latest
end
2023-08-13 start
设置淘宝镜像：npm config set registry http://registry.npmmirror.com
查看设置：npm config list
end
2023-08-16 start
vue-router的引入：
在src目录下建立router文件夹 在router文件夹下创建router.js：
import { createRouter,createWebHistory } from "vue-router";
import HelloWorld from '../components/HelloWorld.vue';
const router = createRouter({
history:createWebHistory(),
routes:[
{
path:'/',
component:HelloWorld,
}
]
})
export default router;
修改HelloWorld.vue里的内容：
<template>
<div class="hello">
我是第一个路由组件
</div>
</template>
<script>
export default {
name: 'HelloWorld'
}
</script>
<style scoped>
</style>
App.vue里的内容：
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
<style>
</style>
main.js（main.ts）中引入路由：
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/router'
createApp(App).use(router).mount('#app')
页面之间的跳转：
this.$router.push('/other-page');
你可以使用 <router-link> 组件来创建一个链接，该组件会被渲染成一个 <a> 标签
<router-link to="/other-page">跳转到其他页面</router-link>
在某些情况下，你可能需要在跳转之前执行一些逻辑，例如验证用户的身份。为了实现这个功能，你可以使用导航守卫。
this.$router.beforeEach((to, from, next) => {
// 在这里执行你的逻辑，例如验证用户的身份
// 然后调用 next() 函数以继续跳转过程
next();
});end
2023-08-30 start:
vue3 b站视频：https://www.bilibili.com/video/BV1dS4y1y7vd?p=1&vd_source=5f6653b0e7fc3c45af50cd854bea3ee5
相关博客：https://xiaoman.blog.csdn.net/category_11618172_2.html
github地址：https://github.com/2002XiaoYu/Latest-front-end-Notes
es6 b站视频：https://www.bilibili.com/video/BV1uK411H7on?p=1&vd_source=5f6653b0e7fc3c45af50cd854bea3ee5
end
2024-06-03 start：
npm i 报错的时候，可以尝试使用：npm install --legacy-peer-deps
end
2024-06-25 start:
在utils中创建：localStorageHelper.js：
export function getItemWithExpiration(key) {
const item = JSON.parse(localStorage.getItem(key));
if (item && new Date().getTime() < item.expirationDate) {
return item.value;
}
return null;
}
export function setItemWithExpiration(key, value, expirationMinutes) {
const expirationDate = new Date().getTime() + expirationMinutes * 60 * 1000;
const item = {
value,
expirationDate
};
localStorage.setItem(key, JSON.stringify(item));
}使用：import {getItemWithExpiration,setItemWithExpiration} from "@/utils/localStorageHelper.js";
end