搭建项目笔记

1.1.创建Vue项目

• 方式一： Vue CLI

  • 基于webpack工具；
  • 命令：vue create xxx

• 方式二： Vite

  • 基于vite工具；
  • 命令：npm init vue@latest

• 项目配置：

  • 配置项目的icon
  • 配置项目的标题
  • 配置jsconfig.json

1.2.划分目录结构

assets -> 资源（css/font/img）

components -> 抽取出来的公共组件

hooks -> 组件对应的公共逻辑抽取到hooks文件夹下

router -> 路由

mock -> 模拟数据的一些配置

service -> 网络请求的一些东西，和网络沟通的一些东西

stores -> 状态管理器（Pinia）

views -> 大的页面视图，路由切换的时候，一般页面会放到这里来

utils -> 工具

图片如下：

1.3.css样式的重置

1.3.1 对默认样式进行重置：

  - normalize.css  npm install normalize.css  - reset.css- 1.在main.js引入normalize.css- 2.新建index.css,分别引入我们自己编写的css样式重置文件- /* 不建议加 url 在vite里面可能会有问题*/- @import "./common.css";- @import "./reset.css";- 3.在main.js引入index.css- import "normalize.css"- import "@/assets/css/index.css"- 4.不建议index.css引入normalize.css  因为两个是独立的文件，一个是我们自己编写的, 一个是第三方的

图片如下：

