Vue 3.0 新手入门指南

Vue 3.0 新手入门指南

1. 创建 Vue 3.0 项目

步骤 1: 安装 Node.js

• 确保你的系统已安装 Node.js 18.3 或更高版本。
  步骤 2: 安装 Vue CLI
• 在命令行中运行以下命令安装 Vue CLI:

  npm install -g @vue/cli
  # 或者
  yarn global add @vue/cli
  

步骤 3: 创建 Vue 项目

• 在命令行中运行以下命令创建一个新的 Vue 3.0 项目:

  vue create my-vue-app
  

  • 选择默认配置或手动选择配置。
    步骤 4: 进入项目目录
• 进入创建的项目目录:

  cd my-vue-app
  

步骤 5: 启动开发服务器

• 启动开发服务器:

  npm run serve
  # 或者
  yarn serve
  

2. 使用 Vue Router

步骤 1: 安装 Vue Router

• 在项目目录中运行以下命令安装 Vue Router:

  npm install vue-router@4
  # 或者
  yarn add vue-router@4
  

步骤 2: 创建路由文件

• 在 src 目录下创建 router 文件夹，并在其中创建 index.js 文件。
  步骤 3: 配置路由
• 在 index.js 文件中配置路由:

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

步骤 4: 引入路由

• 在 main.js 或 main.ts 文件中引入并使用路由:

  import { createApp } from 'vue'
  import App from './App.vue'
  import router from './router'
  createApp(App).use(router).mount('#app')
  

3. 使用 Vuex

步骤 1: 安装 Vuex

• 在项目目录中运行以下命令安装 Vuex:

  npm install vuex@4
  # 或者
  yarn add vuex@4
  

步骤 2: 创建 store 文件

• 在 src 目录下创建 store 文件夹，并在其中创建 index.js 文件。
  步骤 3: 配置 Vuex store
• 在 index.js 文件中配置 Vuex store:

  import { createStore } from 'vuex'
  export default createStore({
    state() {
      return {
        count: 0
      }
    },
    mutations: {
      increment(state) {
        state.count++
      }
    },
    actions: {
      increment({ commit }) {
        commit('increment')
      }
    }
  })
  

步骤 4: 引入 Vuex

• 在 main.js 或 main.ts 文件中引入并使用 Vuex:

  import { createApp } from 'vue'
  import App from './App.vue'
  import router from './router'
  import store from './store'
  createApp(App).use(router).use(store).mount('#app')
  

4. 常用的 NPM 包使用

步骤 1: 安装 Axios

• Axios 是一个基于 Promise 的 HTTP 库，用于浏览器和 Node.js 中。

  npm install axios
  # 或者
  yarn add axios
  

步骤 2: 引入 Axios

• 在你的 Vue 组件中引入 Axios 并使用它发送 HTTP 请求:

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

步骤 3: 安装 Element Plus

• Element Plus 是一个基于 Vue 3.0 的组件库。

  npm install element-plus
  # 或者
  yarn add element-plus
  

步骤 4: 引入 Element Plus

• 在 main.js 或 main.ts 文件中引入 Element Plus 并全局注册:

  import { createApp } from 'vue'
  import App from './App.vue'
  import router from './router'
  import store from './store'
  import ElementPlus from 'element-plus'
  import 'element-plus/dist/index.css'
  const app = createApp(App)
  app.use(router).use(store).use(ElementPlus).mount('#app')
  

5. 适合 Vue 3.0 的 VSCode 插件

• Vetur: 用于处理 Vue 文件的语法高亮、格式化、自动完成等。
• ESLint: 用于代码检查和格式化。
• Prettier - Code Formatter: 用于代码格式化。
• Vue Peek: 用于查看 Vue 组件的源代码。
• Vetur + ESLint + Prettier: 结合这三个插件，可以实现代码的自动格式化、检查和修复。

6. Vue 3.0 与 Vue 2.0 的不同

• 性能提升: Vue 3.0 使用了 Proxy 实现响应式系统，性能比 Vue 2.0 更好。
• 组合式 API: Vue 3.0 引入了 Composition API，提供了更灵活的方式来组织和重用逻辑。
• TypeScript 支持: Vue 3.0 是用 TypeScript 编写的，提供了更好的 TypeScript 集成。
• 新的生命周期钩子: Vue 3.0 引入了一些新的生命周期钩子，如 onMounted、onUpdated 等。
• 更好的性能优化: Vue 3.0 提供了更多的性能优化工具，如 <script setup> 语法糖。
  通过以上步骤，你可以创建一个基本的 Vue 3.0 项目，并开始使用 Vue 全家桶进行开发。随着你对 Vue 3.0 的熟悉，你可以进一步探索更多的功能和高级特性。