vue3学习一 （环境准备+vite.config.js设别名+demo 例子）

开篇，为啥选这个。

1 国内流行。

2 大神推荐。!

image.png

需求与生态形成了良性循环。

1 安装node ,vscode.(装volor 插件)

2 创建vite 项目。

npm create vite 
//依次选vue3 vue-ts 

3 vite 配置。 vite.config.js

Configuring Vite | 官网 https://vitejs.dev/config

3.1 支持别名

 import path from "path"
  resolve:{
    alias:{
      "@":path.resolve(__dirname, 'src')
    }
  },
  
  
  //这样调用 时，可以直接写成这种简易方式
  import HelloWorld from 'com/HelloWorld.vue'

3.2 设置默认扩展名

    extensions:['.vue','.ts']
    
    //下用时，可以省略后缀。
    import HelloWorld from 'com/HelloWorld'

4 第一个例子。（使用setup语法糖）

<script setup lang="ts">
import {ref,reactive,computed} from 'vue'

const count = ref(1);
const sum = computed(()=>{
  return count.value + 2
})


</script>

<template>
  {{count}} <br/>
  {{sum}}
</template>

展示效果