Vue3 尝鲜使用 vue3 + vite 搭建项目 - 文章教程

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

发布于 2021-11-25 字数 1550 浏览 740 评论 0

初始化工程

注意:目前 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/

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

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!