使用vite搭建vue3项目

1. 使用vite直接创建

 npm init vite 回车

 Need to install the following packages:
 create-vite

 Ok to proceed? (y) y
 ✔ Project name: … vue3_vite  //项目名称
 ✔ Select a framework: › vue  //选择vue
 ✔ Select a variant: › vue 


 cd vue3_vite  //进入目录
 npm install  //安装依赖
 npm run dev  //运行项目

效果：

2. 使用vue3官方推荐创建方式

 npm init vue@3

步骤：

 Need to install the following packages:
   create-vue@3
 Ok to proceed? (y) y

 Vue.js - The Progressive JavaScript Framework

 ✔ Project name: … vue3_ok  //项目名称
 ✔ Add TypeScript? … No / Yes  //是否使用TS
 ✔ Add JSX Support? … No / Yes  //是否支持JSX，除非你是搞React开发
 ✔ Add Vue Router for Single Page Application development? … No / Yes   //是否添加路由
 ✔ Add Pinia for state management? … No / Yes   //是否添加状态管理 推荐pinia
 ✔ Add Vitest for Unit Testing? … No / Yes  //是否添加单元测试
 ✔ Add Cypress for both Unit and End-to-End testing? … No / Yes  //是否添加端到端测试
 ✔ Add ESLint for code quality? … No / Yes   //是否添加ESLint做代码质量检查
 ✔ Add Prettier for code formatting? … No / Yes   //是否添加Perttier进行代码格式化


  cd vue3_ok   //cd 进行目录
  npm install   //安装相关依赖   npm i
  npm run lint   //运行代码修复
  npm run dev   //运行项目

效果：

3. vue3核心语法

组合式api

• ref

  • 通常定义基本类型或数组类型的变量或常量

  • 例如：

    import {ref} from 'vue'
    let num = ref(10);
    let str = ref('hello world')
    let arr = ref([{ id: 1, name: 'jack' }, { id: 2, name: 'alice' }])
    

  • 如何操作dom[通常vue很少操作dom]

    • 给dom定义ref名称

      <button ref="btn" @click="changeValue">修改值</button><
      

    • 定义一个ref常量

      //定义dom操作对象
      const btn = ref(null)
      

    • 然后通过常量.value.style.css属性名

       btn.value.style.width='300px'
      

• reactive

  • reactive主要用于复杂对象类型

  • 例如：

    //定义用户信息
    const obj = reactive({
      username: '张三',
      age: 20,
      address: '北京',
      hobby: ['音乐', '刷抖音'],
    })
    

• toRef

  • 可以将reactive定义的响应式对象中的某个属性单独提取成ref定义的形式

  • 例如：

    const obj = reactive({
      username: '张三',
      age: 20,
      address: '北京',
      hobby: ['音乐', '刷抖音'],
       
    })
    
    const mingzi=toRef(obj,'username')
    
    模板:
    
    {{ mingzi }}
    

• toRefs

  • 可以将reactive定义的对象属性全部提取出来转换成ref形式

  • 例如：

    //定义用户信息，reactive主要用于复杂对象类型
    const obj = reactive({
      username: '张三',
      age: 20,
      address: '北京',
      hobby: ['音乐', '刷抖音'],
       
    })
    
    //toRefs
    const {username,age,address,hobby}=toRefs(obj)
    

  • computed

    • 可以将ref，reative定义的变量或常量，通过计算属性生成一个新的可响应式的值(ref)

    • 例如：

      //计算属性
      const total = computed(() => {
      
        let res = 0;
        arr.value.forEach(item => {
          res+=item.num
         })
      
        return res
      
      })
      

• 通常computed只能读取(默认支持get)，不能修改，如果想修改，必须通过set方式

  • 例如：

  const fullname = computed({
  get: () => {
    return firstname.value + lastname.value;
  },
  set: (val) => {
    firstname.value = val[0];
    lastname.value = val.slice(1);
    },
  });
  

• watch

  • 数据改变时，才监听数据的变化

  • 例如：

    //监听ref
    //watch(监听目标,回调)
    watch(firstname, (newV, oldV) => {
      console.log('新值：',newV)
      console.log('旧值:', oldV)
    
    })
    
    //监听reactive
    watch(()=>obj.username, (newV,oldV) => {
      console.log('obj.username新值：',newV)
      console.log('obj.username旧值:', oldV)
    })
    
    

• watchEffect

  • 进行页面立即触发监听

  • 例如：

    watchEffect(() => {
      console.log('进入立马监听：',firstname.value)
    })
    

• nextTick

  • 由于数据改变，dom并未更新，如果要拿到dom更新之后的结果，需要通过nextTick来解决
  • 应用场景：
    • 商品列表滚动
    • 数据更新，要对dom做一些操作时使用