vue3项目搭建流程和注意事项

安装vite
npm install -g create-vite
第一步：创建项目

npm init vue@latest
根据提示安装配置

npm init vue@latest
Need to install the following packages:
create-vue@3.10.4
Ok to proceed? (y) y

Vue.js - The Progressive JavaScript Framework

✔ 请输入项目名称： … ai-dome1
✔ 是否使用 TypeScript 语法？ … 否 / 是
✔ 是否启用 JSX 支持？ … 否 / 是
✔ 是否引入 Vue Router 进行单页面应用开发？ … 否 / 是
✔ 是否引入 Pinia 用于状态管理？ … 否 / 是
✔ 是否引入 Vitest 用于单元测试？ … 否 / 是
✔ 是否要引入一款端到端（End to End）测试工具？ › Cypress
✔ 是否引入 ESLint 用于代码质量检测？ … 否 / 是
✔ 是否引入 Prettier 用于代码格式化？ … 否 / 是
✔ 是否引入 Vue DevTools 7 扩展用于调试? (试验阶段) … 否 / 是

正在初始化项目 /Users/anna/Documents/2024dome/作业/ai-dome1...

项目初始化完成，可执行以下命令：

  cd ai-dome1
  npm install
  npm run dev

第二步：下载安装依赖

//router
npm install @vue-router@4 -S
//axiox
npm install axios
//pnina
npm install pinia 
//pinia的持续性存储
npm install pinia-plugin-persist -save
//CSS预处理器
npm install -g sass
//UI组件库
npm install element-plus -S

//自动导入import插件
npm install unplugin-auto-import -D

element-plus官网：https://element-plus.org/zh-CN/guide/quickstart.html需要根据项目要求配置
csp跨站：web的一种安全机制,防止iframe调用

if(top.location !== window.location){
  top.location = window.location
}

router的二次封装

router:
		index.ts: 入口文件
		router.ts: 总router表
		guards.ts: 全局导航守卫
		
markRaw: 控制对象的响应式行为
		作用：意味着这个对象不会被VUE的响应式系统跟踪 
		好处：避免不必要的性能开销和防止意外修改
		
		其实就是冻结

vite路径

resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      '@router': fileURLToPath(new URL('./src/router', import.meta.url)),
      '@views': fileURLToPath(new URL('./src/views', import.meta.url)),
      '@stores': fileURLToPath(new URL('./src/stores', import.meta.url)),
      '@components': fileURLToPath(new URL('./src/components', import.meta.url)),
      '@assets': fileURLToPath(new URL('./src/assets', import.meta.url)),
      '@img': fileURLToPath(new URL('./src/assets/images', import.meta.url)),
    }
  }

ts配置

//tsconfig.app.json文件配置
"resolveJsonModule": true,
"esModuleInterop": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "@*": ["./src/*"]
    }

pinia二次封装

1、use开头：
		export const userInfoStore = defineStore('userInfo', {
      state: () => ({  name: 'Eduardo' }),
      actions: {
        nameChange() {
          this.name ='AAAA'
        },
      }
    })
2、建了一个总目录?  因为它没有modules   ==== index.ts 目录（写一些备注，进入一个引入）
 		方便后期的一个维护

api二次封装、get、post分离

1、创建一个工具类 utils ====> request.js
	1.1 引入axios  npm i axios
2、request.ts
	2.1  创建一个axios实例
	// 1、创建实例化
	const instance = axios.create({
    baseURL: CONFIG.BASE_URL,
    timeout: 10000,
  });
  2、添加请求拦截
  
  3、响应拦截

3、get、post 分离
	*****return Promise