项目创建

> npm init vue@latest
> cd <your-project-name>
> npm install
> npm run dev

后端接口代理

在 vite.config.js 里面进行配置

export default defineConfig({
  server: {
    proxy: {
      // 字符串简写写法：http://localhost:5173/foo -> http://localhost:4567/foo
      '/foo': 'http://localhost:4567',
      // 带选项写法：http://localhost:5173/api/bar -> http://jsonplaceholder.typicode.com/bar
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
      // 正则表达式写法：http://localhost:5173/fallback/ -> http://jsonplaceholder.typicode.com/
      '^/fallback/.*': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/fallback/, ''),
      },
      // 使用 proxy 实例
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        configure: (proxy, options) => {
          // proxy 是 'http-proxy' 的实例
        }
      },
      // 代理 websockets 或 socket.io 写法：ws://localhost:5173/socket.io -> ws://localhost:5174/socket.io
      '/socket.io': {
        target: 'ws://localhost:5174',
        ws: true,
      },
    },
  },
})

css 预处理器使用

# .scss and .sass
> npm add -D sass

# .less
> npm add -D less

# .styl and .stylus
> npm add -D stylus

在 TS 中使用 ref 函数

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

interface Exchange {
  name: string
  value: string
  date: string
}

const exchange = ref<Array<Exchange>>([])
</script>

其他详见 https://cn.vuejs.org/guide/typescript/composition-api.html

vue2 中常用选项的平替

vue2	vue3
props	defineProps()
data	ref()
computed	computed()
watch	watchEffect()
mounted	onMounted()
destory	onUnmounted()

computed

计算也修改了写法：

const length = computed<number>(() => exchange.value.length)

watch

const state = reactive({ count: 0 })
const stop = watch(
  () => state.count,
  (count, prevCount) => {
    /* ... */
  }
)

// 当已不再需要该侦听器时：
stop()

ref vs reative

ref() 定义基本类型数据。
reative() 定义引用类型数据。

使用 element-ui

安装 vue3 版本的 element-plus

$ yarn add element-plus

最后

其实 vue3 还是提供了选项式的写法，不过既然有了新选项自然是选择新方式更好。而说到组合式和选项式的区别。

组合式写法更像是原生的 JavaScript 代码，而配置式的写法只针对 Vue 项目，更像是一个框架。

类似的还有 g2 和 g2plot，前者自由度更高，后者则使用一组配置去生成图表。

重要参考资料

• https://cn.vuejs.org/api/reactivity-core.html