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 的专属状态管理库，它允许你跨组件或页面共享状态，更详细文档请访问官网地址 。它具备如下特性：