首页手记 Vue3+Vite项目实战：新手入门教程

Vue3+Vite项目实战：新手入门教程

标签：

前端工具 Vue.js

概述

本文将详细介绍如何使用Vue3和Vite创建项目，并涵盖Vue3的基本概念、组件化开发、路由配置以及状态管理等内容。此外，文章还会讲解如何使用Vite进行快速开发和热更新，并最终部署Vue3+Vite项目到服务器。

Vue3基础入门

Vue3简介

Vue.js 是一个用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库专注于视图层，同时它也不仅仅是纯粹的视图层——它同时拥有简单的模板语法和响应式系统。Vue 3 是 Vue 的最新版本，它带来了许多新特性和改进，包括更小的核心库、改进的响应式系统、更好的性能和更好的开发者体验。

Vue3主要特性

更小的核心库
更好的响应式系统
更好的性能
更好的开发者体验
改进的模板编译器

Vue3项目搭建

创建Vue3项目

使用 Vue CLI 创建 Vue 3 项目。

安装 Vue CLI（如果尚未安装）：

npm install -g @vue/cli

使用 Vue CLI 创建 Vue 3 项目：

vue create my-vue3-project

在创建过程中，选择 Manually select features 选项，并选择 Progressive Web App 和 Router。然后选择 Vue 3 版本。

vue add router

使用 Vite 创建 Vue3项目

Vite 是一个由 Vue.js 的作者尤雨溪开发的下一代前端构建工具，基于原生 ES 模块，使用开发服务器和 Webpack 相似的模块解析技术，使开发阶段的构建非常快速。

首先安装 Vite CLI：

npm install -g create-vite

使用 Vite 创建 Vue 3 项目：

create-vite my-vue3-vite-project --template vue

创建完成后，进入项目目录并启动开发服务器：

cd my-vue3-vite-project
npm run dev

Vue3基本概念与使用

Vue实例

Vue 实例是一个 Vue 对象，它被用来创建 Vue 应用程序。你可以通过实例来访问 Vue 实例的属性和方法。new Vue() 创建一个 Vue 实例。

示例代码：

import { createApp } from 'vue';

const app = createApp({
  data() {
    return {
      message: 'Hello, Vue3!'
    };
  }
});

app.mount('#app');

Vue组件

Vue 组件是 Vue 应用程序的基本构建单元。每个组件都有自己的视图和逻辑，可以重用并嵌套。

示例代码：

import { createApp } from 'vue';

const app = createApp({
  components: {
    hello: {
      template: `<div>Hello, {{name}}!</div>`,
      props: ['name']
    }
  }
});

app.mount('#app');

Vue指令

Vue 指令是用于在 HTML 元素上定义自定义属性的特殊属性，以实现特定的行为。常见的指令有 v-if、v-for、v-bind 等。

示例代码：

<div id="app">
  <div v-if="isAuthenticated">Hello, {{ user.name }}</div>
  <div v-else>Please log in.</div>
</div>

import { createApp } from 'vue';

const app = createApp({
  data() {
    return {
      isAuthenticated: true,
      user: {
        name: 'John Doe'
      }
    };
  }
});

app.mount('#app');

Vue样式

Vue 允许在模板中内联编写样式，也可以使用 CSS 文件导入到 Vue 组件中。

示例代码：

<template>
  <div class="container">
    <div class="box" :class="{ 'is-active': isActive }">Hello, Vue!</div>
  </div>
</template>

<style scoped>
.container {
  width: 100%;
  text-align: center;
}

.box {
  background-color: #ccc;
  padding: 20px;
}

.is-active {
  background-color: #66cc33;
}
</style>

<script>
import { createApp } from 'vue';

const app = createApp({
  data() {
    return {
      isActive: true
    };
  }
});

app.mount('#app');
</script>

Vite简介与项目初始化

Vite快速上手

Vite 是一个由 Vue.js 的作者尤雨溪开发的下一代前端构建工具。它基于原生 ES 模块，使用开发服务器和 Webpack 相似的模块解析技术，使开发阶段的构建非常快速。

Vite 特点

基于原生 ES 模块
开发阶段无需打包，直接访问 .js 和 .css 文件
零配置启动开发服务器
即时热更新（Hot Module Replacement，HMR）