1.3.2 设置全局样式变量

   :root {--primary-color: #ff9854;}

1.4 Vue全家桶-路由配置

1.4.1 路由的安装

  - npm install vue-router

1.4.2 路由的配置

  - 在router文件夹下创建index.js- import { createRouter, createWebHashHistory } from 'vue-router'- index.js详细代码如下：```javascript const router = createRouter({history: createWebHashHistory(),// 映射关系： path  ->  componentroutes: [// redirect：重定向{path: '/',redirect: '/home'},{// 路由懒加载path: '/home',component: () => import('@/views/home/home.vue')},]})export default router;```- 在main.js中引入index.js并注册- import router from './router'- app.use(router)- main.js完整代码如下：```javascript  import { createApp } from 'vue'import App from './App.vue'// router需要写index吗，不需要会默认找import router from './router'createApp(App).use(router).mount('#app')```

index.js详细代码如下：

      const router = createRouter({history: createWebHashHistory(),// 映射关系： path  ->  componentroutes: [// redirect：重定向{path: '/',redirect: '/home'},{// 路由懒加载path: '/home',component: () => import('@/views/home/home.vue')},]})export default router;

main.js完整代码如下：

import { createApp } from 'vue'
import App from './App.vue'
// router需要写index吗，不需要会默认找
import router from './router'createApp(App).use(router).mount('#app')

1.4.3 在App.vue中写上router-view组件占位

      <template><div class="app"><router-view></router-view>{/*导航链接组件跳转  */}<router-link to="/home">首页</router-link><router-link to="/favor">收藏</router-link><router-link to="/order">订单</router-link><router-link to="/message">消息</router-link>App Vue</div></template><script setup></script><style scoped></style>

1.4.4 代码片段补充-提高开发效率

  - 1.新建好代码片段例如：```javascript <template>// 这里写一个占位符的 ${1}  数字一样代表可以同时修改<div class="${1:home}"><h2>${1:home}</h2></div></template><script setup></script><style lang="less" scoped></style>```- 2.在https://snippet-generator.app/网站中生成对应的代码片段json文件- 2.1 把上面准备好的代码片段复制到https://snippet-generator.app/中大文本框里面- 2.2 上面还有两个小输入框，一个是代码片段名称name，一个是代码片段的关键字prefix(有点类似于快捷键)- 2.3 找到首选项配置代码片段找到vue.json- 2.4 直接在vue.json中粘贴代码片段json文件就可以啦

代码片段:

  <template>// 这里写一个占位符的 ${1}  数字一样代表可以同时修改<div class="${1:home}"><h2>${1:home}</h2></div></template><script setup></script><style lang="less" scoped></style>

1.5 Vue全家桶-状态管理

1.5.1 状态管理的选择：

  - Vuex：目前依然使用较多的状态管理库；- Pinia：强烈推荐，未来趋势的状态管理库；

1.5.2 Pinia的安装

  - npm install pinia

1.5.3 创建Pinia

  - 在stores文件夹下创建index.js并导入pinia```javascriptimport { createPinia } from 'pinia'const pinia = createPinia()export default pinia```- 在main.js中引入pinia并注册```javascriptimport { createApp } from 'vue'import App from './App.vue'import pinia from './stores'createApp(App).use(pinia).mount('#app')```

stores/index.js代码片段：

  import { createPinia } from 'pinia'const pinia = createPinia()export default pinia

main.js注册pinia代码片段：

  import { createApp } from 'vue'import App from './App.vue'import pinia from './stores'createApp(App).use(pinia).mount('#app')

1.5.4 创建store

  - 在stores文件夹下创建modules文件夹，在modules文件夹下创建不同的模块的store

   import { defineStore } from 'pinia'//第一个参数是id, 第二个参数是对象const useCityStore = defineStore('city', {state: () => ({cities: []}),actions: {}})export default useCityStore

1.6 补充-vite环境下img图片配置动态路径

- 在vite里面用到的时候动态的URL地址，在vite中必须用URL，因为和vite的机制有关系，vite用的直接是ESModule,ESModule找东西必须通过URL去找
- 解决方法：通过动态路径去找图片- 1.在utils文件夹下新建一个load_assets.js去处理图片```javascriptexport const getAssetURL = (image) => {// 参数一是和参数二当前路径做了一个拼接的形成一个完整路径// 参数一： 相对路径（图片地址）// 参数二：当前文件的URL（ import.meta.url，根据这个路径去找图片）const imgURl = `../assets/img/${image}`return new URL(imgURl, import.meta.url).href}```- 那个文件需要用到那个文件导入```javascript<template><template v-for="(item, index) in tabbarData" :key="index"><img :src="getAssetURL(item.image)" alt=""><span class="text">{{item.text}}</span></template></template><script setup>import { getAssetURL } from '@/utils/load_assets'const tabbarData = [{text: '首页',image: 'tabbar/tab_home.png',imageActive: 'tabbar/tab_home_active.png',path: '/home'},{text: '收藏',image: 'tabbar/tab_favor.png',imageActive: 'tabbar/tab_favor_active.png',path: '/favor'},{text: '订单',image: 'tabbar/tab_order.png',imageActive: 'tabbar/tab_order_active.png',path: '/order'},{text: '消息',image: 'tabbar/tab_message.png',imageActive: 'tabbar/tab_message.png',path: '/message'},]<script>```

utils/load_assets.js代码：

  export const getAssetURL = (image) => {// 参数一是和参数二当前路径做了一个拼接的形成一个完整路径// 参数一： 相对路径（图片地址）// 参数二：当前文件的URL（ import.meta.url，根据这个路径去找图片）const imgURl = `../assets/img/${image}`return new URL(imgURl, import.meta.url).href}

引用文件代码：

<template><template v-for="(item, index) in tabbarData" :key="index"><img :src="getAssetURL(item.image)" alt=""><span class="text">{{item.text}}</span></template>
</template><script setup>import { getAssetURL } from '@/utils/load_assets'const tabbarData = [{text: '首页',image: 'tabbar/tab_home.png',imageActive: 'tabbar/tab_home_active.png',path: '/home'},{text: '收藏',image: 'tabbar/tab_favor.png',imageActive: 'tabbar/tab_favor_active.png',path: '/favor'},{text: '订单',image: 'tabbar/tab_order.png',imageActive: 'tabbar/tab_order_active.png',path: '/order'},{text: '消息',image: 'tabbar/tab_message.png',imageActive: 'tabbar/tab_message.png',path: '/message'},]
<script>

1.7 补充-修改第三方UI组件库的样式

1.7.1 用插槽，插入自己的元素

  - 那么在自己的作用域中直接修改这个元素

1.7.2 全局定义一个变量，覆盖它默认变量的值

  - 缺点：全局修改

1.7.3 局部定义一个变量，覆盖它默认变量的值

  - 优点：局部修改   

1.7.4 把style中的scoped去掉，相当于对全局生效

  - 缺点：全局修改

1.7.5 直接找到对应的子组件选择器，进行修改

  - :deep(子组件中元素的选择器)进行修改- 直接修改CSS