使用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  //运行项目

效果:
使用vite搭建vue3项目_第1张图片

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   //运行项目

效果:
使用vite搭建vue3项目_第2张图片

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做一些操作时使用

你可能感兴趣的:(vue.js,javascript,typescript)