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.jsmain.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.jsmain.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.jsmain.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 引入了一些新的生命周期钩子,如 onMountedonUpdated 等。
  • 更好的性能优化: Vue 3.0 提供了更多的性能优化工具,如 <script setup> 语法糖。
    通过以上步骤,你可以创建一个基本的 Vue 3.0 项目,并开始使用 Vue 全家桶进行开发。随着你对 Vue 3.0 的熟悉,你可以进一步探索更多的功能和高级特性。
Logo

前往低代码交流专区

更多推荐