使用Vite创建Vue3项目

使用 Vite 创建 Vue 3 项目时，需要安装 Vite CLI 和 Vue 3 依赖。

npm install -g create-vite
npm install vue@next

创建项目并启动开发服务器：

create-vite my-vue3-vite-project --template vue
cd my-vue3-vite-project
npm run dev

Vite配置文件详解

Vite 的配置文件是 vite.config.js。默认情况下，Vite 将自动配置大部分配置。但是，您可以根据需要自定义配置。

示例配置代码：

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

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000,
    open: true
  },
  build: {
    outDir: 'dist'
  }
});

Vite插件

Vite 支持使用插件来扩展功能。例如，@vitejs/plugin-vue 插件用于处理 Vue 文件。

示例代码：

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

export default defineConfig({
  plugins: [vue()]
});

Vue3项目实战：组件与路由

组件化开发

Vue 中，组件是可重用的 Vue 实例，具有自己的视图和逻辑。组件可以嵌套，形成复杂的界面。

Vue组件的基本结构

组件通常包含三部分：HTML 结构、样式和 JavaScript 逻辑。

示例代码：

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      title: 'Hello, Component!',
      content: 'This is a Vue component.'
    };
  }
};
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

Vue组件的注册与使用

组件可以在其他 Vue 实例（父组件）中使用。可以通过全局注册或局部注册的方式。

示例代码：

// 全局注册
import MyComponent from './MyComponent.vue';

const app = createApp({
  components: {
    MyComponent
  }
});

// 局部注册
import MyComponent from './MyComponent.vue';

const app = createApp({
  components: {
    MyComponent
  }
});

Vue Router基础

Vue Router 是 Vue.js 官方的路由管理器。它允许你定义不同 URL 的路由，以及在这些路由之间进行导航。

Vue Router的安装与配置

安装 Vue Router：

npm install vue-router@next

配置 Vue Router：

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
});

const app = createApp({
  router,
  template: `
    <div>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
      <router-view></router-view>
    </div>
  `
});

app.use(router);
app.mount('#app');

Vue Router的导航守卫

Vue Router 提供了导航守卫，可以在路由切换前后进行一些逻辑处理。

示例代码：

import { createRouter, createWebHistory } from 'vue-router';
import Home from './components/Home.vue';

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

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

router.beforeEach((to, from, next) => {
  console.log(`Navigating from ${from.path} to ${to.path}`);
  next();
});

实战：动态路由配置

动态路由可以根据不同的数据动态生成路由。

示例代码：

import { createRouter, createWebHistory } from 'vue-router';
import Post from './components/Post.vue';

const routes = [
  { path: '/posts/:id', component: Post }
];

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

const app = createApp({
  router,
  template: `
    <div>
      <router-link v-for="post in posts" :key="post.id" :to="`/posts/${post.id}`">
        {{ post.title }}
      </router-link>
      <router-view></router-view>
    </div>
  `,
  data() {
    return {
      posts: [
        { id: 1, title: 'Post 1' },
        { id: 2, title: 'Post 2' }
      ]
    };
  }
});

app.use(router);
app.mount('#app');

组件化开发案例

使用 Vue Router 和组件化开发，可以创建一个简单的博客应用。

示例代码：

<!-- Home.vue -->
<template>
  <div>
    <h1>Home</h1>
    <router-link to="/posts/1">Post 1</router-link>
    <router-link to="/posts/2">Post 2</router-link>
  </div>
</template>

<script>
export default {
  name: 'Home'
};
</script>

<!-- Post.vue -->
<template>
  <div>
    <h1>Post</h1>
    <p>{{ post.title }}</p>
    <p>{{ post.content }}</p>
  </div>
</template>

<script>
export default {
  name: 'Post',
  props: ['id'],
  data() {
    return {
      post: {}
    };
  },
  created() {
    this.fetchPost();
  },
  methods: {
    async fetchPost() {
      // 模拟从服务器获取数据
      const response = await fetch(`/api/posts/${this.id}`);
      const data = await response.json();
      this.post = data;
    }
  }
};
</script>

<!-- App.vue -->
<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/posts/1">Post 1</router-link>
    <router-link to="/posts/2">Post 2</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
