vue 创建项目及初始化开发环境

创建项目

打开cmd 命令工具、进入需要创建前端项目的文件目录中、执行创建Vue 项目命令

npm create vue

执行过程中，会提示你命名新项目、以及是否会开启一些诸如Typescript 和测试支持之类的可选功能、这里统一敲击回车键选择No即可、当你看到命令行提示done ,标识你已经创建好一个vue前端项目

项目目录说明

项目创建好了、进入项目、看下目录结构：

解释一下目录结构以及相关文件的作用：

node_modules: 项目依赖包文件夹，比如通过 npm install 包名安装的包都会放在这个目录下，因为现在还没有执行 npm install 命令，所以还未生成该文件夹；
public: 公共资源目录，用于存放公共资源、如favicon.ico图标等
index.html: 首页
package.json: 版本管理使用的文件
src: 核心文件目录，源码都放在这里面

进入src文件夹，目录如下：

assets: 静态资源目录，用于存放样式、图片、字体等
components: 组件文件夹，通用组件存放目录
App.vue: 主组件，也是入口文件。所有页面都是在app.vue下进行路由切换
main.js: 入口javaScript文件

核心文件说明

index.html:首页
main.js: 主js文件
App.vue:主组件
三者之间的关系如下：

当打开一个vue3 应用、首先看index.html文件、他是首页、代码如下：

再来看main.js文件：

最后看App.vue 组件代码

整合vue-router路由管理器

什么是Vue-router

vue Router 是vue.js 官方提供的路由管理器、他与vue.js 核心深度集成。让构建当夜应用变得轻而易举。

为什么要用Vue Router

在一个标准的单页应用中，仅有一个HTMl 页面被服务器发送到客户端。随后的页面内容都是通过javascipt动态替换生成的。这时候、就需要vue Router 来管理这也些页面的导航和组织

开始设置

在命令行中、执行如下命令，安装vue-router:

安装vue-router


npm install vue-router

配置Router

创建首页

在src 目录下创建/pages 文件夹、在此文件夹中存放页面相关的代码、然后/pages文件夹下创建index.vue首页文件、代码如下

设置路由配置

在src目录下、新建/router路由文件夹、用于存放路由相关代码，并在此文件下、新建index.js文件、代码如下：

上述代码中、我们先通过import 关键字导入了index.vue组件，以及vue-router路由中的相关方法。然后，我们定义了一个routes数组，用于统一声明所有路由、最后创建路由、并使用export default 关键字导出了router对象。

使用router-view 组件

<router-view> 是vue Routerd 的一个核心组件、他是一个功能性组件、其主要是根据当前的路由（URL）动态的渲染对应的组件、相当于是一个占位符、他会自动渲染与当前路径相匹配的组件

作用：

1、动态渲染组件： <router-view> 根据当前的 URL，自动渲染与当前路径匹配的组件。
2、嵌套路由：在有嵌套路由的情况下，可以用于渲染嵌套的子路由组件。

接下来我们需要在App.vue中添加该组件，用于动态渲染路由对应的组件：

将router 添加到 Vue 实例中

最后，想要路由生效、还需要打开/src/main.js文件、将router 导入并添加到Vueapp实例中、应用刚刚声明的路由、最终代码如下：

启动看效果

vite 配置路径别名

为什么要配置别名

上面在router/index.js 文件中引入index.vue组件时、格式是这样的


import Index from '../pages/frontend/index.vue'

通过.. 来指定上一级目录、然后在定位具体路径下，考虑一个大型项目中，我们经常需要这样的引用，当文件层级很深，那么代码可能会像下面这样：


import Button from '../../../components/Button.vue';

这种相对路径不易于管理和阅读。使用 alias，我们可以将路径简化为：

import Button from '@/components/Button.vue';

这样一来不仅路径更短、更明确，而且移动文件时无需改动 import 路径。

整合tailwindCss

什么是tailwindCss?

tailwind Css 是一个高度可定制的、使用工具优先的css框架、它使你能够通过组合小型、单一用途的类来构建现代网站界面，而无需些任何css。

为什么使用Tailwind Css

1、高度可定制：Tailwind CSS 提供了一整套预设样式，但所有这些都是完全可配置的。
2、实用工具优先：它允许你通过在 HTML 中组合类，而不是自定义 CSS，来迅速构建响应式页面。
3、优化生产环境：Tailwind CSS 在生产环境中会自动移除未使用的样式，这有助于保持 CSS 文件大小最小。

