1.优选项目

2.弘源旅途

• 技术栈：Vue3、Vite、Pinia、Vue-router

3.后台管理系统

4.创建Vue项目

• 方式一：Vue CLI
  • 基于webpack工具
  • 命令：vue create xxx
• 方式二：create-vue
  • 基于vite工具
  • 命令：npm init vue@latest xxx
• 项目配置:
  • 配置项目的icon
  • 配置项目的标题
  • 配置jsconfig.json

5.项目目录结构划分

• 对项目进行目录结构的划分:

  

6. CSS 样式的重置

• 对默认CSS样式进行重置:

  • npm安装一个normalize.css

    npm i normalize.css

  • 入口文件中引入normalize.css

  • 手动创建一个reset.css

  • 在css/index.css文件中引入上面两个文件，main.js入口文件中引入index.css即可

    • 引入之后，就会在webpack的依赖图中，到时候打包的时候，webpack就会帮我对这两个文件进行打包
    

7.全家桶 – 路由配置

8.全家桶 – 状态管理

• 状态管理的选择:

  • vuex: 目前依然使用较多的状态管理库

  • pinia: 强烈推荐, 未来趋势的状态管理库

    

9.项目细节

• 注意事项

  • vite版本迭代更新，打包时会转化为es5，开发环境中用的es6（即开发环境中一些es6+的代码不会做转化），所以导致npm run dev跑不起来，需要注释掉jsconfig中的target选项默认配置的es5

    

  • Vite中src动态绑定本地图片地址处理

  <img src="@/assets/img/tabbar/tab_home.png" alt="">
  非动态的时候，会解析成这种路径：/src/img/tabbar/tab_home.png
  
  <img :src="@/assets/img/tabbar/tab_home.png" alt="">
  动态绑定的时候，是当成js代码处理，原来是什么就是什么：@/assets/img/tabbar/tab_home.png
  
  1. 在webpack中，可以使用require()函数进行包裹，包裹之后意味着就是一个js代码
  <img :src="require(@/assets/img/tabbar/tab_home.png)" alt="">
  
  2. 在vite中使用new URL(url, import.meta.url)
  url参数是相对于import.meta.url，二者拼接
  // https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/import.meta
  // https://cn.vitejs.dev/guide/assets.html#new-url-url-import-meta-url

  • 当然这种情况是本地文件引入咯，一般从服务器中拿到图片地址的情况居多，就不需要这么麻烦，直接绑定地址即可
  

• 修改第三方组件库样式方案总结