import Home from './components/Home.vue';
import Post from './components/Post.vue';

export default {
  name: 'App',
  components: {
    Home,
    Post
  }
};
</script>

Vue Router配置文件示例

import { createRouter, createWebHistory } from 'vue-router';
import Home from './components/Home.vue';
import Post from './components/Post.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/posts/:id', component: Post }
];

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

export default router;

Vite与Vue3中的开发工具

Webpack与Vite的区别

Webpack

Webpack 是一个模块打包工具，它能处理多种资源文件，包括 JavaScript、CSS、图片等。
Webpack 需要配置多个配置文件，如 webpack.config.js。
开发过程中，Webpack 需要打包整个应用，启动时间较长。

Vite

Vite 是一个基于 ES 模块的开发服务器，它在开发过程中不需要打包整个应用，启动速度快。
Vite 使用原生 ES 模块，可以更快地加载和解析文件。
Vite 可以通过插件扩展功能，例如 @vitejs/plugin-vue。

Vite开发工具使用

开发服务器设置

Vite 的开发服务器可以通过配置文件中的 server 配置项进行设置。

示例代码：

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

export default defineConfig({
  server: {
    port: 3000,
    open: true
  }
});

热更新（HMR）

Vite 默认支持热更新，当文件发生变化时，会自动更新页面。

示例代码：

import { createApp } from 'vue';

const app = createApp({
  data() {
    return {
      message: 'Hello, Vue3!'
    };
  }
});

app.mount('#app');

Vite插件开发

Vite 插件可以扩展 Vite 的功能。例如，@vitejs/plugin-vue 用于处理 Vue 文件。

示例代码：

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

export default defineConfig({
  plugins: [vue()]
});

实战：使用Vite进行热更新

热更新配置

在 vite.config.js 中配置热更新。

示例代码：

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

export default defineConfig({
  plugins: [vue()],
  server: {
    hmr: true
  }
});

热更新示例

在项目中使用热更新功能，当代码或样式改变时，页面会自动刷新。

示例代码：

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      message: 'Hello, Vite!'
    };
  }
};
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

Vue3项目实战：状态管理与API请求

Vuex简介与使用

Vuex 是 Vue.js 的状态管理库，用于在大型单页应用中管理共享状态。它是一个专为 Vue.js 应用程序设计的状态管理模式。

Vuex安装与配置

安装 Vuex：

npm install vuex@next

配置 Vuex：

import { createStore } from 'vuex';

const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  }
});

const app = createApp({
  store,
  template: `
    <div>
      <p>{{ count }}</p>
      <button @click="increment">Increment</button>
    </div>
  `,
  methods: {
    increment() {
      this.$store.dispatch('increment');
    }
  }
});

app.use(store);
app.mount('#app');

Vuex状态管理案例

示例代码：

import { createStore } from 'vuex';

const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  }
});

const app = createApp({
  store,
  template: `
    <div>
      <p>{{ count }}</p>
      <button @click="increment">Increment</button>
    </div>
  `,
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    increment() {
      this.$store.dispatch('increment');
    }
  }
});

app.use(store);
app.mount('#app');

Axios与Fetch API请求

Axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 Node.js 中。它支持拦截请求和响应，转换请求和响应数据，自动转换 JSON 数据，支持浏览器和 Node.js。

安装 Axios：

npm install axios

使用 Axios 发送请求：

示例代码：

import axios from 'axios';

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

Fetch API

Fetch API 是一种用于获取资源的方法，它返回一个 Promise，该 Promise 会解析为 Response 对象。Fetch API 是浏览器原生支持的。

示例代码：

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

实战：结合Vuex管理应用状态

Vuex结合API请求

示例代码：

import { createStore } from 'vuex';
import axios from 'axios';

const store = createStore({
  state: {
    posts: []
  },
  actions: {
    fetchPosts({ commit }) {
      axios.get('https://api.example.com/posts')
        .then(response => {
          commit('setPosts', response.data);
        })
        .catch(error => console.error(error));
    }
  },
  mutations: {
    setPosts(state, posts) {
      state.posts = posts;
    }
  }
});

