Vue项目笔记01

1. 使用Vite搭建项目

Vite中文文档：https://vitejs.cn/vite3-cn/

npm切换源：https://blog.csdn.net/m0_49739115/article/details/124842358

// 1.创建项目
npm create vite@latest my-vue-app --template vue
// 2. 启动项目
cd my-vue-app
npm install
npm run dev

2. 使用windicss库

网站：https://cn.windicss.org/

// 1. 安装相关包
npm i -D vite-plugin-windicss windicss
// 2. 添加插件 vite.config.js
import WindiCSS from 'vite-plugin-windicss'
 
export default {
  plugins: [
    WindiCSS(),
  ],
}
# 3. 在你的 Vite 入口文件 main.js中导入 virtual:windi.css
import 'virtual:windi.css'

3. 使用Element 组件库

网站：https://element-plus.gitee.io/zh-CN/

// 安装
npm install element-plus --save
// 完整引入
// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
 
const app = createApp(App)
 
app.use(ElementPlus)
app.mount('#app')

4. 使用router路由

文档：https://router.vuejs.org/zh/guide/

// 安装
npm install vue-router@4
//导入相关函数
import {createRouter,createWebHashHistory} from "vue-router"
//路由配置
const routes = [
    { path: '/', component: Index },
    { path:'/about',component:About}
]
// 创建路由实例并传递 `routes` 配置
const router =createRouter({
    history:createWebHashHistory(),
    routes
  })
//暴露路由
export default router
 
// 添加错误页面路由配置 router/index.js
{
    path: '/:pathMatch(.*)*', 
    name: 'NotFound', 
    component: NotFound 
}
 

5. 配置文件系统路径别名

文档：https://vitejs.cn/vite3-cn/config/shared-options.html#resolve-alias

// vite.config.js
import path from 'path'
export default defineConfig({
  resolve:{
    alias:{
      "~":path.resolve(__dirname,"src")
    }
  },
  //...
 })

6. 使用图标

参考文档：https://element-plus.gitee.io/zh-CN/

7. vscode集成git

参考文档：https://blog.csdn.net/czjl6886/article/details/122129576

8. Element UI 表单验证

参考文档：https://element-plus.gitee.io/zh-CN/component/form.html#表单校验

//1. 单元格验证，只需为 rules 属性传入约定的验证规则，并将 form-Item 的 prop 属性设置为需要验证的特殊键值即可。
 
<el-form :model="form" :rules = "rules">
<el-form-item prop="username">
         <el-input v-model="form.username" placeholder="请输入用户名" />
</el-form-item>
<el-form-item prop="password">
          <el-input v-model="form.password" placeholder="请输入密码" />
</el-form-item>
</el-form>
 
<script setup>
const rules = reactive({
    username:{required: true, message: '请输入用户名', trigger: 'blur'},
    password:{required: true, message: '请输入密码', trigger:'blur'}
}
</script>
 

9.axios使用

文档：http://www.axios-js.com/

10.设置cookie

文档：https://vueuse.org/integrations/usecookies/#usage

11.常用vue素材库

参考：https://zhuanlan.zhihu.com/p/547097058

12.路由跳转

参考：https://router.vuejs.org/zh/guide/essentials/navigation.html
router.push('/admin')

13. 动态添加路由问题

参考：https://www.cnblogs.com/ddqyc/p/15661190.html
参考：https://blog.csdn.net/qq_41912398/article/details/109231418

14. vue发送post请求后端接收不到参数问题

参考：https://www.freesion.com/article/51691153068/

15. vue生产环境无法显示背景图片

参考：https://www.likecs.com/show-313194.html

16. vue跳转链接

参考：https://blog.csdn.net/Mjxiaomihu/article/details/125857002