vite-vue3

admin • • 5G

vite + vue3 使用文档(单页应用-超简单教程)

这些是使用 Vite + Vue 3 的基本步骤和概念，希望对你有所帮助！请记得在实际开发中参考相关的官方文档和示例以获取更详细的信息。

以下是使用 Vite + Vue 3 的简要使用文档：

1. 安装 Vite

  • 在终端中运行以下命令安装 Vite：npm install -g create-vite
  • 检查版本信息：vite -v 输出如：vite/4.3.5 win32-x64 node-v16.13.2

2. 初始化一个项目：

  • 使用 Vite 创建一个新项目：create-vite my-project --template vue
  • 进入项目目录：cd my-project
  • 安装项目依赖：npm install
  • 启动开发服务器：npm run dev
  • 可以看到启用了开发环境的地址如： Local: http://127.0.0.1:5173/
  • [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uh5F861r-1686036825597)(vite-vue3_files/1.jpg)]

3. 查看项目：以下是一个基本的 Vite + Vue 3 项目的目录树结构：

my-project
├── dist
├── node_modules
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── components
│   │   └── HelloWorld.vue
│   ├── App.vue
│   ├── main.js
├── .gitignore
├── package.json
├── README.md
└── vite.config.js

这是一个简单的示例，你可以根据自己的需求在该结构上进行扩展和修改。其中，重要的文件和目录包括：

  • dist: 构建后生成的文件夹，用于部署到服务器上。
  • public: 静态资源目录，包含 index.html 和其他公共文件。
  • src: 源代码目录，包含 Vue 组件、主应用程序文件和其他辅助文件。
  • src/components: 存放自定义组件的目录。
  • src/App.vue: 根组件，作为应用程序的入口点。
  • src/main.js: 主应用程序文件，用于初始化 Vue 应用程序和导入相关模块。
  • vite.config.js: Vite 的配置文件，用于自定义构建和开发服务器的行为。

这只是一个基本示例，实际项目中的目录结构可能会更加复杂，具体取决于你的项目需求和组织方式。

3.1 项目重点文件（夹）

  1. src/App.vue
    a. 使用了 <script setup> 详情查看文末：## 后记一<script setup>
    b. 在这个示例中，我们使用了<script setup> 区块，这是 Vue 3.2 中的一个新特性，它简化了组件中的 JavaScript 部分。
    c. 在 <script setup> 中，我们通过 import 语句导入了 HelloWorld 组件。
    d. template>：模板部分保持不变，包含了两个 img 标签，分别用于显示 Vite 和 Vue 的 logo 图片，并且在下方使用了 HelloWorld 组件，并传递了一个 msg 属性。
    e. <style scoped>：样式部分保持不变，使用了 scoped 属性将样式限定在组件内部。这些样式定义了 logo 类和 logo.vue 类的样式，包括 hover 时的效果。
    f. 它还演示了如何使用类选择器和 scoped 样式来定义样式，并在鼠标悬停时应用一些效果。
    g. 记得根据你的实际需求进行修改和扩展，这只是一个简单的示例。

  2. src/components/HelloWorld 组件

<script setup>
import { ref } from 'vue'

defineProps({
  msg: String,
})

const count = ref(0)
</script>

<template>
  <h1>{{ msg }}</h1>

  <div class="card">
    <button type="button" @click="count++">count is {{ count }}</button>
    <p>
      Edit
      <code>components/HelloWorld.vue</code> to test HMR
    </p>
  </div>

  <p>
    Check out
    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
      >create-vue</a
    >, the official Vue + Vite starter
  </p>
  <p>
    Install
    <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
    in your IDE for a better DX
  </p>
  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>

这个示例展示使用了 <script setup> 区块 。
在 <script setup> 中：
我们使用 import { ref } from ‘vue’ 导入了 ref 函数，用于创建响应式的数据。
使用 defineProps 定义了一个接受 msg 属性的组件属性。
创建了一个名为 count 的响应式变量，初始值为 0。

