从基础学习 vite + vue3 开发环境初始化与核心概念

Vite2.x + Vue3.x 开发利器，详解常用基操

一、项目起航

踏入 Vite2.x + Vue3.x 的世界，首先需要安装必要的依赖项。使用 npm install -g @vitejs/create-vue 安装项目创建工具。然后，新建项目，例如 create-vue vite-vue3-app。进入项目目录 cd vite-vue3-app，启动项目 npm run dev，即可开启你的开发之旅。

二、配置指南

项目的配置信息集中在 vite.config.js 文件中。你可以在这里定制构建过程、设置代理服务器，让开发更加顺畅。

三、调试与探索

打开浏览器访问 http://localhost:3000，预览你的项目。在浏览器的控制台中，你可以输出信息、检查变量值，深入了解程序运行情况。

四、项目结构一览

项目目录结构清晰简洁：

• node_modules/：依赖库
• package-lock.json 和 package.json：项目依赖和配置
• src/：源代码目录
  • App.vue：应用入口组件
  • components/：组件目录
  • pages/：页面目录
  • router/：路由目录
  • main.js：主入口文件
• vite.config.js：项目配置
• README.md：项目文档

五、路由管理轻松上手

使用 npm install vue-router@4 安装路由依赖。在 main.js 文件中配置路由规则，在 App.vue 文件中使用 router-view 实现页面切换。

六、生命周期掌握要点

组件和实例的生命周期贯穿于整个应用程序。理解这些生命周期有助于你在不同阶段执行特定操作。

七、数据绑定双向畅通

利用插值表达式、v-model 指令和事件处理，实现组件和数据之间的双向绑定，让数据操作更加便捷。

八、组件通信妙法

组件之间的通信至关重要。父组件通过 props 传递数据，兄弟组件通过事件总线进行交流，实现数据共享。

九、状态管理利器

Vuex 和 Pinia 是强大的状态管理工具。使用 Vuex 集中管理状态，或者使用 Pinia 进行模块化状态管理，让你的应用井然有序。

结论

Vite2.x + Vue3.x 的常用基操为开发提供了便利和高效。掌握这些基操，你可以从容应对项目开发中的各种挑战。愿你尽情探索，打造出色的 Web 应用。

常见问题解答

1. 如何在 Vite2.x 项目中添加 CSS 预处理器？

   • 在 vite.config.js 文件中，配置 css 字段，添加预处理器。例如，使用 Sass 时：

   import { defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
   
   export default defineConfig({
     plugins: [vue()],
     css: {
       preprocessorOptions: {
         scss: {
           additionalData: '@import "styles/variables.scss";'
         }
       }
     }
   })
   

2. 如何进行跨组件通信？

   • 通过事件总线。在根实例中注册事件监听器，在需要通信的组件中触发事件。

   // 根实例
   export default {
     created() {
       this.$root.$on('send-message', (message) => {
         // 处理消息
       })
     }
   }
   
   // 子组件
   export default {
     methods: {
       sendMessage() {
         this.$root.$emit('send-message', '消息内容')
       }
     }
   }
   

3. 如何实现代码分割？

   • 在路由配置中，将组件指定为动态导入，实现按需加载。

   import { createRouter, createWebHistory } from 'vue-router'
   import Home from './pages/Home.vue'
   import About from './pages/About.vue'
   
   const router = createRouter({
     history: createWebHistory(),
     routes: [
       { path: '/', component: Home },
       { path: '/about', component: () => import('./pages/About.vue') }
     ]
   })
   
   export default router
   

4. 如何使用 Typescript 进行类型检查？

   • 在项目中安装 Typescript，然后在 tsconfig.json 文件中配置类型检查规则。

   {
     "compilerOptions": {
       "target": "es2020",
       "module": "esnext",
       "lib": ["es2020"],
       "allowJs": true,
       "checkJs": true,
       "sourceMap": true,
       "declaration": true,
       "resolveJsonModule": true,
       "esModuleInterop": true,
       "importHelpers": true,
       "strict": true,
       "moduleResolution": "node"
     },
     "include": [
       "src/**/*.vue",
       "src/**/*.js",
       "src/**/*.ts"
     ],
     "exclude": [
       "node_modules"
     ]
   }
   

5. 如何使用单元测试？

   • 安装测试框架，例如 @vue/test-utils 和 vue-test-runner，编写测试用例，确保代码的可靠性。

   // 单元测试示例
   import { mount } from '@vue/test-utils'
   import MyComponent from './MyComponent.vue'
   
   describe('MyComponent', () => {
     it('renders correctly', () => {
       const wrapper = mount(MyComponent)
       expect(wrapper.html()).toMatchSnapshot()
     })
   })