Vue3 尝鲜使用 vue3 + vite 搭建项目

Question

初始化工程

注意：目前 vue 相关生态工具仍处于 rc 或者 beta 阶段，请勿直接用于生产环境。

创建一个空的目录 vue3-demo，然后初始化 package.json。

mkdir vue3-demo
npm init -f

创建 .npmrc 文件。

registry=https://registry.npm.taobao.org

初始化项目

先安装 vue3 生产依赖

npm i vue@next

安装 vite、@vue/compiler-sfc 开发依赖

npm i -D vite @vue/compiler-sfc

创建最基本的文件

.
├── src
│   ├── app.vue
│   └── main.js
├── .npmrc
└── index.html

app.vue 文件：

<template>
    <h1>Hello vue3-demo</h1>
</template>

main.js 文件

import { createApp } from 'vue';
import App from './app.vue';

createApp(App).mount('#app');

在 package.json 里添加 script

...
"scripts": {
    "dev": "vite",
    "build": "vite build"
}
...

启动项目

npm run dev

> vue3-demo@1.0.0 dev /Users/yundanran/development/localhost/vue3-demo
> vite

vite v1.0.0-rc.4
[vite] Optimizable dependencies detected:
vue

  Dev server running at:
  > Local:    http://localhost:3000/
  > Network:  http://192.168.0.109:3000/