在<template> 中：
通过双花括号语法 {{ msg }}，在 <h1> 标签中显示了从父组件传递过来的 msg 属性的值。
<button> 标签上添加了点击事件 @click=“count++”，当按钮被点击时，count 的值会递增。
展示了一些静态内容，包括一个 <div>、一些 <p> 标签和超链接。

在 <style scoped> 中：
定义了一个类选择器 .read-the-docs，使文本显示为灰色。
这个示例展示了在单文件组件中使用 <script setup> 区块，通过导入函数和定义组件属性来实现逻辑和数据的处理。模板部分展示了如何在组件中使用属性、事件和静态内容。样式部分展示了如何使用 scoped 属性将样式限定在组件内部。

请根据你的项目需求进行修改和扩展，这只是一个简单的示例。

  1. src/components
    通过将组件文件放置在 src/components 目录下，你可以方便地在其他组件或页面中导入和使用这些组件。例如，你可以在 src/App.vue 或其他组件中使用 import 语句导入这些组件，然后在模板中使用它们。

这样的组件目录结构可以帮助你更好地组织和管理你的组件代码，并使其在项目中的不同部分中重复使用和维护。记得根据你的实际项目需求来组织和命名你的组件文件。

tips：如果不需要复杂的功能，可以不使用路由，状态管理等库

4. 通过注册路由访问生成的组件vue-router – 非必须使用

  • 安装router：npm install vue-router
  • src/router.js: 路由文件，定义应用程序的路由配置。
  • 在 src/components 目录下创建新的组件，比如 Home.vue About.vue。
  • 在 src 目录下创建一个新的路由文件，比如 router.js。
  • 在 router.js 中导入 Home.vue About.vue 组件，并设置路由路径。
  • 在 src/main.js 中导入并使用路由文件。
  • 现在你可以通过访问相应的路由路径来访问生成的组件。
// router.js
import { createRouter, createWebHistory } from 'vue-router';

// 导入你的组件
import Home from './components/Home.vue';
import About from './components/About.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

在main.js引入路由，并挂载到app

// main.js
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');

src/components Home组件

<template>
  <div>
    Home
  </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>

</style>

src/components About组件

<template>
  <div>
    About
  </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>

</style>

App.vue 新增路由渲染

<script setup>
import HelloWorld from './components/HelloWorld.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" />

  <!-- 新增 路由导航 -->
  <router-link to="/">Home</router-link> | 
  <router-link to="/about">About</router-link>

  <!-- 路由渲染位置 -->
  <router-view></router-view>
</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>

5. 使用状态管理：vue3 依旧可以使用vuex，但是官方启用了新的库pinia – 非必须使用

  • Pinia 是一个基于 Vue 3 的状态管理库，它提供了类似 Vuex 的 API，但是更加简单和直观。
  • Pinia 的使用方式与 Vuex 类似，但是它更加轻量级和易于使用。在使用 Pinia 时，可以通过定义 store 来管理应用程序的状态，并在组件中使用 useStore 函数来访问 store 中的状态和操作。
  • 要在 Vite + Vue 3 项目中安装和使用 Pinia 状态管理库，你可以按照以下步骤进行操作：

  1. 在你的项目根目录下打开终端或命令提示符。

  2. 运行以下命令使用 npm 安装 Pinia：

    npm install pinia

    或者，如果你使用的是 yarn 包管理器，可以运行以下命令：

    yarn add pinia

  3. 安装完成后，在你的项目中创建一个新的文件，例如 src/store/index.js，用于配置和导出 Pinia。

  4. 打开 src/store/index.js 文件，并添加以下内容：

    import { createPinia } from 'pinia';

const pinia = createPinia();

export default pinia;

    在这个示例中，我们导入了 createPinia 函数，用于创建和配置 Pinia 实例。然后，我们使用 createPinia() 创建了一个名为 pinia 的 Pinia 实例，并将其导出。

  5. 在主应用程序文件 src/main.js 中导入并使用 Pinia。打开 src/main.js 文件，并添加以下内容：

    import { createApp } from 'vue';
import App from './App.vue';
import pinia from './store';