开始安装

执行如下命令、开始安装Tailwind Css


npm install -D tailwindcss postcss autoprefixer

此命令会在你的项目中安装三个依赖、他们分别是：

1、tailwindcss: TailwindCss 框架本身
2、postcss: 一个用于装换css 的工具
3、autoperfixer: 一个postCss 插件、用于自动添加浏览器供应商前缀到CSS 规则中、确保跨浏览器的兼容性

然后再执行如下命令：


npx tailwindcss init -p

此命令用于生成tailwindcss.config.js 和postcss.config.js配置文件

配置模板路径

在tailwindcss.config.js文件中添加所有模板文件的路径


/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
  
}

将tailwindCss 指令添加到css 文件中

修改main.js 文件、引入main.css:

然后编辑main.css 文件，清空里面初始化项目时自动生成的css代码、在添加如下代码：


@tailwind base;
@tailwind components;
@tailwind utilities;

taillwindCss 官网

整合TailwindCss 组件库：flowbite

Flowbite 是一个基于 Tailwind CSS 创建的组件库，旨在帮助开发者快速构建现代、响应式的 Web 应用界面

开始整合

Flowbite 是基于 Tailwind CSS 构建，因此我们需要先安装 Tailwind CSS、PostCSS 和 Autoprefixer，这项工作在上一小节已经完成了。这里，我们只需要安装 Flowbite 本身就行了。

安装Flowbite

执行如下命令安装Flowbite


npm install flowbite

在tailwindCss.config.js文件中添加flowbite插件


module.exports = {
	省略...
    plugins: [
        require('flowbite/plugin')
    ]

}

另外、还需要在tailwindcss.config.js 文件中、添加js相关的文件、因为页面交互需要js


module.exports = {

    content: [
        "./node_modules/flowbite/**/*.js"
    ]

}

使用flowbite


<script setup>
import { onMounted } from 'vue'
import { initCollapses } from 'flowbite'

// 初始化 flowbit 相关组件
onMounted(() => {
    initCollapses();
})
</script>

解释一下 <script> 中的代码：

onMounted 是一个生命周期钩子（lifecycle hook）。生命周期钩子是 Vue 组件在其生命周期的不同阶段可以调用的函数。onMounted 钩子在组件被挂载到 DOM 之后立即调用。这意味着，当此钩子被触发时，你可以安全地访问和操作组件的 DOM 元素；

initCollapses() 用于初始化 flowbite 的 collapse 组件，有了它，当页面在移动端展示时，点击菜单收缩按钮，可查看隐藏的菜单选项，

整合 element Plus 组件库

安装

执行如下命令、来安装element plus :


npm install element-plus --save

自动导入

Element Plus 有很多组件，而我们实际项目中，并不是每个组件都会被用到。所以，在生产级项目中，比较推荐按需导入组件，而不是在打包的时候，一次性将所以组件都打包进去，导致相关包非常大，页面初次加载很慢的情况发生。
想要实现按需导入组件，你需要安装unplugin-vue-components和unplugin-auto-import 这两款插件：


npm install -D unpingin-vue-components unpingin-auto-import

然后将下列代码插入到vite 的配置文件vite.config.js中：


import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

配置好后、需要什么element 组件、就会自动导入进来

整合全局状态管理库pinia

Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态，更详细文档请访问官网地址。它具备如下特性：

💡 所见即所得：与组件类似的 Store。其 API 的设计旨在让你编写出更易组织的 store；
🔑 类型安全：类型可自动推断，即使在 JavaScript 中亦可为你提供自动补全功能！
⚙️ 开发工具支持：不管是 Vue 2 还是 Vue 3，支持 Vue devtools 钩子的 Pinia 都能给你更好的开发体验。
🔌 可扩展性：可通过事务、同步本地存储等方式扩展 Pinia，以响应 store 的变更。
🏗 模块化设计：可构建多个 Store 并允许你的打包工具自动拆分它们。
📦 极致轻量化: Pinia 大小只有 1kb 左右，你甚至可能忘记它的存在！

安装pinia


npm install pinia

创建Store

Pinia 使用 store 来管理应用程序的状态。我们可以在项目中创建一个或多个 store，每个 store 对应一个特定的状态域。接下来，我们在项目的 /src 目录下，创建一个 /stores 文件夹，用于统一放置状态管理相关功能代码：

