Vue3一学就会系列：01 vue3安装与搭建项目

---

前言

vue3发行这么久了，你还在用vue2 在做项目吗？
跟着我一起学习一下vue3知识点，搭建vue3项目，项目跑得老快了，还不赶紧跟着我来玩玩试试！~~

官网

https://cn.vuejs.org/guide/introduction.html

简介

是一款用于构建用户界面的 JavaScript 框架
它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。
两个核心功能：
● 声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。
● 响应性：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。

API风格

vue组件可以按照两种风格书写：选项式api 和 组合式api

选项式API
即 vue2我们常用到的书写方式

<template>
  <button @click="increment">Count is: {
   
   { count }}</button>
</template>

<script>
  export default {
      
      
    // data() 返回的属性将会成为响应式的状态
    // 并且暴露在 `this` 上
    data() {
      
      
      return {
      
      
        count: 0
      }
    },

    // methods 是一些用来更改状态与触发更新的函数
    // 它们可以在模板中作为事件监听器绑定
    methods: {
      
      
      increment() {
      
      
        this.count++
      }
    },

    // 生命周期钩子会在组件生命周期的各个不同阶段被调用
    // 例如这个函数就会在组件挂载完成后被调用
    mounted() {
      
      
      console.log(`The initial count is ${ 
        this.count}.`)
    }
  }
</script>

组合式API
通常会与

<template>
  <button @click="increment">Count is: {
   
   { count }}</button>
</template>

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

// 响应式状态
const count = ref(0)

// 用来修改状态、触发更新的函数
function increment() {
      
      
  count.value++
}

// 生命周期钩子
onMounted(() => {
      
      
  console.log(`The initial count is ${ 
        count.value}.`)
})
</script>

快速上手

创建一个vue应用

● 前提条件
确保安装最新版16.0或者更高版本Node.js
Node.js官网：https://nodejs.org/zh-cn/
● 安装vue官方项目脚手架工具
npm init vue@latest
● 创建过程示意图

项目名 √ Project name: … vue3-demo
添加typescirpt √ Add TypeScript? … No / Yes
JSX 支持 √ Add JSX Support? … No / Yes
vue-router路由插件 √ Add Vue Router for Single Page Application development? … No / Yes
pinia状态管理 √ Add Pinia for state management? … No / Yes
单元测试 √ Add Vitest for Unit Testing? … No / Yes
测试 √ Add an End-to-End Testing Solution? » No
eslint代码验证 √ Add ESLint for code quality? … No / Yes
prettier代码格式 √ Add Prettier for cocd de formatting? … No / Yes

运行项目

进入项目目录，安装依赖，运行项目

cd vue3-demo
npm install
npm run dev

默认运行地址是：http://127.0.0.1:5173/
浏览器中打开，看到效果如下，则恭喜你搭建了第一个vue3项目

总结

以上就是今天的内容，本文仅仅简单介绍了vue3的安装项目搭建，而更多的vue3知识，后续文章，我将带大家慢慢深入了解。

如果觉得有用欢迎点赞关注
有问题私信我！！~~