const app = createApp(App);
app.use(pinia);
app.mount('#app');

    在这个示例中，我们导入了 createApp 函数和应用程序的根组件 App。然后，我们导入并使用了之前创建的 Pinia 实例 pinia，通过调用 app.use(pinia) 将 Pinia 插件安装到应用程序中。

  6. 现在，你可以在你的组件中使用 Pinia 进行状态管理。

    • 首先，在 src/store/counter.js 文件中定义你的 Pinia store。
import { defineStore } from 'pinia';
import { ref } from 'vue'
// 方式一
// export const useCounterStore = defineStore('counter', {
//   state: () => ({
//     count: 0,
//   }),
//   actions: {
//     increment() {
//       console.log('add')
//       this.count++;
//     },
//   },
// });

// 方式二 推荐 显然更符合vue3使用风格 简洁
export const useCounterStore = defineStore('counter', () => {
  const count = ref(0);
  const increment = () => {
    count.value++
  }

  return { count, increment }
})

在这个示例中，我们使用 defineStore 函数定义了一个名为 counter 的 store。在 state 部分，我们定义了一个名为 count 的状态变量。在 actions 部分，我们定义了一个名为 increment 的动作，用于增加 count 的值。

在你的组件中导入并使用 Pinia store。
counter.vue

    <template>
      <div>
        <h1>Count: {{ count }}</h1>
        <button @click="increment">Increment</button>
      </div>
    </template>
    
    <script setup>
    import { useCounterStore } from '../store/counter';
    import { ref } from 'vue';
    
    const counterStore = useCounterStore();
    
    const count = ref(counterStore.count);
    const increment = () => {
      counterStore.increment();
      count.value = counterStore.count;
    };
    </script>

在这个示例中，我们通过 import 语句导入了我们之前定义的 useCounterStore，并在 setup 函数中创建了一个名为 counterStore 的 store 实例。然后，我们通过返回对象的方式将 count 和 increment 绑定到组件的模板中。

现在，你可以在你的组件中使用 Pinia store 进行状态管理。通过在模板中访问和修改 store 中的状态和动作，可以实现组件之间的状态共享和交互。

6. 打包到服务器部署：

  • 在终端中运行以下命令构建项目：npm run build。
  • 构建完成后，你将在 dist 目录中获得一个打包好的项目。
  • 将 dist 目录中的文件上传到服务器上的合适位置。
  • 配置服务器以正确地提供静态文件。
  • 也可以把代码库拉到服务器打包到指定位置

7. 前后端 JSON 数据交互（fetch）：

  • 在组件中使用内置的 fetch 函数或第三方库（如 Axios）进行网络请求。
  • 例如，在组件的方法中使用 fetch 请求 JSON 数据，并使用 Promise 来处理响应。
  • 跨域 查看 后记二

list.vue

<script setup>
import { reactive } from 'vue';

const state = reactive({
  data: null,
});

const fetchData = async () => {
  try {
    const response = await fetch('/api/api/passwords');
    const jsonData = await response.json();
    state.data = jsonData;
  } catch (error) {
    console.error(error);
  }
};

fetchData();

</script>

这些是使用 Vite + Vue 3 的基本步骤和概念，希望对你有所帮助！请记得在实际开发中参考相关的官方文档和示例以获取更详细的信息。

后记一

script setup 是 Vue 3 Composition API 中一个新的标签,它允许你在模板中直接使用 Composition API 的变量、函数等。
在 Vue 2 中,如果我们想在模板中使用 JavaScript 变量或函数,需要先在 

<script>
export default {
  data() {
    return {
      name: 'John'
    }
  }
}
</script>

<template>
  <div>{{ name }}</div> 
</template>

而在 Vue 3 Composition API 中,我们可以使用 

<script setup>
const name = 'John'
</script>

<template>
  <div>{{ name }}</div> 
</template>

script setup 有以下特点:

  • 它独立于 <script> 标签, 可以同时使用
  • 在其中定义的变量、函数等可以直接在模板中使用,无需定义在 export 之下
  • 它执行在组件的 setup() 函数之前
  • 它不支持If语句等逻辑,主要用于组件配置
    举个例子:
<script>
import { ref } from 'vue'

export default {
  setup() {
    const name = ref('John')
  }
}
</script>
 
<script setup>
const age = 18
</script>

<template>
  <div>
    {{ name }} - {{ age }}
  </div>
</template>

在这个例子中:

  • name 是在 <script> 中通过 setup() 定义的,需要 export 后才能在模板中使用
  • age 是在 <script setup> 中定义的,可以直接在模板中使用
    所以总结来说,<script setup> 是 Vue 3 Composition API 带来的一个很实用的新语法,它允许在模板中直接使用 Composition API 的变量和函数等,使得编写组件更为方便快捷。

后记二 跨域代理配置 server.proxy

vite.config.js

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  // 配置代理
  server: {
    proxy: {
      '/api': {
        target: 'https://webtool.twoup.cn',
        changeOrigin: true,
        secure: false,
        rewrite: (path) => path.replace(/^/api/, ''),
      },
    }
  }
})

后记三 打包优化、别名（@）配置、jsx支持等

vite.config.js

import { fileURLToPath, URL } from 'node:url'
import compression from 'vite-plugin-compression'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

// install unplugin-vue-components unplugin-auto-import for element-plus
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    port: 3000,
    host: '0.0.0.0',
    cors: true,
    proxy: {
      '/api': {
              target: 'https://webtool.twoup.cn',
              changeOrigin: true,
              secure: false,
              rewrite: (path) => path.replace(/^/api/, ''),
            },
    }
  },
  plugins: [
    vue(),
    vueJsx(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
    compression({
      algorithm: 'gzip',
      ext: '.gz'
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    }
  },
  build: {
    sourcemap: false,
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString();
          }
        }
      }
    },
    /** 消除打包大小超过 500kb 警告 */
    chunkSizeWarningLimit: 1500,
    /** Vite 2.6.x 以上需要配置 minify: "terser", terserOptions 才能生效 */
    minify: "terser",
    /** 在打包代码时移除 console.log、debugger 和 注释 */
    terserOptions: {
      compress: {
        drop_console: false,
        drop_debugger: true,
        pure_funcs: ["console.log"]
      },
      format: {
        /** 删除注释 */
        comments: false
      }
    },
    /** 打包后静态资源目录 */
    assetsDir: "static"
  },
})

总结：

在 Vite + Vue 3 项目中，你可以按照以下步骤进行操作：

  1. 安装 Vite：通过命令行运行 npm init vite@latest 或 yarn create vite，选择 Vue 3 作为模板，并完成项目初始化。

  2. 安装 Vue Router：通过命令行运行 npm install vue-router@next 或 yarn add vue-router@next，安装 Vue Router 来进行路由管理。

  3. 创建路由：在 src 目录下创建一个名为 router 的文件夹，并在其中创建一个 index.js 文件。在 index.js 中使用 createRouter 函数创建路由实例，并配置路由映射。

  4. 注册路由：在 main.js 中导入并使用创建的路由实例。

  5. 创建组件：在 src 目录下创建一个名为 components 的文件夹，并在其中创建 Vue 组件文件。

  6. 组合使用组件：在需要使用组件的地方，通过 import 引入并在模板中使用。

  7. 打包部署：通过命令行运行 npm run build 或 yarn build，将项目打包为生产环境代码。将生成的构建文件部署到服务器上。

  8. 前后端 JSON 数据交互：使用 Fetch API 或其他 HTTP 请求库，在前端发送请求到后端，并处理后端返回的 JSON 数据。

  9. 配置代理：在 Vite 项目的根目录下创建一个 vite.config.js 文件，并在其中配置代理规则，将请求代理到指定的目标 URL。

以上是关于 Vite + Vue 3 的使用文档总结，包括环境搭建、路由管理、组件使用、打包部署、前后端数据交互和代理配置等方面的内容。根据这些步骤，你可以快速开始和开发 Vite + Vue 3 项目。记得根据你的实际需求和项目情况，进行适当的调整和配置。如果遇到问题，可以参考官方文档或向社区寻求帮助。祝你开发顺利！

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>