示例

实现点击菜单收缩、展开图标，即可让左侧菜单栏动态的展开、收缩。这就将菜单的宽度定义为一个全局状态。所以在/store 文件夹中、先建一个menu.js 文件、用于声明菜单相关的全局状态，代码如下：


import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useMenuStore = defineStore('menu', () => {
  // 左边栏菜单默认宽度
  const menuWidth = ref("250px")
  
  // 展开或伸缩左边栏菜单
  function handleMenuWidth() {
      menuWidth.value = menuWidth.value == '250px' ? '64px' : '250px'
  }
  
  return { menuWidth, handleMenuWidth }
})

上述代码中，我们先是引入了 pinia 的defineStore() 函数，它用户声明 store。它的第一个参数是个字符串，通过它定义了一个名为 menu 的全局 store, 注意，名称在应用中必须是唯一的。另外，将返回的函数命名为 use... 这个格式，它符合组合式函数风格的约定。

defineStore() 的第二个参数可接受两类值：Setup 函数或 Option 对象。上面的代码中，我们在函数内声明了一个 menuWidth 菜单宽度的全局变量，并且是响应式的；然后还定义了一个展开/收缩菜单栏的方法，在该方法中，若当前菜单宽度为 250px 则赋值为 64px, 表示收缩；反之，则展开。最后，将 menuWidth 变量和 handleMenuWidth 方法返回，以供外界调用。

使用

再需需要使用到全局状态时按如下引入


import { useMenuStore } from "@/stores/menu"

// 引入了菜单的store
const menuStore = useMenuStore();

组件上就可以直接使用定义的变量和方法


使用变量
 <Fold v-if="menuStore.menuWidth == '250px'" />

使用方法
const handleMenuWidth =()=>{
    //动态设置 菜单的宽度大小
    menuStore.handleMenuWidth()
}

注册pinia

要想使用Pinia 还需要再main.js文件中来注册Pinia 添加如下代码


// 引入全局状态管理 Pinia
import { createPinia } from 'pinia'

const pinia = createPinia()

// 应用 Pinia
app.use(pinia)

pinia 数据持久化

1、保持用户登录状态：在许多应用程序中，用户的登录状态是关键数据。通过将用户的身份验证令牌或用户名等信息保存在本地存储中，用户可以在关闭浏览器或刷新页面后保持登录状态，而无需重新登录。
2、保存用户设置和偏好：用户可能会在应用程序中进行各种设置和配置，例如选择应用程序的主题、语言或其他偏好设置。通过将这些设置保存在本地存储中，用户可以在以后的会话中保留其个性化设置。
3、减少服务器请求：如果某些数据需要在多个用户会话之间共享，将这些数据保存在本地存储中可以减少对服务器的请求。这可以提高应用程序的性能，减少服务器负载，并提供更快的用户体验。
4、离线访问：数据持久化还使应用程序具备一定程度的离线访问能力。用户可以在没有互联网连接的情况下访问以前保存的数据。

安装插件


npm i pinia-plugin-persistedstate

编辑main.js文件、将插件添加到pinia示例上


// 省略...

// 引入全局状态管理 Pinia
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

// 省略...

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

// 省略...

安装好插件我们来看看如何使用持久化


import { defineStore  } from 'pinia'
import { ref } from 'vue'

export const useMenuStore = defineStore('menu',()=>{
    // 左边菜单栏默认宽度
    const menuWidth = ref("250px");

    function handleMenuWidth(){
        menuWidth.value = menuWidth.value == '250px' ?'64px':'250px'
    }
    return {menuWidth,handleMenuWidth}
},
{
    // 开启持久化
    persist:true
})

使用起来也非常简单，添加 persist: true 声明后，这个 store 就会把对应的数据存储到 Local Storage 中.

封装 Pinia 相关代码

这里我们可以将 Pinia 实例初始化、持久化插件挂载相关的代码统一抽出来，放到一个文件中来管理。在 /stores 文件夹下，新建 index.js 文件，将 main.js 中和 Pinia 相关的代码抽取出来


// 引入全局状态管理 Pinia
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
// 持久化插件
pinia.use(piniaPluginPersistedstate)

// 暴露出去
export default pinia

修改main.js



// 引入全局状态管理 Pinia
import pinia from '@/stores'

// 应用

app.use(pinia)

posted @ 2024-07-26 15:12 startscorpio 阅读(1) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部