【星海随笔】vue+vite +antd+Pinia+ve-plus

活跃的煤矿打工人

已于 2024-07-11 10:04:29 修改

阅读量881

点赞数 17

文章标签： vue.js 前端 javascript

于 2024-06-28 11:44:26 首次发布

本文链接：https://blog.csdn.net/weixin_41997073/article/details/140036185

版权

开头问一个问题，我发现有的人粉丝是点赞数的好几倍，可能和必须关注他才能阅读他的文章有关。
所以问一下怎么设置为关注才能查看该文章。

screen -ls #查看 id 列表
screen -S <session_name> # 创建一个会话
screen -R <session_id> # 根据会话 ID 访问会话
Ctrl + a + d # 将进程后台执行
exit # 退出

vite

vite不需要专门的安装，有的npm和yarn 一般就会有vite了，这个是 vue3 携带的功能, 增加了很多 XML 类型功能。可前端区域更新，极大的减少了性能消耗。

yarn create vite

cd vite-project              # 切换到项目目录
yarn                         # 安装项目的全部依赖
yarn dev                     # 启动服务

yarn会读取当前项目的package.json文件中的命令配置，找到真正的命令并执行。
Vue 3项目的package.json文件中的命令配置如下。

{
  "name": "vite-project-demo",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.4.29"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.5",
    "vite": "^5.3.1"
  }
}

dev是vite的别名，build是vite build的别名，preview是vite preview的别名
实际执行的命令是yarn vite。

使用yarn create命令创建项目

yarn create vite<项目名称>--template<模板名称>
yarn create vite hello-vite --template vue

nginx配置

server {
        listen 80;
        server_name vue.example.com;

    location / {
        proxy_pass http://localhost:5173/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        proxy_connect_timeout 60s;
        proxy_send_timeout 60s;
        proxy_read_timeout 60s;
    }
}

下面简要介绍Vue 3项目的目录结构中各个目录和文件的作用，具体如下。

• vscode：存放VS Code编辑器的相关配置。

• node_modules：存放项目的各种依赖和安装的插件。

• public：存放不可编译的静态资源文件，当进行项目构建时，该目录下的文件会被复制到dist目录，该目录下的文件需要使用绝对路径访问。

• src：源代码目录，保存开发人员编写的项目源代码。

• src\assets：存放可编译的静态资源文件，例如图片、样式文件等。该目录下的文件需要使用相对路径访问。

• src\components：存放单文件组件，即.vue文件。

• src\components\HelloWorld.vue：一个名称为HelloWorld的单文件组件。

• src\App.vue：项目的根组件。

• src\main.js：项目的入口文件，用于创建Vue应用实例。

• src\style.css：项目的全局样式表文件。

• gitignore：向Git仓库上传代码时需要忽略的文件列表。

• index. html：默认的主渲染页面文件，同时也是页面的入口文件。

• package.json:包配置文件。

• README.md：项目使用说明文件。

• vite.config.js：存放Vite的相关配置。

• yarn.lock：存储每一个依赖项的安装版本，在使用yarn安装、升级、卸载依赖时，会自动更新yarn.lock文件。

此外，当执行了yarn build命令后，在项目目录中会出现dist目录，该目录中保存的是项目构建后的文件。

Vue 3项目的运行过程

使用Vite构建Vue 3项目后，当执行yarn dev命令启动服务时，项目就会运行起来，该项目会通过src\main.js文件将src\App.vue组件渲染到index.html文件的指定区域。

src\App.vue文件

Vue 3项目是由各种组件组成的，src\App.vue文件是项目的根组件。在根组件中可以引用其他组件，从而显示其他组件的内容。

index.html文件

index.html文件是页面的入口文件，该文件中预留了用于被src\main.js文件中的Vue应用实例所控制的区域。

src\main.js文件

src\main.js文件是项目的入口文件，该文件创建了Vue应用实例。Vue应用实例是Vue项目工作的基础，每个Vue项目都是从创建Vue应用实例开始的。

在 App.vue 文件会被作为一个小的组件进行调用，当你使用 Vue CLI、Vite 或其他现代前端构建工具时，这些工具通常会自动为你设置 Vue 实例。这些工具会在项目的入口文件（如 main.js 或 main.ts）中创建 Vue 实例，并将 App.vue 作为根组件挂载到 DOM 上。
这个组件可以在 Vue 应用的其他部分被引入和使用。

antd

yarn cache clean
yarn add antd
yarn add babel-plugin-import --dev

Pinia

npm install pinia

在基础vue+yarn项目下修改入口文件

该文件的在 index.html 中导入的vue入口文件

index.html

  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>

main.js

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

import { createPinia } from 'pinia'

const app = createApp(App)
const pinia = createPinia()
app.use(pinia)
app.mount('#app')  // 只保留这一次挂载
//
//createApp(App).mount('#app')
//

在项目的src/stores（或你选择的任何目录）中，你可以定义多个store来管理不同的状态。每个store都是一个独立的JavaScript或TypeScript文件，通过defineStore函数来定义。

// src/stores/user.js  
import { defineStore } from 'pinia'  
 
export const useUserStore = defineStore('user', {  
  state: () => ({  
    name: 'John Doe',  
    age: 30  
  }),  
  getters: {  
    // 定义getters  
  },  
  actions: {  
    // 定义actions  
  }  
})

如何使用

// 例如在 src/components/SomeComponent.vue 中  
<script setup>  
import { useUserStore } from '@/stores/user'  
  
const userStore = useUserStore()  
  
// 现在你可以使用 userStore 了  
</script>

设置@别名

@ 符号通常被配置为一个别名（alias），它指向 src 目录
如果 Vue 项目的根目录是 /my-vue-project，那么 __dirname 将是 /my-vue-project
如果在项目外执行yarn dev 默认将会报错
error Couldn’t find a package.json file in “/root/vue/vite”

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import path from 'path'; // 导入 path 模块
//

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'), // 使用 path.resolve 来设置 @ 别名
    },
  },
});

等待安装完成后，Pinia及其依赖项将被添加到项目的node_modules目录，并在package.json文件中列出。

vite项目中，入口为 index.html ，后衔接 main.js 后嵌入 xxxx.vue

App.vue

其中的 / 符号在 vite 中默认是 public 目录

<script setup>
import HelloWorld from './components/HelloWorld.vue'
//<!--import 2223 from './components/2223.vue'-->
</script>

<template>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" />
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>