初始化工程

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

粘贴图片

0 条评论
作者
状态
  • 发布于 ,3 次更新
  • 最后更新于
  • 被浏览 140 次
  • 被评论 0 次
  • 隶属于 文章 版块
  • 归纳于 前端工具 分类
标签
二维码
目录