const app = createApp({
  store,
  template: `
    <div>
      <h1>Posts</h1>
      <ul>
        <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
      </ul>
      <button @click="fetchPosts">Fetch Posts</button>
    </div>
  `,
  methods: {
    fetchPosts() {
      this.$store.dispatch('fetchPosts');
    }
  },
  computed: {
    posts() {
      return this.$store.state.posts;
    }
  }
});

app.use(store);
app.mount('#app');

结合API请求的应用案例

示例代码：

import { createStore } from 'vuex';
import axios from 'axios';

const store = createStore({
  state: {
    posts: []
  },
  actions: {
    fetchPosts({ commit }) {
      axios.get('https://jsonplaceholder.typicode.com/posts')
        .then(response => {
          commit('setPosts', response.data);
        })
        .catch(error => console.error(error));
    }
  },
  mutations: {
    setPosts(state, posts) {
      state.posts = posts;
    }
  }
});

const app = createApp({
  store,
  template: `
    <div>
      <h1>Posts</h1>
      <ul>
        <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
      </ul>
      <button @click="fetchPosts">Fetch Posts</button>
    </div>
  `,
  methods: {
    fetchPosts() {
      this.$store.dispatch('fetchPosts');
    }
  },
  computed: {
    posts() {
      return this.$store.state.posts;
    }
  }
});

app.use(store);
app.mount('#app');

Vue3+Vite项目部署与优化

项目构建与部署

项目构建

使用 Vite 构建项目：

npm run build

构建后的文件将被输出到 dist 目录。

项目部署

将构建后的文件部署到服务器。

示例代码：

scp -r dist/* user@server:/path/to/deploy

静态网站托管

可以将构建后的文件托管在静态网站托管服务，如 GitHub Pages、Netlify、Vercel 等。

示例代码：

vercel

性能优化技术

代码拆分

代码拆分可以减少初始加载时间，只在需要时加载额外的模块。

示例代码：

import { createApp } from 'vue';
import App from './App.vue';
import Home from './components/Home.vue';
import About from './components/About.vue';

const app = createApp(App);

app.component('Home', Home);
app.component('About', About);

app.mount('#app');

自动优化

Vite 可以自动优化代码，例如内联和压缩 CSS、JavaScript 文件等。

启用缓存

启用缓存可以减少重复加载相同资源的时间。

示例代码：

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

export default defineConfig({
  build: {
    cacheDir: 'dist/.cache'
  }
});

实战：发布Vue3+Vite项目到服务器

发布步骤

构建项目：

npm run build

部署到服务器：

scp -r dist/* user@server:/path/to/deploy

设置服务器配置文件：

nano /etc/nginx/sites-available/default

部署案例

示例代码：

# 构建项目
npm run build

# 部署到服务器
scp -r dist/* user@server:/path/to/deploy

# 设置Nginx配置
sudo nano /etc/nginx/sites-available/default

server {
  listen 80;
  server_name example.com;
  root /path/to/deploy;
  index index.html;

  location / {
    try_files $uri $uri/ /index.html;
  }
}

项目部署后的访问

部署完成后，可以通过服务器域名或 IP 地址访问项目。

示例代码：

http://example.com

通过以上步骤，可以成功发布并部署 Vue3+Vite 项目到服务器，并确保项目在生产环境中正常运行。

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

慕码人8056858

手记
篇

粉丝

350

获赞与收藏

1323

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 30583 343

网络编程入门教程

20个小节 12561 237

Pandas 入门教程

25个小节 18499 337

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

Vue3+Vite项目实战：新手入门教程

Vue3主要特性

创建Vue3项目

使用 Vite 创建 Vue3项目

Vue实例

Vue组件

Vue指令

Vue样式

Vite 特点

Vite配置文件详解

Vite插件

组件化开发

Vue组件的基本结构

Vue组件的注册与使用

Vue Router基础

Vue Router的安装与配置

Vue Router的导航守卫

实战：动态路由配置

组件化开发案例

Vue Router配置文件示例

Webpack

Vite

开发服务器设置

热更新（HMR）

Vite插件开发

热更新配置

热更新示例

Vuex安装与配置

Vuex状态管理案例

Axios

Fetch API

Vuex结合API请求

结合API请求的应用案例

项目构建

项目部署

静态网站托管

代码拆分

自动优化

启用缓存

发布步骤

部署案例

项目部署后的访问

阅读免费教程